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格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
浅谈javascript的闭包
Jan 23 Javascript
基于Vue实现timepicker
Apr 25 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
关于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设计模式中的工厂模式
2008/06/12 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
判断滚动条到底部的JS代码
2013/11/04 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Golang与python线程详解及简单实例
2017/04/27 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Django框架模板用法入门教程
2019/11/04 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
windows下python安装pip方法详解
2020/02/10 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
宿舍打麻将检讨书
2014/01/24 职场文书
小学生期末评语
2014/04/21 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
开展警示教育活动总结
2015/05/09 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
500字作文之周记
2019/12/13 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
SQL Server实现分页方法介绍
2022/03/16 SQL Server
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python