摘要:先提出問題對于這類值是的屬性,用的或方法進行讀取或設置值是有區別的。因此,如果你想知道文本框的當前值,則讀取。的值并不會隨著的狀態而作出相應改變,而會。為對象設置值的安全做法避免內存泄漏是使用。參考翻譯地址的與的區別
先提出問題:對于 checked 這類值是 true/false 的屬性,用 jQuery 的 attr 或 prop 方法進行 讀取或設置值是有區別的。
在看 jQuery 文檔前,我們先看看 attribute 與 property 是什么:
先搞懂 attribute 與 property當編寫 HTML 源碼時,你能在 HTML 元素里定義 attributes。然后,一旦瀏覽器解析你的代碼,該 HTML 元素相應的 DOM 節點就會被創建。該節點是一個對象,因此它就擁有 properties。
因此,我們知道:attributes 是 HTML 元素(標簽)的屬性,而 properties 是 DOM 對象的屬性。
例如,下面這個 HTML 元素:
擁有兩個 attributes。
一旦瀏覽器解析該代碼,HTMLInputElement 對象就會被創建,并且該對象會擁有很多 peoperties,如:accept、accessKey、align、alt、attributes、autofocus、baseURI、checked、childElementCount、ChildNodes、children、classList、className、clientHeight 等等。
對于某個 DOM 節點對象,properties 是該對象的所有屬性,而 attributes 是該對象對應元素(標簽)的屬性。
當一個 DOM 節點為某個 HTML 元素所創建時,其大多數 properties 與對應 attributes 擁有相同或相近的名字,但這并不是一對一的關系。例如,下面這個 HTML 元素:
其對應 DOM 節點會擁有如下properties: id、type 和 value:
id property是 id attribute 的映射:獲取該 property 即等于讀取其對應的 attribute 值,而設置該 property 即為 attribute 賦值。id 是一個純粹的映射 property,它不會修改或限制其值。
type property 是 type attribute 的映射:獲取該 property 即等于讀取其對應的 attribute 值,而設置該 property 即為 attribute 賦值。但 type 并不是一個純粹的映射 property,因為它的值被限制在已知值(即 input 的合法類型,如:text、password)。如果你有 ,然后 theInput.getAttribute("type") 會返回 "foo",而 theInput.type 會返回 "text"。
相比之下,value property 并不會映射 value attribute。取而代之的是 input 的當前值。當用戶手動更改輸入框的值,value property 會反映該改變。所以,如果用戶在 input 輸入 John,然后:
theInput.value // 返回 "John"
然而:
theInput.getAttribute("value") // 返回 "Name:"
value property 反映了 input 的當前文本內容,而 value attribute 則是在 HTML 源碼 value 屬性所指定的初始文本內容。
因此,如果你想知道文本框的當前值,則讀取 property。而如果你想知道文本框的初始值,則讀取 attribute。或者你也可以利用 defaultValue property,它是 value attribute 的純粹映射。
theInput.value // returns "John" theInput.getAttribute("value") // returns "Name:" theInput.defaultValue // returns "Name:"
有幾個 properties 是直接反映它們 attribute(rel、id),而有一些則用稍微不同的名字進行直接映射(htmlFor 映射 for attribute,className 映射 class attribute)。很多 property 所映射的 attribute 是帶有限制/變動的(src、href、disabled、multiple)。該 規范 涵蓋了各種各樣的映射。
再看看 attr() 與 prop() 的區別上述能讓我們理清了 attribute 與 property 之間的區別,下面根據 jQuery 文檔 對 attr() 與 prop() 方法進行比較:
自 jQuery 1.6 版本起,attr() 方法對于未設置的 attributes (即標簽中沒寫該 attributes)都會返回 undefined。對于檢索和改變 DOM 的 properties,如表單元素的 checked、selected 或 disabled 狀態,應使用 .prop() 方法。
Attributes vs. Properties
attributes 與 properties 之間的差異在特定情況下會變得尤為重要。在 jQuery 1.6 前,.attr() 方法在檢索一些 attributes 時,有時會把 property 考慮進去,這會導致不一致的行為。在 jQuery 1.6 版本之后,.prop() 方法提供了一種明確檢索 property 值的方式,而 .attr 只會檢索 attributes。
例如,selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 和 defaultSelected 能被 .prop() 檢索與設置。在 jQuery 1.6 之前,這些 properties 都是通過 .attr() 檢索的,但檢索這些屬性并不應屬于 attr 方法職責內 。這些屬性并沒有對應的 attributes,只有 properties 本身。
對于值為布爾值的 attributes ,考慮到一個 DOM 元素是通過 HTML 標簽 讀取屬性
根據 W3C forms(表單) 規范,checked 是一個值為 boolean 的 attribute,這意味著當該 attribute 存在(無論值是什么),其對應的 property 都是 true。例如,該 attribute 沒賦值或設為空字符串,甚至設為 "false"。這同樣適用于所有值為 boolean 的 attributes。
然而,對于 checked attribute 最重要的概念是記住它并不是對應 checked property。該 attribute 實際上是對應 defaultChecked property,并僅在初次設置 checkbox 值時使用。checked attribute 的值并不會隨著 checkbox 的狀態而作出相應改變,而 checked property 會。因此,為了兼容不同瀏覽器,當判斷一個 checkbox 是否被選擇時應該使用 property:
if (elem.checked) if ($(elem).prop("checked")) if ($(elem).is(":checked"))
這同樣適用于其它動態 attributes,如 selected 和 value。
其他說明:
在 IE9 之前的版本,如果使用 .prop() 為 DOM 元素的 property 設置的值不是一個簡單的原始值(number、string 或 boolean),且該 property 在 DOM 元素從 document 移除前未被移除(使用 .removeProp()),則會導致內存泄漏。為 DOM 對象設置值的安全做法(避免內存泄漏)是使用 .data()。
參考(翻譯):
jQuery API Documentation:http://api.jquery.com/prop/
Properties and Attributrs in HTML:http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
Github 地址: jQuery 的 attr 與 prop 的區別
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78826.html
摘要:需求很簡單的,一個非常簡單的復選框的使用。與的區別復選框設置設置自定義自定義設置類型設置類型支持類型在這里溫馨提示提示一下,當我們設置這個屬性時,再用獲取的時候,控制提示。 問題引入 昨天接到了一個活,里面有一個小需求,在寫的過程中遇到了一個小問題。雖然這個問題并不是很復雜的東西,但卻是一個比較細節的問題。相信不少新手前端會遇到。下面我先描述一下我這個遇到的這個需求。 showImg(...
摘要:后來了一番不知怎么搜索的又發現了一個和區別的一些解釋。操作對象不同在中表示文檔節點屬性,而則表示對象屬性。函數主要依賴的是對象的和兩個方法。 昨天在開發的時候同事幫忙寫了一小段JS代碼,取數據的時候用到了以前都沒用過的$(this).data(xxx)的這種形式,后來看了手冊才知道在HTML5中可以對元素進行自定義屬性。格式類似于data-xxx=value,然后可以用JQ中的....
摘要:今天研究前端的給固有屬性加值是出現錯誤,搜索了下,找到了原因,就是中和的區別。下面和大家分享下在高版本的引入方法后,什么時候該用什么時候用它們兩個之間有什么區別這些問題就出現了。關于它們兩個的區別,網上的答案很多。 今天研究前端jquery的attr給固有屬性加值是出現錯誤,搜索了下,找到了原因,就是:jquery中attr和prop的區別。下面和大家分享下: 在高版本的jquery引...
摘要:在中新加了一個方法,查看文檔可以看到一句話獲取在匹配的元素集中的第一個元素的屬性值。這種情況適用于多選項全選和反選的情況。 在jquery1.6中新加了一個方法prop(),查看jquery文檔可以看到一句話:獲取在匹配的元素集中的第一個元素的屬性值。 大家都知道有的瀏覽器只要寫disabled,checked就可以了,而有的要寫成disabled = disabled,checked...
閱讀 2637·2023-04-26 02:17
閱讀 1610·2021-11-24 09:39
閱讀 1070·2021-11-18 13:13
閱讀 2598·2021-09-02 15:11
閱讀 2770·2019-08-30 15:48
閱讀 3406·2019-08-30 14:00
閱讀 2431·2019-08-29 13:43
閱讀 658·2019-08-29 13:07