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的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
我的论坛源代码(四)
2006/10/09 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
php-msf源码详解
2017/12/25 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
用pickle存储Python的原生对象方法
2017/04/28 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
学生安全教育材料
2014/02/14 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
学生病假条范文
2015/08/17 职场文书
python基础之爬虫入门
2021/05/10 Python
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL