jquery attr()设置和获取属性值实例教程


Posted in Javascript onSeptember 25, 2016

语法:

1、attr(“属性名”); //获取属性的值(取得第一个匹配元素的属性。通过这个方法可以方便的从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回undefined)

2、attr(“属性名”,“属性值”); //设置属性的值(为所有匹配的元素设置一个属性值)

3、attr(“属性名”,“函数值”); //设置属性的函数值(为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数家孙的值作为属性值)

4、attr(properties); //给指定元素设置多个属性值,即:{属性名1:“属性值1”,属性值2:”属性值2”}(这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意,如果你要设置的对象的class属性,你必须使用className作为属性名,或者你可以直接使用 class 或者 id )

注意:所有的标点符号都是英文符号,在给指定元素设置多个属性值的时候,注意双引号“”的使用!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>设置和获取属性值</title>
  <style>
  </style>
  <script src="js/jquery-3.1.0.min.js"></script>
  <script>
    $(function(){
      var n=0;
      $("#btn1").on("click",function(){
        alert($("img").attr("src"))//获取
      });
      $("#btn2").on("click",function(){
        //设置
        if(n==0){
          $("img").attr("src","images/02.jpg")
          n=1
        }else if (n==1){
          $("img").attr("src","images/03.jpg")
          n=2
        }else if (n==2){
          $("img").attr("src","images/04.jpg")
          n=3
        }else if (n==3){
          $("img").attr("src","images/05.jpg")
          n=0
        }
      })
    })
  </script>

</head>
<body>
<button type="button" id="btn1"> 获取属性值 </button>
<button type="button" id="btn2"> 设置属性值 </button>
<br><br>
<img src="images/01.jpg">
</body>
</html>
Javascript 相关文章推荐
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
关于js原型的面试题讲解
Sep 25 #Javascript
前端设计师们最常用的JS代码汇总
Sep 25 #Javascript
JavaScript使用Range调色及透明度实例
Sep 25 #Javascript
JavaScript中原型链存在的问题解析
Sep 25 #Javascript
JavaScript制作颜色反转小游戏
Sep 25 #Javascript
JavaScript实现简单的日历效果
Sep 25 #Javascript
javascript实现根据汉字获取简拼
Sep 25 #Javascript
You might like
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
详解Document.Cookie
2015/12/25 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
利用Python进行异常值分析实例代码
2017/12/07 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
python tkinter基本属性详解
2019/09/16 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
单位门卫岗位职责
2013/12/20 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
劳动竞赛口号
2014/06/16 职场文书
法制宣传标语
2014/06/23 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
V Rising 服务器搭建图文教程
2022/06/16 Servers
python绘制云雨图raincloud plot
2022/08/05 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技