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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
Javascript的一种模块模式
Mar 22 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
vue-cli常用设置总结
Feb 24 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
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python如何写try语句
2020/07/14 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
销售自我评价
2013/10/22 职场文书
校三好学生主要事迹
2014/01/11 职场文书
承办会议欢迎词
2014/01/17 职场文书
汽车专业求职信
2014/06/05 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
离婚协议书范文
2015/01/26 职场文书
争先创优个人总结
2015/03/04 职场文书
高中开学感言
2015/08/01 职场文书
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers