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实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
js 表单验证方法(实用)
Apr 28 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
JS实现瀑布流布局
Oct 21 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
一起深入理解js中的事件对象
Feb 06 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
关于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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
javaScript基础详解
2017/01/19 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
办护照工作证明范本
2014/01/14 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
学习十八大报告感言
2014/02/28 职场文书
授权委托书怎么写
2014/04/03 职场文书
四年级学生评语大全
2014/04/21 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
班组长安全工作职责
2014/07/15 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
教师年度考核个人总结
2015/02/12 职场文书
教师节表彰会主持词
2015/07/06 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
oracle重置序列从0开始递增1
2022/02/28 Oracle