JS中Attr的用法详解

 更新时间:2017年10月09日 14:15:33   作者:he140622  
本文通过实例代码给大家介绍了js中的attr的用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧

具体代码如下所示:

<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对象的深浅复制

    从层次上来看,对象的复制可以简单地分为浅复制和深复制,顾名思义,浅复制是指只复制一层对象的属性,不会复制对象中的对象的属性,对象的深复制会复制对象中层层嵌套的对象的属性。本文是我在复制对象方面的一些心得总结,由浅复制到深复制,感兴趣的朋友一起学习吧
    2017-03-03
  • js按指定格式显示日期时间的样式代码

    js按指定格式显示日期时间的样式代码

    按指定格式显示日期时间在开发与时间相关的应用时非常有用,接下来与大家分享下格式化显示日期时间的方法,感兴趣的朋友可以参考下哈
    2013-04-04
  • JS中可能会常用到的一些数据处理方法

    JS中可能会常用到的一些数据处理方法

    这篇文章主要给大家介绍了JS中可能会常用到的一些数据处理方法,好多知识写下来也能加深一下自身的记忆,文中给出了详细的实例代码,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • ES6 proxy和reflect的使用方法与应用实例分析

    ES6 proxy和reflect的使用方法与应用实例分析

    这篇文章主要介绍了ES6 proxy和reflect的使用方法,结合具体实例形式分析了ES6 proxy和reflect基本功能、原理、使用方法与操作注意事项,需要的朋友可以参考下
    2020-02-02
  • 解决一个微信号同时支持多个环境网页授权问题

    解决一个微信号同时支持多个环境网页授权问题

    由于微信限制一个服务号只能配置一个网页授权域名, 又不可能给每个环境单独配一个服务号,这样不仅需要成本而且很浪费资源,下面小编给大家带来了解决一个微信号同时支持多个环境网页授权问题,感兴趣的朋友一起看看吧
    2019-08-08
  • AutoSave/自动存储功能实现

    AutoSave/自动存储功能实现

    AutoSave/自动存储功能实现...
    2007-03-03
  • javascript运算符——逻辑运算符全面解析

    javascript运算符——逻辑运算符全面解析

    下面小编就为大家带来一篇javascript运算符——逻辑运算符详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js动态切换图片的方法

    js动态切换图片的方法

    这篇文章主要介绍了js动态切换图片的方法,包含完整的css文件与js文件实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • Promise抛出错误解决基础示例详解

    Promise抛出错误解决基础示例详解

    这篇文章主要为大家介绍了Promise抛出错误解决基础示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 过期软件破解办法实例详解

    过期软件破解办法实例详解

    这篇文章主要介绍了过期软件破解办法实例详解的相关资料,5行脚本代码即可改变软件期限,具有参考价值,其他软件可参考此方法,需要的朋友可以参考下
    2017-01-01

最新评论