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中Get和Set访问器的实现代码
Sep 19 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
详解ESLint在Vue中的使用小结
Oct 15 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 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
VFP与其他应用程序的集成
2006/10/09 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue slots 组件的组合/分发实例
2018/09/06 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
Python单例模式的两种实现方法
2017/08/14 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
Python Flask框架扩展操作示例
2019/05/03 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
《小熊住山洞》教学反思
2014/02/21 职场文书
经典团队口号
2014/06/06 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android