jQuery的attr与prop使用介绍

当使用 jQuery 操作 HTML 元素时，有时需要改变 HTML 元素的属性值或者属性。那么这时候就需要使用 attr 或 prop 来获取或设置元素属性的值。然而，这两个方法有时候使用有些疑惑，下面将详细讲解 jQuery 的 attr 与 prop 的使用方法。

attr 方法

获取属性值

使用 attr 方法获取元素属性值，可以使用以下语法：

$(selector).attr(attributeName);

attributeName 是需要获取的属性的名称，selector 是需要获取属性值的元素选择器。例如，我们需要获取一个 input 元素的 type 属性值，可以使用以下示例代码来获取：

<input type="text">

var typeName = $('input').attr('type');
console.log(typeName); // 输出 "text"

设置属性值

使用 attr 方法设置属性值，同样可以使用以下语法：

$(selector).attr(attributeName, value);

attributeName 是需要设置的属性的名称，value 是需要设置的属性值，selector 是需要设置属性值的元素选择器。例如，我们需要设置一个 input 元素的 placeholder 属性值，可以使用以下示例代码来设置：

<input type="text">

$('input').attr('placeholder', '请输入内容');

这样，input 元素的 placeholder 属性值就被设置为了 "请输入内容"。

prop 方法

prop 方法则用于操作 HTML 元素的属性。同样，prop 方法也有获取和设置属性值两种用法，下面将分别进行介绍。

获取属性值

使用 prop 方法获取元素属性值，可以使用以下语法：

$(selector).prop(propertyName);

propertyName 是需要获取的属性的名称，selector 是需要获取属性值的元素选择器。例如，我们需要获取一个 checkbox 元素的 checked 属性值，可以使用以下示例代码来获取：

<input type="checkbox" checked>

var isChecked = $('input').prop('checked');
console.log(isChecked); // 输出 true

设置属性值

使用 prop 方法设置属性值，同样可以使用以下语法：

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

propertyName 是需要设置的属性的名称，value 是需要设置的属性值，selector 是需要设置属性值的元素选择器。例如，我们需要设置一个 checkbox 元素的 checked 属性值，可以使用以下示例代码来设置：

<input type="checkbox">

$('input').prop('checked', true);

这样，checkbox 元素的 checked 属性值就被设置为了 true。

综上所述，如果需要获取或设置元素属性的值，可以根据具体情况选择使用 attr 或 prop 方法。