jQuery中attr和prop的區別

 

attribute（特性），是咱們賦予某個事物的特質或對象,而attribute是咱們經過設置HTML標籤而給之賦予的特性,
 property（屬性），是早已存在的不須要外界賦予的特質,property是DOM對象自身就擁有的屬性.

 

在高版本的jquery引入prop方法後，何時該用prop？何時用attr？它們兩個之間有什麼區別？這些問題就出現了。

關於它們兩個的區別，網上的答案不少。這裏談談個人心得，個人心得很簡單：

• 對於HTML元素自己就帶有的固有屬性，在處理時，使用prop方法。[例如]
• 對於HTML元素咱們本身自定義的DOM屬性，在處理時，使用attr方法。

 

上面的描述也許有點模糊，舉幾個例子就知道了。 

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

 這個例子裏<a>元素的DOM屬性有「href、target和class"，這些屬性就是<a>元素自己就帶有的屬性，也是W3C標準裏就包含有這幾個屬性，或者說在IDE裏可以智能提示出的屬性，這些就叫作固有屬性。處理這些屬性時，建議使用prop方法。

<a href="#" id="link1" action="delete">刪除</a>

這個例子裏<a>元素的DOM屬性有「href、id和action」，很明顯，前兩個是固有屬性，然後面一個「action」屬性是咱們本身自定義上去的，<a>元素自己是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時，建議使用attr方法。使用prop方法取值和設置屬性值時，都會返回undefined值。

 

再舉一個例子：

<input id="chk1" type="checkbox" />是否可見
<input id="chk2" type="checkbox" checked="checked" />是否可見

像checkbox，radio和select這樣的元素，選中屬性對應「checked」和「selected」，這些也屬於固有屬性，所以須要使用prop方法去操做才能得到正確的結果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

若是上面使用attr方法，則會出現：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

實際案例:

【JS代碼以下】

 1    <script type="text/javascript">
 2         $(function(){
 3             $("input:checkbox").click(function(){
 4 
 5                 $level = $(this).attr('level'); //獲取當前按鈕框值。1（表示項目），2（模塊），3（操做）
 6                 //若是選擇 level=1 的話，則會選擇它一下的全部checkbox
 7                 if($level == 1){
 8                     $str = '_';
 9                     $inputs = $('input[value*='+$str+']');  //這裏是模糊匹配
10                     console.log($inputs);
11                     $(this).prop('checked')?$inputs.prop('checked',true):$inputs.removeAttr('checked');
12                 }
13                 // 若是選擇模塊的話，則它下面的方法也一塊兒會被選定，思路：就是模塊下面操做的的「pid」都和模塊的「id」是相等的
14                 else if($level == 2){
15                     $id = $(this).attr('id');
16                     $inputs = $('input[pid = '+$id+']');
17                     $(this).prop('checked')?$inputs.prop('checked',true):$inputs.removeAttr('checked');
18 
19                     if($(this).prop('checked')){
20                         //追加到上級（項目層），思路(相反):再次獲取模塊的pid
21                         $ppid = $('input[id = '+$id+']').prop('pid');
22                         $('input[id = '+$ppid+']').prop('checked',true);
23                     }
24                 }
25                 //思路：若是當前的操做被選中的話，則獲取它的pid，而且設置id(上級模塊) = （操做）pid 模塊也會被選中
26                 else if($level == 3){
27                     //判斷當前按鈕是否被選中
28                     if($(this).prop('checked')){  // checked 是input:checkbox 自己就帶有的固有屬性,在處理時，使用prop方法 29                         $pid = $(this).attr('pid'); // 這裏的【pid】是我本身自定義的DOM屬性，在處理時，使用attr方法 30                         $('input[id='+$pid+']').prop('checked',true);
31 
32                         //追加到上上級（項目層），思路(相反):再次獲取模塊的pid
33                         $ppid = $('input[id = '+$pid+']').prop('pid');
34                         $('input[id = '+$ppid+']').prop('checked',true);
35                     }
36 
37                 }
38             });
39         });
40     </script>