這次帶給大家.attr()與.data()使用區別,.attr()與.data()使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
#
Jquery物件屬性與DOM屬性
#
一個簡單的範例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>Jquery中.attr和.data的区别</title>
</head>
<body>
<p id= "app" data-foo= "hello" ></p>
</body>
<script type= "text/javascript" src= "http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" ></script>
<script type= "text/javascript" >
vargetAttr1 = $( '#app' ).attr( 'data-foo' );
vargetData1 = $( '#app' ).data( 'foo' );
console.log( 'getAttr1: ' + getAttr1);
console.log( 'getData1: ' + getData1);
$( '#app' ).attr( 'data-foo' , 'world' );
vargetAttr2 = $( '#app' ).attr( 'data-foo' );
vargetData2 = $( '#app' ).data( 'foo' );
console.log( 'getAttr2: ' + getAttr2);
console.log( 'getData2: ' + getData2);
$( '#app' ).data( 'foo' , 'WORLD' );
vargetAttr3 = $( '#app' ).attr( 'data-foo' );
vargetData3 = $( '#app' ).data( 'foo' );
console.log( 'getAttr3: ' + getAttr3);
console.log( 'getData3: ' + getData3);
</script>
</html>
|
登入後複製
• $.attr()每次都從DOM 元素 取屬性的值,即和視圖中標籤內的屬性值保持一致。 •$.attr('data-foo')會從標籤內取得data-foo屬性值;
#
•$.attr('data-foo', 'world')會將字串'world'塞到標籤的'data-foo'屬性中;
•$.data()是從 Jquery物件 取值,由於物件屬性值保存在記憶體中,因此可能和視圖裡的屬性值不一致的情況。 •$.data('foo')會從 Jquery物件 內得到foo的屬性值,而不是從標籤內取得data-foo屬性值;
•$.data('foo', 'world')會將字串'world'塞到 Jquery物件 的'foo'屬性中,而不是塞到視圖標籤的data-foo屬性中。
結合上面程式碼和解釋,大家應該要能夠理解兩者的差異。
小結
所以$.attr()和$.data()要避免混合用,也就是應該盡量避免以下兩種情況的出現:
1.透過$.attr()來進行set屬性,然後透過$.data()進行get屬性值;
#
2.透過$.data()來進行set屬性,然後透過$.attr()進行get屬性值。
同時從效能的角度來說,建議使用$.data()來進行set和get操作,因為它只是修改的Jquey物件的屬性值,不會造成額外的DOM操作。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
jQuery做出滑鼠滾輪動作圖片縮放小
jQuery實作回到頂部功能
jQuery判斷是否要瀏覽到網頁底部
#
以上是.attr()與.data()使用區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!