jQuery 添加属性 - Javascript

jQuery 是一个快速、简洁的 JavaScript 库，使得 HTML 文档的遍历和操作、事件处理、动画和 Ajax 简单化。在 jQuery 中添加属性是一个非常常见的操作，可以使用 .attr() 方法或 .prop() 方法来实现。

.attr() 方法

.attr() 方法设置或返回被选元素的属性和值。它接受两个参数，第一个参数是要设置/返回的属性名，第二个参数是要设置的值（可选）。如果未传递第二个参数，则该方法返回指定属性的值。

设置属性

// 设置 title 属性
$('a').attr('title', 'This is a link');

// 设置多个属性
$('a').attr({
  'title': 'This is a link',
  'href': 'https://example.com'
});

返回属性

// 获取 title 属性
var title = $('a').attr('title');

// 获取多个属性
var attributes = $('a').attr(['title', 'href']);

.prop() 方法

.prop() 方法设置或返回被选元素的属性和值。与 .attr() 方法不同的是，.prop() 方法设置/返回的是 DOM 元素的属性，而不是 HTML 属性。它接受两个参数，第一个参数是要设置/返回的属性名，第二个参数是要设置的值（可选）。如果未传递第二个参数，则该方法返回指定属性的值。

设置属性

// 设置 checked 属性
$('input[type="checkbox"]').prop('checked', true);

// 设置多个属性
$('input[name="user"]').prop({
  'disabled': true,
  'value': 'example'
});

返回属性

// 获取 checked 属性
var checked = $('input[type="checkbox"]').prop('checked');

// 获取多个属性
var attributes = $('input[name="user"]').prop(['disabled', 'value']);

结论

在jQuery中，添加属性是一个很简单的操作，可以通过 .attr() 和 .prop() 方法来实现。其中，.attr() 方法可以用来设置或返回 HTML 属性，.prop() 可以用来设置或返回 DOM 属性。这两个方法都可以设置/返回单个或多个属性。