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 相关文章推荐
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
Jquery倒计时源码分享
May 16 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
工作中常用到的ES6语法
Sep 04 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
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
清空上传控件input file的值
2010/07/03 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
详解jQuery选择器
2016/12/21 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
python之Character string(实例讲解)
2017/09/25 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
高二历史教学反思
2014/01/25 职场文书
预备党员承诺书
2014/03/25 职场文书
初中毕业生感言
2015/07/31 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python