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 相关文章推荐
jquery 元素相对定位代码
Oct 15 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
node 文件上传接口的转发的实现
Sep 23 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
js实现登录时记住密码的方法分析
Apr 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
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
javascript 必知必会之closure
2009/09/21 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Django csrf 验证问题的实现
2018/10/09 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python批量创建指定名称的文件夹
2019/03/21 Python
python写日志文件操作类与应用示例
2019/07/01 Python
Python编写打字训练小程序
2019/09/26 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
学校师德师风整改方案
2014/10/28 职场文书
西柏坡观后感
2015/06/08 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL