当前位置:主页 > javascript教程 > JS中Attr的用法详解

实例详解JS中Attr用法

发布:2020-01-13 14:24:59 150


本站精选了一篇Attr用法相关的编程文章,网友孙展文根据主题投稿了本篇教程内容,涉及到js、attr、JS中Attr的用法详解相关内容,已被142网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

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的用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!


参考资料

相关文章

  • JS用正则表达式g模式和非g模式的区别点整理

    发布:2020-03-08

    这篇文章给大家详细介绍了JS中使用正则表达式g模式和非g模式的区别,非常不错,具有参考借鉴价值,需要的朋友参考下吧


  • js判断节假日的代码分享

    发布:2020-06-15

    因为要做一个日历控件,遇到国家法定节假日,怎么实现此功能呢?其实实现代码很简单的。下面小编给大家分享js判断节假日实例代码,需要的朋友参考下吧


  • vue.js的vue-cli脚手架使用百度地图API的代码

    发布:2020-01-07

    今天小编就为大家分享一篇关于vue.js的vue-cli脚手架中使用百度地图API的实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧


  • 怎样解决jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效

    发布:2020-01-28

    这篇文章主要介绍了jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法,通过使用prop方法代替attr方法来解决此问题,需要的朋友可以参考下


  • nodeJS模块用法以及简单示例

    发布:2020-03-18

    这篇文章主要介绍了nodeJS模块简单用法,结合实例形式简单分析了nodejs模块定义、引入、注册、启动等相关操作技巧,需要的朋友可以参考下


  • Qt写入Json文件的方法详解(含源码+注释)

    发布:2023-03-05

    在Qt库中,为JSON的相关操作提供了完整的类支持,下面这篇文章主要给大家介绍了关于Qt写入Json文件(含源码+注释)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下


  • JavaScript实现图片连播以及联级菜单的知识点

    发布:2020-01-07

    这篇文章主要介绍了基于JavaScript实现图片连播和联级菜单实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下


  • Vue2.0使用过程常见的问题及解决方法

    发布:2019-12-03

    本篇文章主要介绍了Vue2.0使用过程常见的一些问题总结学习,详细的介绍了使用中会遇到的各种错误,有兴趣的可以了解一下。


网友讨论