欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery操作屬性值方法介紹

 更新時(shí)間：2022年05月04日 11:39:03   作者：.NET開(kāi)發(fā)菜鳥(niǎo)  
這篇文章介紹了jQuery操作屬性值的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、獲取或設(shè)置元素的屬性值

attr()獲取或設(shè)置匹配元素的屬性值，語(yǔ)法如下：

獲取元素屬性值示例：

<!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>

效果：

設(shè)置單個(gè)元素屬性值示例：

<!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")) ; 

              // 添加單個(gè)屬性
              $("img").attr("alt","QQ斗地主"); 
              alert($("img").attr("alt")) ;             
           });          
       });
    </script>
</head>
<body>
    <img src="../qq.jpg" />
</body>
</html>

效果：

添加多個(gè)屬性值示例：

<!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")) ; 

              // 添加單個(gè)屬性
              //$("img").attr("alt","QQ斗地主"); 
              //alert($("img").attr("alt")) ;

              // 添加多個(gè)屬性
              $("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()匹配的元素中刪除一個(gè)屬性，語(yǔ)法如下：

示例：

<!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")) ; 

              // 添加單個(gè)屬性
              //$("img").attr("alt","QQ斗地主"); 
              //alert($("img").attr("alt")) ;

              // 添加多個(gè)屬性
              //$("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>

效果：

到此這篇關(guān)于jQuery操作屬性值的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論