jQuery.prop() 使用详解

介绍

jQuery.prop() 方法用于设置或返回元素的属性值，是使用 jQuery 操作 DOM 元素的一种常用方法。

和 jQuery.attr() 方法不同的是，jQuery.prop() 只对 property 属性进行读写操作，不涉及 HTML attribute 属性，这也是两个方法的主要区别。

语法

$(selector).prop(propertyName)
$(selector).prop(propertyName, value)
$(selector).prop(properties)

• propertyName: 必须。要获取或设置属性值的 property 属性名称。
• value: 可选。要设置的属性值。
• properties: 必须。一个 JavaScript 对象，包含一个或多个 key/value 对，对应属性名称和属性值。

返回值

• 如果只有一个属性名作为参数，则返回该属性的值。如果没有取得值，则返回 undefined。
• 如果给定属性名和要设置的值作为参数，则设置属性值。
• 如果给定一个键值对的对象作为参数，则所有属性被设置。

示例

示例一

下面的代码演示了如何使用 jQuery.prop() 设置和获取 checkbox 的 checked 属性：

<input type="checkbox" id="myCheckbox">

<script>
$(function() {
  // 设置选中状态
  $('#myCheckbox').prop('checked', true);

  // 获取选中状态
  var isChecked = $('#myCheckbox').prop('checked');
  console.log('isChecked: ' + isChecked); //isChecked: true
});
</script>

示例二

下面的代码演示了如何使用 jQuery.prop() 批量设置多个属性：

<img id="myImg">

<script>
$(function() {
  $('#myImg').prop({
    src: 'http://example.com/image.jpg',
    alt: 'Example Image'
  });
});
</script>

总结

jQuery.prop() 是一种常用的操作 DOM 元素的方法，可以用于设置或返回元素的属性值（不包括 HTML attribute 属性）。它在 checkbox 等控件的操作中特别有用，并且可以用来批量设置多个属性。