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模板来展现json数据的代码
Oct 22 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
npm qs模块使用详解
Feb 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生成QRcode实例
2014/09/22 PHP
php构造函数与析构函数
2016/04/23 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
Javascript面向对象编程
2012/03/18 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
使用js实现数据格式化
2014/12/03 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
Python中的filter()函数的用法
2015/04/27 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
python flask 多对多表查询功能
2017/06/25 Python
python中import reload __import__的区别详解
2017/10/16 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
使用Python 统计高频字数的方法
2019/01/31 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
python3 kubernetes api的使用示例
2021/01/12 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
环境科学专业个人求职的自我评价
2013/11/28 职场文书
家佳咖啡店创业计划书
2013/12/27 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
青春无悔演讲稿
2014/05/08 职场文书
法制演讲稿
2014/09/10 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
用php如何解决大文件分片上传问题
2021/07/07 PHP
Elasticsearch 配置详解
2022/04/19 Java/Android