Jquery中的prop()、data()與attr()區別詳解

目前在學些過程中遇到關於JQuery的幾個基礎知識,這裡做記錄相當於筆記加深自己的記憶與理解!

JQuery的prop()、data()與attr()的區別

1、JQuery版本的差異

(1)prop():此方法jquery1.6引入,讀/寫DOM的property。

(2)data():此方法在jquery1.2.3引入,作用是把任意的數據讀取/存儲到DOM元素對應的jquery對象上。

(3)attr():此方法從jquery1.0開始就一直存在,官方文檔寫的作用是讀/寫DOM的attribute值,後面容易與property混淆。

2、先比較prop與atrr的區別

(1)源代碼上的重點區別

atrr是通過使用的 DOM 的 API setAttribute() 和 getAttribute() 方法操作的屬性元素節點。

elem.setAttribute( name, value + "" ); 
ret =  elem.getAttribute( name );

prop是通過類似與document.getElementById(el)[name] = value,這是轉化成 element 的一個屬性。

return ( elem[ name ] = value );
return elem[ name ];

(2)操作對象不同

attr():操作的是HTML文檔節點元素的屬性attribute,也就是name,id,class等

prop():操作的是DOM元素(JS對象)的property屬性(這裡屬性可以理解成特性),如checked、selected等。

(3)建議使用的情況場合

atrr():建議操作DOM文檔節點固有的屬性值,如id、class、name、type等

prop():根據官方文檔跟經驗建議使用在一些狀態描述的屬性上,即checked、selected、disablied、readonly等具有true跟false狀態的屬性上。

  <input type="text" id="test" name="username" class="user-login"/>  
  //獲取固有的name屬性  
  var attr = $('#test').attr('name');  
  <select id="test1" name="address">  
        <option value="yn">雲南</option>  
     <option value="bj">北京</option>  
  </select>  
  //設置最後一個option被selected  
  $('#test1' option:last).prop('selected','selected');  
 //如果1.6以後使用attr則會出現undefined   
 var isSelected = ('#test1' option:last).attr('selected');  
 console.log(isSelected);  

(4)效率上的區別

在可以使用prop與atrr的時候,優先選擇prop,效率往往prop大於attr。

(5)細節上的區別

attr與prop在獲取<a>的href屬性的時候,atrr獲取的是href的值,而prop獲得是絕對地址。

<a href="#" id="myUrl" data-name="test"></a>  
<script>  
    var myUrl  = $('#myUrl');  
        console.log(myUrl.prop("href"));//輸出xxx//xxxx//1.html#  
    console.log(myUrl.attr("href"));//輸出#  
</script>  

 


<script>
	var myUrl  = $('#myUrl');
console.log(myUrl.prop("href"));//輸出xxx//xxxx//1.html#
	console.log(myUrl.attr("href"));//輸出#
</script>

attr()操作的是文檔節點的屬性,所以設置的屬性值是字符串類型,如果不是字符串類型,也會調用其toString()方法將其轉換為字符串類型。而prop()操作的是js對象的屬性,設置的屬性值可以為包括數組和對象在內的任意類型。

 

3、data()與attr()、prop()的區別

(1)首先是data的用法

在html5中可以在節點元素中添加data-xxx(註意xxx隻能為全小寫或者全大寫)的標簽,這樣使用可以將data-xxx的屬性值存儲到jquery的的data對象裡,這樣可以避免內存泄漏(下面會介紹),如下代碼:

<p id="myDiv" data-id="1" data-name="Lijian" data-pass="123" data-address='{"province":Yunnan","city":"Kunming"}'></p>  
<script>  
    var myDiv = $('#myDiv');  
    console.log("id: "+myDiv.data('id'));  
    console.log("name: "+myDiv.data('name'));  
    console.log("password: "+myDiv.data('pass'));  
    console.log("address: "+myDiv.data('address'));  
</script>  

<script>
var myDiv = $(‘#myDiv’);
console.log(“id: “+myDiv.data(‘id’));
console.log(“name: “+myDiv.data(‘name’));
console.log(“password: “+myDiv.data(‘pass’));
console.log(“address: “+myDiv.data(‘address’));
</script>

輸出結果:

 

最後總結data-xxx的使用方式:利用data-xxx在節點中添加標簽,之後獲取data對象,其中xxx就是data對象中的屬性,使用data('xxx')就可以獲得data-xxx的值,而且data-xxx這樣的形式可以存儲任何的數據類型。

(2)prop()與data()的區別:

兩者的區別主要就是內存泄漏問題,什麼是內存泄漏?

所謂的內存泄漏在我理解就是,變量是一直引用,甚至在已經銷毀結束的時候還未結束對其引用,並沒有回收垃圾。這時就會造成泄漏,大大降低性能。也就是如果使用 .prop()為 DOM 元素的 property 設置的值不是一個簡單的原始值(number、string 或 boolean),且該 property 在 DOM 元素從 document 移除前未被移除(使用 .removeProp())且被引用,則會導致內存泄漏。因此data就是防止prop內存泄漏的。

為什麼data會防止內存泄漏呢?

這是因為data並不會直接將數據“掛”在元素屬性上,而是通過間接的創建對象進行存儲(也就是data對象),這樣就起到瞭cache的作用。

(3)data()與attr()的區別

通過一下代碼理解:

<p id="myDiv" data-id="1" data-name="Lijian" data-pass="123" data-address='{"province":Yunnan","city":"Kunming"}'></p>  
<script>  
    var myDiv = $('#myDiv');  
    //修改data-name屬性值  
    myDiv.data('name','Zhangsan');  
    console.log("data: "myDiv.data('name'));//Zhangsan  
    console.log("attr: "myDiv.attr('data-name'));//Lijian  
</script>  

<script>
var myDiv = $(‘#myDiv’);
//修改data-name屬性值
myDiv.data(‘name’,’Zhangsan’);
console.log(“data: “myDiv.data(‘name’));//Zhangsan
console.log(“attr: “myDiv.attr(‘data-name’));//Lijian
</script>

 

通過data-name設置屬性的值是無法通過attr獲取得到的,這也是一種個人理解的一種安全機制。

You May Also Like