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居然支持中文(unicode)编程!
Apr 12 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
移动端效果之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连接mssql的一些相关经验及注意事项
2013/02/05 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
javascript eval函数深入认识
2009/02/21 Javascript
js opener的使用详解
2014/01/11 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
同事打架检讨书
2014/02/04 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
Oracle 区块链表创建过程详解
2021/05/15 Oracle