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 this 的一些学习总结
Aug 31 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 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
PHP 上传文件大小限制
2009/07/05 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
JavaScript 参考教程
2006/12/29 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
Python生成验证码实例
2014/08/21 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
详解python之配置日志的几种方式
2017/05/22 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
python 爬取小说并下载的示例
2020/12/07 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
一套软件测试笔试题
2014/07/25 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
税务会计岗位职责
2014/02/18 职场文书
电焊工岗位职责
2014/03/06 职场文书
从事会计工作年限证明
2015/06/23 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书