当前位置: 首页>>编程示例 >>用法及示例精选 >>正文

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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。