attr()的用法

attr()獲得屬性值

通過attr()獲得屬性時，可以這樣$(selector).attr(attrName)。注意，其返回值始終是string型！?
eg : 通過attr()得到的屬性age的值是”23”，屬性iswork的值是”true”。?
另外需要注意的是，attr()對傳入的attrName大小寫不敏感，就是說attr(‘name’)和attr(‘NAME’)都能得到期望的返回值。

<div class="card" id="jq-attr" name="zx" AGE="23" isWork="true"></div> $('#jq-attr').attr('age'); // "23" $('#jq-attr').attr('iswork'); // "true"

attr()添加和修改屬性

attr修改屬性支持三種方式，即可以向API傳遞三種形參：attr(attrName, value)，attr(attrName, function)，attr(obj)。?
如果第二個參數是function，那么該function會被執行，并將執行結果作為attr()的返回值。?
attr(obj)等同于多次調用attr(attrName, value)，比如attr({attr1: value1, attr2: value2})，等同于attr(attr1, value1).attr(attr1, value2);?
在JavaScript代碼，可以通過attr()動態修改屬性值和添加新屬性，如果傳入value是對象，最終會獲得↓↓↓

var $el = $('#jq-attr'); $el.attr('attr1', {name: 'chen'}); $el.attr('attr1'); // "[object Object]"$el.attr('attr2', [1, 2, 3]); $el.attr('attr2'); // "1, 2, 3"$el.attr('attr3', null); $el.attr('attr3'); // "undefined"$el.attr('attr4', undefined); $el.attr('attr4'); // "undefined"

可以看出，如果value是基本數據類型的一種，那么直接返回相應的字符串，但是null value返回的是“undefined”并非”null”。如果value是一個對象，那么對象的toString()會被調用，執行結果即attr()的返回值。

data()的用法

data()修改數據和綁定新數據

和attr()類似，可在頁面生成時綁定數據，實際是給元素添加名稱為data-*的屬性。

<div class="card" id="jq-attr" data-name="chen" data-AGE="23" isWork="true"></div>

在JavaScript里，data()修改數據可以這樣：data(key, value)和data(obj)。后者等同于data(key1, value1).data(key2, value2)。還有一種方式，如下

var data = $el.data(); data.attr = 10; 在使用data()修改數據時，如果value是undefined類型，那么數據不會保存或更新。 $el.data('school', undefined); $el.data().hasOwnProperty('school'); // true $el.data('attr ', undefined); $el.data('attr '); // 10

data()獲取數據

往data()傳入一個string稱之為key的參數即data(key)，或者data()[key]來獲得與key對應的value。但是注意一點，data()可能會返回undefined如果沒有任何數據綁定，所以data(key)的方式更為安全。和attr()值返回string類型的值不一樣，data()會對靜態綁定的數字、布爾、對象、數組和null進行轉換。看下面幾個例子。

<div class="box" id="jq-data" data-name="zx" data-AGE="23" data-isWork="true" data-func="function(){}" data-list='{"listname":"eric chen"}' data-undefinedkey="undefined" data-nullkey="null" data-last-value="100"></div> var $el = $('#jq-data'); $el.data('age'); // 23 $el.data('AGE'); // undefined $el.data('isWork'); // true $el.data('func'); // "function() {}" $el.data('list'); // obj {"listname": "eric chen"} $el.data('undefinedkey'); // "undefined" $el.data('nullkey'); // null $el.data('lastValue'); // 100 $el.data('lastvalue'); // undefined

如果在HTML里靜態綁定了數據，通過data()來獲取數據時，key必須全小寫，比如綁定data-AGE=”23”，只能通過data(‘age’)而不是data(‘AGE’)。另外注意data-last-value=”100”，只能通過data(‘lastValue’)或者data(‘last-value’)。?
在JavaScript里通過data()修改數據，再獲取值時，須嚴格按照指定的key。比如data(‘AGE’, 22)，這時data(‘age’)是23，data(‘AGE’)返回22。這時因為，在JS里第一調用data()時，會將HTML里靜態綁定的數據，復制到jQuery.cache變量里，復制時key中的字符都轉換為對應的小寫字母。再次使用data()修改數據或添加新數據時，對key不會轉換為小寫字母，也不會對存入的數據做類型轉換！?
通常，data(‘lastValue’, value)和data(‘last-value’, value)修改的是同一數據。?
但是如果不給data()傳入任何參數來獲得綁定在$el上的所有數據即一個JSON對象，然后修改這個對象的屬性值。

var dt= $el.data(); dt['last-value'] = 99; dt.lastValue = 100;$el.data('last-value'); // ? $el.data('lastValue'); // ?

你會發現el.data(′last?value′)返回99，而el.data(′last?value′)返回99，而el.data(‘lastValue’)返回100。另外一種方式與此等價：?
$el.data({‘last-value’: 99, ‘lastValue’: 100});

小結?
如果是為了存儲和傳遞頁面元素相關的數據，data()比attr()是更好的選擇。了解data()的工作方式，才能正確使用這個API。

轉載于:https://www.cnblogs.com/yuan9580/p/11343938.html

總結

以上是生活随笔為你收集整理的【转】data和attr的用法与区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。