快捷導(dǎo)航

jquery attr()設(shè)置和獲取屬性值實(shí)例教程

更新時(shí)間：2016年09月25日 18:58:10 投稿：hebedich

在JS中設(shè)置節(jié)點(diǎn)的屬性與屬性值用到setAttribute(),獲得節(jié)點(diǎn)的屬性與屬性值用到getAttribute(),而在jquery中，只需要用到attr()這個(gè)函數(shù)就可以了。attr是attribute（屬性）的縮寫。

語法：

1、attr(“屬性名”)； //獲取屬性的值（取得第一個(gè)匹配元素的屬性。通過這個(gè)方法可以方便的從第一個(gè)匹配元素中獲取一個(gè)屬性的值。如果元素沒有相應(yīng)屬性，則返回undefined）

2、attr(“屬性名”，“屬性值”); //設(shè)置屬性的值（為所有匹配的元素設(shè)置一個(gè)屬性值）

3、attr(“屬性名”，“函數(shù)值”); //設(shè)置屬性的函數(shù)值（為所有匹配的元素設(shè)置一個(gè)計(jì)算的屬性值。不提供值，而是提供一個(gè)函數(shù)，由這個(gè)函數(shù)家孫的值作為屬性值）

4、attr(properties); //給指定元素設(shè)置多個(gè)屬性值，即：{屬性名1：“屬性值1”,屬性值2：”屬性值2”}（這是一種在所有匹配元素中批量設(shè)置很多屬性的最佳方式。注意，如果你要設(shè)置的對象的class屬性，你必須使用className作為屬性名，或者你可以直接使用 class 或者 id ）

注意：所有的標(biāo)點(diǎn)符號都是英文符號，在給指定元素設(shè)置多個(gè)屬性值的時(shí)候，注意雙引號“”的使用！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>設(shè)置和獲取屬性值</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(){
        //設(shè)置
        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"> 設(shè)置屬性值 </button>
<br><br>
<img src="images/01.jpg">
</body>
</html>

您可能感興趣的文章: