脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery attr()设置和获取属性值

jquery attr()设置和获取属性值实例教程

 更新时间：2016年09月25日 18:58:10   投稿：hebedich  
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，只需要用到attr()这个函数就可以了。attr是attribute（属性）的缩写。

语法：

1、attr(“属性名”)； //获取属性的值（取得第一个匹配元素的属性。通过这个方法可以方便的从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined）

2、attr(“属性名”，“属性值”); //设置属性的值（为所有匹配的元素设置一个属性值）

3、attr(“属性名”，“函数值”); //设置属性的函数值（为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数家孙的值作为属性值）

4、attr(properties); //给指定元素设置多个属性值，即：{属性名1：“属性值1”,属性值2：”属性值2”}（这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置的对象的class属性，你必须使用className作为属性名，或者你可以直接使用 class 或者 id ）

注意：所有的标点符号都是英文符号，在给指定元素设置多个属性值的时候，注意双引号“”的使用！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>设置和获取属性值</title>
  <style>
  </style>
  <script src="js/jquery-3.1.0.min.js"></script>
  <script>
    $(function(){
      var n=0;
      $("#btn1").on("click",function(){
        alert($("img").attr("src"))//获取
      });
      $("#btn2").on("click",function(){
        //设置
        if(n==0){
          $("img").attr("src","images/02.jpg")
          n=1
        }else if (n==1){
          $("img").attr("src","images/03.jpg")
          n=2
        }else if (n==2){
          $("img").attr("src","images/04.jpg")
          n=3
        }else if (n==3){
          $("img").attr("src","images/05.jpg")
          n=0
        }
      })
    })
  </script>

</head>
<body>
<button type="button" id="btn1"> 获取属性值 </button>
<button type="button" id="btn2"> 设置属性值 </button>
<br><br>
<img src="images/01.jpg">
</body>
</html>

您可能感兴趣的文章:

相关文章

  • 基于jquery实现多级菜单效果

    基于jquery实现多级菜单效果

    这篇文章主要为大家详细介绍了基于jquery实现多级菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 简单实现jQuery级联菜单

    简单实现jQuery级联菜单

    这篇文章主要为大家详细介绍了如何简单实现jQuery级联菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

    jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

    这篇文章主要介绍了jQuery实现图片轮播效果的方法,该功能基于jquery.pack.js插件实现,涉及jQuery针对页面元素与样式的动态操作技巧,需要的朋友可以参考下
    2016-06-06
  • jquery必须知道的一些常用特效方法及使用示例(整理)

    jquery必须知道的一些常用特效方法及使用示例(整理)

    本文整理了一些常用的特效示例，如：.jQuery fadeIn() 用于淡入已隐藏的元素、jQuery fadeToggle()方法可以在 fadeIn()与 fadeOut()方法之间进行切换等等，感兴趣的朋友可以参考下哈
    2013-06-06
  • 简单的代码实现jquery定时器

    简单的代码实现jquery定时器

    当收到消息的时候能够及时的刷新,显示收到消息的条数，下面与大分享下使用简单的代码实现jquery定时器
    2013-11-11
  • 基于jquery实现左右按钮点击的图片切换效果

    基于jquery实现左右按钮点击的图片切换效果

    这篇文章主要介绍了基于jquery实现左右按钮点击的图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jquery实现的Accordion折叠面板效果代码

    jquery实现的Accordion折叠面板效果代码

    这篇文章主要介绍了jquery实现的Accordion折叠面板效果代码,通过jquery鼠标click事件操作页面元素样式动态变换实现手风琴折叠效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery的文档处理程序详解

    jQuery的文档处理程序详解

    这篇文章主要介绍了jQuery的文档处理程序,结合实例形式详细分析了jQuery文档处理程序的概念、原理、使用方法与相关注意事项,并详细讲述了文档处理程序的优势,需要的朋友可以参考下
    2016-05-05
  • JQuery 遮罩层实现(mask)实现代码

    JQuery 遮罩层实现(mask)实现代码

    用过ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我们的使用。
    2010-01-01
  • Jquery 实现Tab效果 思路是js思路

    Jquery 实现Tab效果 思路是js思路

    Jquery 实现Tab效果，思路就是普通的用js的思路控制的，脚本之家发布过更精简的代码，这个比较适合一直用js开始学用jquery控制的朋友一个参考。
    2010-03-03

最新评论