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

v1 發布于2019-08-21 11:35 / 678人閱讀

摘要：中和的區別和本質上屬于屬性和對象屬性的區別。結合上面代碼和解釋，大家應該能夠理解兩者的區別。同時從性能的角度來說，建議使用來進行和操作，因為它僅僅修改的對象的屬性值，不會引起額外的操作。

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

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

Jquery對象屬性和DOM屬性

一個簡單的例子

Jquery中.attr和.data的區別

$.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()應避免混合用，也就是應該盡量避免如下兩種情況的出現：

通過$.attr()來進行set屬性，然后通過$.data()進行get屬性值；

通過$.data()來進行set屬性，然后通過$.attr()進行get屬性值。

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

云服務器 GPU云服務器 javascript和jquery的區別 jquery和javascript的區別 jquery_ajax_data 中SP與DP的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86894.html

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

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

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

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認為是可見的，因為他們仍然占用空間布局。 jQuery對象轉化成DOM對象 ? ? jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery...

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

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認為是可見的，因為他們仍然占用空間布局。 jQuery對象轉化成DOM對象 ? ? jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery...

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

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

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

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

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