JS中Attr的用法详解


Posted in Javascript onOctober 09, 2017

具体代码如下所示:

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#btn").click(function(){
      //使用attr(name)获取属性值:
      alert($("p").attr("title"));//你最喜欢的水果是。
      alert($("ul li:eq(1)").attr("title"));//橘子汁
      alert($("ul li:eq(1)").attr("alt"));//123
      //使用attr(name, value)改变属性值:
      //$("ul li:eq(1)").attr("title", "还是吗?");//将第二个li的title的值改变
      //使用attr(name, fn)设置属性的函数值
      $("ul li:eq(1)").attr("title", function(){
          return "我就不信";
      });//将第二个li的title的值改变
      alert($("ul li:eq(1)").attr("title"));//我就不信
      //使用attr(name, properties)将一个“名/值”形式的对象设置为所有匹配元素的属性
      $("ul li:eq(1)").attr({title: "第一个", alt: "第二个"});
      alert($("ul li:eq(1)").attr("title"));//第一个
      alert($("ul li:eq(1)").attr("alt"));//第二个
    });
  });
</script>
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
  <li title="苹果汁">苹果</li>
  <li title="橘子汁" name="好吃" alt="123">橘子</li>
  <li title="菠萝汁">菠萝</li>
</ul>
<input type="button" value="点击" id="btn"/>

总结

以上所述是小编给大家介绍的JS中Attr的用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
JqGrid web打印实现代码
May 31 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
vue debug 二种方法
Sep 16 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
移动端效果之Swiper详解
Oct 09 #Javascript
浅谈node的事件机制
Oct 09 #Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 #Javascript
ES6中的Promise代码详解
Oct 09 #Javascript
js+html5生成自动排列对话框实例
Oct 09 #Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 #jQuery
详解如何让Express支持async/await
Oct 09 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
为你总结一些php系统类函数
2015/10/21 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python流程控制语句的深入讲解
2020/06/15 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
大专学生推荐信范文
2013/11/19 职场文书
工程招投标邀请书
2014/01/30 职场文书
大学生学习计划书
2014/09/15 职场文书
拖欠货款起诉状
2015/05/20 职场文书
研讨会致辞
2015/07/31 职场文书