首頁 > web前端 > js教程 > .attr()與.data()使用區別

.attr()與.data()使用區別

php中世界最好的语言
發布: 2018-04-19 15:39:30
原創
1771 人瀏覽過

這次帶給大家.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);//hello

    console.log('getData1: '+ getData1);//hello

    $('#app').attr('data-foo','world');//$.attr 设置DOM元素属性值

    vargetAttr2 = $('#app').attr('data-foo');

    vargetData2 = $('#app').data('foo');

    console.log('getAttr2: '+ getAttr2);//world

    console.log('getData2: '+ getData2);//*** hello ***

    $('#app').data('foo','WORLD');//$.data 设置DOM node属性值

    vargetAttr3 = $('#app').attr('data-foo');

    vargetData3 = $('#app').data('foo');

    console.log('getAttr3: '+ getAttr3);//world

    console.log('getData3: '+ getData3);//*** WORLD ***

  </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中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
庫的封裝問題
來自於 1970-01-01 08:00:00
0
0
0
在封裝庫--連綴【2】中的問題
來自於 1970-01-01 08:00:00
0
0
0
Html中使用JS $(this).attr('action'); 無法獲值
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板