Jquery中.attr()和.data()的區(qū)別

v1 發(fā)布于2019-08-21 11:35 / 685人閱讀

摘要：中和的區(qū)別和本質(zhì)上屬于屬性和對象屬性的區(qū)別。結(jié)合上面代碼和解釋，大家應(yīng)該能夠理解兩者的區(qū)別。同時從性能的角度來說，建議使用來進(jìn)行和操作，因?yàn)樗鼉H僅修改的對象的屬性值，不會引起額外的操作。

Jquery中.attr()和.data()的區(qū)別

$.attr()和$.data()本質(zhì)上屬于DOM屬性和Jquery對象屬性的區(qū)別。

Jquery對象屬性和DOM屬性

一個簡單的例子

Jquery中.attr和.data的區(qū)別

$.attr()每次都從DOM元素中取屬性的值，即和視圖中標(biāo)簽內(nèi)的屬性值保持一致。

$.attr("data-foo")會從標(biāo)簽內(nèi)獲得data-foo屬性值；

$.attr("data-foo", "world")會將字符串"world"塞到標(biāo)簽的"data-foo"屬性中；

$.data()是從Jquery對象中取值，由于對象屬性值保存在內(nèi)存中，因此可能和視圖里的屬性值不一致的情況。

$.data("foo")會從Jquery對象內(nèi)獲得foo的屬性值，不是從標(biāo)簽內(nèi)獲得data-foo屬性值；

$.data("foo", "world")會將字符串"world"塞到Jquery對象的"foo"屬性中，而不是塞到視圖標(biāo)簽的data-foo屬性中。

結(jié)合上面代碼和解釋，大家應(yīng)該能夠理解兩者的區(qū)別。

小結(jié)

所以$.attr()和$.data()應(yīng)避免混合用，也就是應(yīng)該盡量避免如下兩種情況的出現(xiàn)：

通過$.attr()來進(jìn)行set屬性，然后通過$.data()進(jìn)行g(shù)et屬性值；

通過$.data()來進(jìn)行set屬性，然后通過$.attr()進(jìn)行g(shù)et屬性值。

同時從性能的角度來說，建議使用$.data()來進(jìn)行set和get操作，因?yàn)樗鼉H僅修改的Jquey對象的屬性值，不會引起額外的DOM操作。

云服務(wù)器 GPU云服務(wù)器 javascript和jquery的區(qū)別 jquery和javascript的區(qū)別 jquery_ajax_data 中SP與DP的區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86894.html

相關(guān)文章

jQuery中attr()和prop()方法的一些區(qū)別理解

摘要：后來了一番不知怎么搜索的又發(fā)現(xiàn)了一個和區(qū)別的一些解釋。操作對象不同在中表示文檔節(jié)點(diǎn)屬性，而則表示對象屬性。函數(shù)主要依賴的是對象的和兩個方法。昨天在開發(fā)的時候同事幫忙寫了一小段JS代碼，取數(shù)據(jù)的時候用到了以前都沒用過的$(this).data(xxx)的這種形式，后來看了手冊才知道在HTML5中可以對元素進(jìn)行自定義屬性。格式類似于data-xxx=value,然后可以用JQ中的....

iKcamp 2019-08-21 10:30 評論0 收藏0
JQuery基礎(chǔ)修煉-樣式篇

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認(rèn)為是可見的，因?yàn)樗麄內(nèi)匀徽加每臻g布局。 jQuery對象轉(zhuǎn)化成DOM對象 ? ? jQuery庫本質(zhì)上還是JavaScript代碼，它只是對JavaScript語言進(jìn)行包裝處理，為了是提供更好更方便快捷的DOM處理與開發(fā)常見中經(jīng)常使用的功能。我們可以用jQuery...

_Dreams 2019-08-02 15:55 評論0 收藏0
JQuery基礎(chǔ)修煉-樣式篇

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素?？梢娫氐膶挾然蚋叨?，是大于零。元素的或被認(rèn)為是可見的，因?yàn)樗麄內(nèi)匀徽加每臻g布局。 jQuery對象轉(zhuǎn)化成DOM對象 ? ? jQuery庫本質(zhì)上還是JavaScript代碼，它只是對JavaScript語言進(jìn)行包裝處理，為了是提供更好更方便快捷的DOM處理與開發(fā)常見中經(jīng)常使用的功能。我們可以用jQuery...

luck 2019-08-19 18:24 評論0 收藏0
jQuery 屬性與樣式

摘要：與中用方法來獲取和設(shè)置元素屬性是屬性的縮寫，在操作中會經(jīng)常用到有個表達(dá)式傳入屬性名獲取屬性的值屬性名屬性值設(shè)置屬性的值屬性名函數(shù)值設(shè)置屬性的函數(shù)值給指定元素設(shè)置多個屬性值，即屬性名一屬性值一屬性名二屬性值二刪除方法為匹配的元素集合中的每個元 .attr()與.removeAttr() jQuery中用attr()方法來獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫，在j...

yibinnn 2019-08-21 11:52 評論0 收藏0
jQuery基礎(chǔ)(一) ：樣式篇

摘要：如下就是對象或是如下以下兩者的修改都是等價的但是使用不能很好的操作，所以可以將其轉(zhuǎn)換成對象把元素轉(zhuǎn)化成的對象總體，表示當(dāng)前的上下文對象是一個對象，可以調(diào)用對象所擁有的屬性和方法。代表的上下文對象是一個的上下文對象，可以調(diào)用的方法和屬性值。一：初識 jquery： 1、 jQuery 只是一個庫，不需要特別的安裝，只需要我們在頁面標(biāo)簽內(nèi)中通過 script 標(biāo)簽?zāi)_本引入 jQuer...

SegmentFault 2019-08-20 10:35 評論0 收藏0