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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
利用javaScript处理常用事件详解
Apr 14 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
一个用于网络的工具函数库
2006/10/09 PHP
加强版phplib的DB类
2008/03/31 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
动态创建类实例代码
2009/10/07 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python区块及区块链的开发详解
2019/07/03 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
生产部岗位职责范文
2014/02/07 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
勾股定理课后反思
2014/04/26 职场文书
空气环保标语
2014/06/12 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
患者身份识别制度
2015/08/06 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python