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 相关文章推荐
js 判断脚本加载完毕的代码
Jul 13 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
js制作简易年历完整实例
Jan 28 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
在vue项目中,使用axios跨域处理
Mar 07 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
给初学PHP的5个入手程序
2006/11/23 PHP
跟我学Laravel之路由
2014/10/15 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python常见数制转换实例分析
2015/05/09 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python 多线程串行和并行的实例
2019/02/22 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
公益活动策划方案
2014/01/09 职场文书
初中科学教学反思
2014/01/21 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
听课评语大全
2014/04/30 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
酒店端午节活动方案
2014/08/26 职场文书
离婚协议书范本
2015/01/26 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
Win10 Anaconda安装python-pcl
2022/04/29 Servers