當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

JQuery .prop()用法及代碼示例

獲取匹配元素集中第一個元素的屬性值，或為每個匹配元素設置一個或多個屬性。

用法一

.prop( propertyName ) => Anything

說明：獲取匹配元素集中第一個元素的屬性值。

  • 添加的版本：1.6.prop( propertyName )

    • propertyName
      類型：String
      要獲取的屬性的名稱。

.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() )可能會導致內存泄漏在從文檔中刪除 DOM 元素之前。要安全地在 DOM 對象上設置值而不發生內存泄漏，請使用 .data() 。

例子：

在複選框更改時顯示選中的屬性和屬性。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
 
</body>
</html>

演示：

用法二

.prop( propertyName, value ) => jQuery

說明：為一組匹配的元素設置一個或多個屬性。

  • 添加的版本：1.6.prop( propertyName, value )

    • propertyName
      類型：String
      要設置的屬性的名稱。
    • value
      類型：Anything
      為屬性設置的值。

  • 添加的版本：1.6.prop( properties )

    • properties
      類型：PlainObject
      要設置的property-value 對的對象。

  • 添加的版本：1.6.prop( propertyName, function )

    • propertyName
      類型：String
      要設置的屬性的名稱。
    • function
      類型：Function(Integer 索引，Anything oldPropertyValue)=> Anything
      返回要設置的值的函數。接收集合中元素的索引位置和舊屬性值作為參數。在函數中，關鍵字this 指的是當前元素。

.prop() 方法是設置屬性值的便捷方式，尤其是在設置多個屬性、使用函數返回的值或同時設置多個元素的值時。它應該在設置 selectedIndex 、 tagName 、 nodeName 、 nodeType 、 ownerDocument 、 defaultChecked 或 defaultSelected 時使用。從 jQuery 1.6 開始，這些屬性不能再使用 .attr() 方法設置。它們沒有對應的屬性，隻是屬性。

屬性通常會影響 DOM 元素的動態狀態，而不會更改序列化的 HTML 屬性。示例包括輸入元素的value 屬性、輸入和按鈕的disabled 屬性或複選框的checked 屬性。應該使用.prop() 方法來設置禁用和檢查，而不是使用.attr() 方法。 .val() 方法應該用於獲取和設置值。

$( "input" ).prop( "disabled", false );
$( "input" ).prop( "checked", true );
$( "input" ).val( "someValue" );

重要的： .removeProp()方法不應用於刪除本機屬性。這將導致意外行為。看.removeProp()了解更多信息。

計算的屬性值

通過使用函數設置屬性，您可以根據元素的其他屬性計算值。例如，要根據它們各自的值切換所有複選框：

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
  return !val;
});

注意：如果在 setter 函數中沒有返回任何內容(即。function( index, prop ){})， 或者如果undefined返回時，當前值不變。這對於僅在滿足某些條件時有選擇地設置值很有用。

其他注意事項：

  • 在版本 9 之前的 Internet Explorer 中，使用 .prop() 將 DOM 元素屬性設置為簡單原始值(數字、字符串或布爾值)以外的任何值，如果不刪除該屬性(使用 .removeProp() )可能會導致內存泄漏在從文檔中刪除 DOM 元素之前。要安全地在 DOM 對象上設置值而不發生內存泄漏，請使用 .data() 。

例子：

禁用頁麵上的所有複選框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
  img {
    padding: 10px;
  }
  div {
    color: red;
    font-size: 24px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
  <input type="checkbox" checked="checked">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox" checked="checked">
 
<script>
$( "input[type='checkbox']" ).prop({
  disabled: true
});
</script>
 
</body>
</html>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .prop()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。