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 相关文章推荐
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 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生成随机密码类分享
2014/06/25 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python numpy数组复制使用实例解析
2020/01/10 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
python中with用法讲解
2020/02/07 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
机电一体化职业规划书
2014/01/07 职场文书
施工安全责任书
2014/04/14 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
董事长助理岗位职责
2015/02/11 职场文书
法院个人总结
2015/03/03 职场文书
靠谱准确的求职信
2019/04/02 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Vue+Flask实现图片传输功能
2022/04/01 Vue.js
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python