用法一
.prop( propertyName ) => Anything
.prop( propertyName ) => Anything
說明:獲取匹配元素集中第一個元素的屬性值。
.prop()
方法僅獲取匹配集中first
元素的屬性值。對於尚未設置的屬性的值,或者如果匹配的集合沒有元素,它會返回 undefined
。要單獨獲取每個元素的值,請使用循環構造,例如 jQuery 的 .each()
或 .map()
方法。
注意:試圖改變type
屬性(或屬性)input
通過 HTML 創建或已經在 HTML 文檔中的元素將導致 Internet Explorer 6、7 或 8 引發錯誤。
屬性與屬性
attributes
和properties
之間的區別在特定情況下可能很重要。 Before jQuery 1.6 ,.attr()
方法有時會在檢索某些屬性時考慮屬性值,這可能會導致行為不一致。 As of jQuery 1.6 ,.prop()
方法提供了一種顯式檢索屬性值的方法,而 .attr()
檢索屬性。
例如,selectedIndex
、tagName
、nodeName
、nodeType
、ownerDocument
、defaultChecked
和defaultSelected
應該使用.prop()
方法檢索和設置。在 jQuery 1.6 之前,可以使用 .attr()
方法檢索這些屬性,但這不在 attr
的範圍內。這些沒有對應的屬性,隻是屬性。
關於布爾屬性,考慮由 HTML 標記 <input type="checkbox" checked="checked" />
定義的 DOM 元素,並假設它位於名為 elem
的 JavaScript 變量中:
elem.checked
|
true (布爾值)將隨複選框狀態而變化 |
$( elem ).prop( "checked" )
|
true (布爾值)將隨複選框狀態而變化 |
elem.getAttribute( "checked" )
|
"checked" (String) 複選框的初始狀態;不變 |
$( elem ).attr( "checked" )
(1.6+)
|
"checked" (String) 複選框的初始狀態;不變 |
$( elem ).attr( "checked" )
(pre-1.6)
|
true (布爾值)隨複選框狀態更改 |
根據W3C 表格規範, 這checked
屬性是一個boolean attribute
,這意味著相應的屬性是真的如果該屬性完全存在 - 例如,即使該屬性沒有值或設置為空字符串值,甚至是 "false"。所有布爾屬性都是如此。
然而,關於checked
屬性要記住的最重要的概念是它不對應於checked
屬性。該屬性實際上對應於defaultChecked
屬性,應該隻用於設置複選框的initial
值。 checked
屬性值不會隨複選框的狀態而變化,而 checked
屬性會。因此,cross-browser-compatible 確定是否選中複選框的方法是使用屬性:
-
if ( elem.checked )
-
if ( $( elem ).prop( "checked" ) )
-
if ( $( elem ).is( ":checked" ) )
其他動態屬性也是如此,例如 selected
和 value
。
其他注意事項:
- 在版本 9 之前的 Internet Explorer 中,使用
.prop()
將 DOM 元素屬性設置為簡單原始值(數字、字符串或布爾值)以外的任何值,如果不刪除該屬性(使用.removeProp()
.data()
例子:
在複選框更改時顯示選中的屬性和屬性。
|
演示:
用法二
.prop( propertyName, value ) => jQuery
.prop( propertyName, value ) => jQuery
說明:為一組匹配的元素設置一個或多個屬性。
-
添加的版本:1.6
.prop( propertyName, value )
-
添加的版本:1.6
.prop( properties )
-
properties類型:PlainObject要設置的property-value 對的對象。
-
-
添加的版本:1.6
.prop( propertyName, function )
-
propertyName類型:String要設置的屬性的名稱。
-
function返回要設置的值的函數。接收集合中元素的索引位置和舊屬性值作為參數。在函數中,關鍵字
this
指的是當前元素。
-
.prop()
方法是設置屬性值的便捷方式,尤其是在設置多個屬性、使用函數返回的值或同時設置多個元素的值時。它應該在設置 selectedIndex
、 tagName
、 nodeName
、 nodeType
、 ownerDocument
、 defaultChecked
或 defaultSelected
時使用。從 jQuery 1.6 開始,這些屬性不能再使用 .attr()
方法設置。它們沒有對應的屬性,隻是屬性。
屬性通常會影響 DOM 元素的動態狀態,而不會更改序列化的 HTML 屬性。示例包括輸入元素的value
屬性、輸入和按鈕的disabled
屬性或複選框的checked
屬性。應該使用.prop()
方法來設置禁用和檢查,而不是使用.attr()
方法。 .val()
方法應該用於獲取和設置值。
|
重要的: .removeProp()
方法不應用於刪除本機屬性。這將導致意外行為。看.removeProp()
了解更多信息。
計算的屬性值
通過使用函數設置屬性,您可以根據元素的其他屬性計算值。例如,要根據它們各自的值切換所有複選框:
|
注意:如果在 setter 函數中沒有返回任何內容(即。function( index, prop ){})
, 或者如果undefined
返回時,當前值不變。這對於僅在滿足某些條件時有選擇地設置值很有用。
其他注意事項:
- 在版本 9 之前的 Internet Explorer 中,使用
.prop()
將 DOM 元素屬性設置為簡單原始值(數字、字符串或布爾值)以外的任何值,如果不刪除該屬性(使用.removeProp()
.data()
例子:
禁用頁麵上的所有複選框。
|
演示:
相關用法
- JQuery .promise()用法及代碼示例
- JQuery .prev()用法及代碼示例
- JQuery .prependTo()用法及代碼示例
- JQuery .prepend()用法及代碼示例
- JQuery .prevAll()用法及代碼示例
- JQuery .prevUntil()用法及代碼示例
- JQuery .parent()用法及代碼示例
- JQuery .position()用法及代碼示例
- JQuery UI .position()用法及代碼示例
- JQuery .parents()用法及代碼示例
- JQuery .pushStack()用法及代碼示例
- JQuery .parentsUntil()用法及代碼示例
- JQuery .jquery用法及代碼示例
- JQuery .scroll()用法及代碼示例
- JQuery .add()用法及代碼示例
- JQuery .contextmenu()用法及代碼示例
- JQuery .undelegate()用法及代碼示例
- JQuery .load()用法及代碼示例
- JQuery .contents()用法及代碼示例
- JQuery .empty()用法及代碼示例
- JQuery UI .labels()用法及代碼示例
- JQuery UI .addClass()用法及代碼示例
- JQuery .click()用法及代碼示例
- JQuery UI .toggleClass()用法及代碼示例
- JQuery .removeAttr()用法及代碼示例
注:本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .prop()。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。