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 相关文章推荐
js 创建快捷方式的代码(fso)
Nov 19 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
php日期操作技巧小结
2016/06/25 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
jupyter安装小结
2016/03/13 Python
python中list列表的高级函数
2016/05/17 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
小学毕业典礼演讲稿
2014/09/09 职场文书
2014年技术部工作总结
2014/12/12 职场文书
期末复习计划
2015/01/19 职场文书
乐山大佛导游词
2015/02/02 职场文书
中考学习决心书
2015/02/04 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
获奖感言范文
2015/07/31 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
PyTorch中的torch.cat简单介绍
2022/03/17 Python
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers