jQuery操作属性值方法介绍

更新时间：2022年05月04日 11:39:03 作者：.NET开发菜鸟

这篇文章介绍了jQuery操作属性值的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、获取或设置元素的属性值

attr()获取或设置匹配元素的属性值，语法如下：

获取元素属性值示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性操作</title>
    <style>
      *{
          margin: 0px;
          padding: 0px;
      }
      td{
          width: 100px;
          border: 1px solid #cccccc;
          cursor: pointer;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
           $("img").click(function(){
              // 获取属性的值
              alert($("img").attr("src")) ;              
           });          
       });
    </script>
</head>
<body>
    <img src="../qq.jpg" />
</body>
</html>

效果：

设置单个元素属性值示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性操作</title>
    <style>
      *{
          margin: 0px;
          padding: 0px;
      }
      td{
          width: 100px;
          border: 1px solid #cccccc;
          cursor: pointer;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
           $("img").click(function(){
              // 获取属性的值
              //alert($("img").attr("src")) ; 

              // 添加单个属性
              $("img").attr("alt","QQ斗地主"); 
              alert($("img").attr("alt")) ;             
           });          
       });
    </script>
</head>
<body>
    <img src="../qq.jpg" />
</body>
</html>

效果：

添加多个属性值示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性操作</title>
    <style>
      *{
          margin: 0px;
          padding: 0px;
      }
      td{
          width: 100px;
          border: 1px solid #cccccc;
          cursor: pointer;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
           $("img").click(function(){
              // 获取属性的值
              //alert($("img").attr("src")) ; 

              // 添加单个属性
              //$("img").attr("alt","QQ斗地主"); 
              //alert($("img").attr("alt")) ;

              // 添加多个属性
              $("img").attr({"alt":"QQ斗地主","title":"斗地主"}); 
              console.log($(this).attr("alt")); 
              console.log($(this).attr("title"));            
           });          
       });
    </script>
</head>
<body>
    <img src="../qq.jpg" />
</body>
</html>

效果：

二、删除属性值

removeAttr()匹配的元素中删除一个属性，语法如下：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性操作</title>
    <style>
      *{
          margin: 0px;
          padding: 0px;
      }
      td{
          width: 100px;
          border: 1px solid #cccccc;
          cursor: pointer;
      }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
           $("img").click(function(){
              // 获取属性的值
              //alert($("img").attr("src")) ; 

              // 添加单个属性
              //$("img").attr("alt","QQ斗地主"); 
              //alert($("img").attr("alt")) ;

              // 添加多个属性
              //$("img").attr({"alt":"QQ斗地主","title":"斗地主"}); 
              //console.log($(this).attr("alt")); 
              //console.log($(this).attr("title")); 

              // 删除属性
              $(this).removeAttr("src");           
           });          
       });
    </script>
</head>
<body>
    <img src="../qq.jpg" />
</body>
</html>

效果：

到此这篇关于jQuery操作属性值的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jQuery 自动增长的文本输入框实现代码
文本输入框内的字数不能确定，而input type="text"的size是固定的，当字数超过size时（默认是20），先输入的内容就会从文本框的左端隐藏起来，不便于输入。
2010-04-04
jQuery学习笔记之jQuery构建函数的7种方法
jQuery把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口，这为jQuery操作降低了门槛。那我们来看下具体构造函数的“七种武器”吧。
2014-06-06
使用JQuery制作简易留言板
这篇文章主要为大家详细介绍了如何使用JavaScript和JQuery制作简易留言板功能，文中的示例代码讲解详细，有需要的小伙伴可以参考一下
2016-05-05
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})
这篇文章主要介绍了关于jQuery中animate()的使用方法及解决$("body").animate({"scrollTop":top})不被Firefox支持的问题，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-04-04
jQuery制作input提示内容（兼容IE8以上）
这篇文章主要为大家详细介绍了jQuery制作input提示内容，兼容IE8以上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
JQuery控制radio选中和不选中方法总结
这篇文章主要介绍了JQuery控制radio选中和不选中方法总结,本文起讲解了设置选中方法、设置选中和不选中示例、另一种设置选中方法、根据值设置radio选中、使用prop方法操作示例等内容,需要的朋友可以参考下
2015-04-04
jquery+javascript编写国籍控件
本文给大家分享一个自己编写的使用jquery+javascript实现的国籍控件，效果非常不错，这里推荐给大家。
2015-02-02
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
本文是作者学习jQuery之后练手之作，兼容各大浏览器，非常的精美实用，这里放出来给小伙伴们，有需要的直接拿走，别跟我客气^_^
2014-11-11
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
这篇文章主要介绍了详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题的相关资料,需要的朋友可以参考下
2015-12-12
javascript错误的认识不用关心内存管理
因为垃圾回收的存在，让javascript等高级语言开发者产生了一个错误的认识，以为可以不用关心内存管理,需要的朋友可以了解下
2012-12-12