資訊專欄INFORMATION COLUMN
摘要：后來了一番不知怎么搜索的又發(fā)現(xiàn)了一個和區(qū)別的一些解釋。操作對象不同在中表示文檔節(jié)點屬性，而則表示對象屬性。函數(shù)主要依賴的是對象的和兩個方法。
操作對象不同昨天在開發(fā)的時候同事幫忙寫了一小段JS代碼，取數(shù)據(jù)的時候用到了以前都沒用過的$(this).data("xxx")的這種形式，后來看了手冊才知道在HTML5中可以對元素進行自定義屬性。格式類似于data-xxx="value",然后可以用JQ中的.data()方法進行存取數(shù)據(jù)。
后來GG了一番不知怎么搜索的又發(fā)現(xiàn)了一個attr()和prop()區(qū)別的一些解釋。
在jQuery中attr表示HTML文檔節(jié)點屬性，而prop則表示JS對象屬性。
在jQuery中，prop()函數(shù)的設計目標是用于設置或獲取指定DOM元素(指的是JS對象，Element類型)上的屬性(property)；attr()函數(shù)的設計目標是用于設置或獲取指定DOM元素所對應的文檔節(jié)點上的屬性(attribute)。
當然，在jQuery的底層實現(xiàn)中，函數(shù)attr()和prop()的功能都是通過JS原生的Element對象(如上述代碼中的msg)實現(xiàn)的。attr()函數(shù)主要依賴的是Element對象的getAttribute()和setAttribute()兩個方法。prop()函數(shù)主要依賴的則是JS中原生的對象屬性獲取和設置方式。
javascript
當然，jQuery對這些操作方式進行了封裝，使我們操作起來更加方便(比如以對象形式同時設置多個屬性)，并且實現(xiàn)了跨瀏覽器兼容。
此外，雖然prop()針對的是DOM元素的property，而不是元素節(jié)點的attribute。不過DOM元素某些屬性的更改也會影響到元素節(jié)點上對應的屬性。例如，property的id對應attribute的id，property的className對應attribute的class。
應用版本不同
attr()是jQuery 1.0版本就有的函數(shù)，prop()是jQuery 1.6版本新增的函數(shù)。毫無疑問，在1.6之前，你只能使用attr()函數(shù)；1.6及以后版本，你可以根據(jù)實際需要選擇對應的函數(shù)。
設置屬性值類型不同由于attr()函數(shù)操作的是文檔節(jié)點的屬性，因此設置的屬性值只能是字符串類型，如果不是字符串類型，也會調(diào)用其toString()方法，將其轉(zhuǎn)為字符串類型。
prop()函數(shù)操作的是JS對象的屬性，因此設置的屬性值可以為包括數(shù)組和對象在內(nèi)的任意類型。
在jQuery 1.6之前，只有attr()函數(shù)可用，該函數(shù)不僅承擔了attribute的設置和獲取工作，還同時承擔了property的設置和獲取工作。例如：在jQuery 1.6之前，attr()也可以設置或獲取tagName、className、nodeName、nodeType等DOM元素的property。
直到jQuery 1.6新增prop()函數(shù)，并用來承擔property的設置或獲取工作之后，attr()才只用來負責attribute的設置和獲取工作。
★★★★★
此外，對于表單元素的checked、selected、disabled等屬性，在jQuery 1.6之前，attr()獲取這些屬性的返回值為Boolean類型：如果被選中(或禁用)就返回true，否則返回false。
★★★★★
但是從1.6開始，使用attr()獲取這些屬性的返回值為String類型，如果被選中(或禁用)就返回checked、selected或disabled，否則(即元素節(jié)點沒有該屬性)返回undefined。并且，在某些版本中，這些屬性值表示文檔加載時的初始狀態(tài)值，即使之后更改了這些元素的選中(或禁用)狀態(tài)，對應的屬性值也不會發(fā)生改變。因為jQuery認為：attribute的checked、selected、disabled就是表示該屬性初始狀態(tài)的值，property的checked、selected、disabled才表示該屬性實時狀態(tài)的值(值為true或false)。
因此，在jQuery 1.6及以后版本中，請使用prop()函數(shù)來設置或獲取checked、selected、disabled等屬性。對于其它能夠用prop()實現(xiàn)的操作，也盡量使用prop()函數(shù)。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85643.html
摘要：需求很簡單的，一個非常簡單的復選框的使用。與的區(qū)別復選框設置設置自定義自定義設置類型設置類型支持類型在這里溫馨提示提示一下，當我們設置這個屬性時，再用獲取的時候，控制提示。 問題引入 昨天接到了一個活，里面有一個小需求，在寫的過程中遇到了一個小問題。雖然這個問題并不是很復雜的東西，但卻是一個比較細節(jié)的問題。相信不少新手前端會遇到。下面我先描述一下我這個遇到的這個需求。 showImg(...
摘要：先提出問題對于這類值是的屬性，用的或方法進行讀取或設置值是有區(qū)別的。因此，如果你想知道文本框的當前值，則讀取。的值并不會隨著的狀態(tài)而作出相應改變，而會。為對象設置值的安全做法避免內(nèi)存泄漏是使用。參考翻譯地址的與的區(qū)別 先提出問題：對于 checked 這類值是 true/false 的屬性，用 jQuery 的 attr 或 prop 方法進行 讀取或設置值是有區(qū)別的。 在看 jQue...
摘要：今天研究前端的給固有屬性加值是出現(xiàn)錯誤，搜索了下，找到了原因，就是中和的區(qū)別。下面和大家分享下在高版本的引入方法后，什么時候該用什么時候用它們兩個之間有什么區(qū)別這些問題就出現(xiàn)了。關于它們兩個的區(qū)別，網(wǎng)上的答案很多。 今天研究前端jquery的attr給固有屬性加值是出現(xiàn)錯誤，搜索了下，找到了原因，就是：jquery中attr和prop的區(qū)別。下面和大家分享下： 在高版本的jquery引...
摘要：在中新加了一個方法，查看文檔可以看到一句話獲取在匹配的元素集中的第一個元素的屬性值。這種情況適用于多選項全選和反選的情況。 在jquery1.6中新加了一個方法prop()，查看jquery文檔可以看到一句話:獲取在匹配的元素集中的第一個元素的屬性值。 大家都知道有的瀏覽器只要寫disabled，checked就可以了，而有的要寫成disabled = disabled，checked...
閱讀 973·2023-04-26 02:49
閱讀 1185·2021-11-25 09:43
閱讀 2554·2021-11-18 10:02
閱讀 2930·2021-10-18 13:32
閱讀 1291·2019-08-30 13:54
閱讀 2088·2019-08-30 12:58
閱讀 3020·2019-08-29 14:06
閱讀 2162·2019-08-28 18:10
