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的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
AngularJS Module方法详解
Dec 08 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
关于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
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
PHP curl使用实例
2015/07/02 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
js 小数取整的函数
2010/05/10 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
Linux机考试题
2015/10/16 面试题
外贸业务员求职信范文
2013/12/12 职场文书
学校安全责任书
2014/04/14 职场文书
服务口号大全
2014/06/11 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
辞职信怎么写
2015/02/27 职场文书
贪污检举信范文
2015/03/02 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
正则表达式基础与常用验证表达式
2022/06/16 Javascript