jQuery 如何设置属性 attribute

在前端开发中，jQuery 是一个强大的 JavaScript 库，它简化了 HTML 文档遍历、事件处理和操作等任务。设置元素的属性（attribute）是常见的操作之一，下面就来详细探讨 jQuery 如何设置属性。

使用 jQuery 设置属性非常便捷。最基本的方法是使用 attr() 方法。假设我们有一个 HTML 元素 <img id="myImage" src="">，现在要为其设置 src 属性，代码可以这样写：

$(document).ready(function() {
    $('#myImage').attr('src', 'example.jpg');
});

这里，$(document).ready() 确保在文档完全加载后才执行代码。$('#myImage') 选择了 ID 为 myImage 的元素，然后通过 attr() 方法为其设置 src 属性为 example.jpg。

attr() 方法还可以接受一个对象作为参数，这在需要同时设置多个属性时非常实用。例如：

$(document).ready(function() {
    $('#myDiv').attr({
        'title': '这是一个示例 div',
        'data-value': '123'
    });
});

上述代码为 ID 为 myDiv 的元素同时设置了 title 和 data-value 两个属性。

对于布尔属性，如 checked、disabled 等，设置方式略有不同。以复选框为例，若要将其设置为选中状态：

$(document).ready(function() {
    $('input[type="checkbox"]').attr('checked', true);
});

如果要移除属性，可以使用 removeAttr() 方法。比如移除上述 myDiv 的 title 属性：

$(document).ready(function() {
    $('#myDiv').removeAttr('title');
});

另外，从 jQuery 1.6 版本开始，对于一些属性的设置推荐使用 prop() 方法，特别是对于布尔属性。例如：

$(document).ready(function() {
    $('input[type="checkbox"]').prop('checked', true);
});

prop() 方法在处理 DOM 属性时更为准确，尤其是在处理一些浏览器差异时表现更好。

掌握 jQuery 设置属性的方法，能让开发者更加高效地操作 HTML 元素，为用户提供更丰富的交互体验。无论是简单的属性设置，还是复杂的多属性操作，都能通过 jQuery 轻松实现。