jquery 追加属性

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，追加属性通常是指给 HTML 元素添加新的属性。

基础概念

在 HTML 中，属性是用来定义元素的特性，比如 id、class、href 等。使用 jQuery 追加属性，就是动态地给元素添加这些特性。

类型

追加属性可以是任何有效的 HTML 属性，例如：

基本属性：id, class, title
事件属性：onclick, onmouseover
自定义属性：data-*

应用场景

动态内容生成：在用户交互后，根据需要动态给元素添加属性。
表单验证：在表单提交前，给表单元素添加错误提示属性。
数据绑定：将后端数据动态绑定到前端元素上。

示例代码

假设我们有一个按钮，当用户点击这个按钮时，我们想给一个 <div> 元素添加一个 data-info 属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Add Attribute Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="addAttrBtn">Add Attribute</button>
<div id="targetDiv">This is a div element.</div>

<script>
$(document).ready(function() {
    $('#addAttrBtn').click(function() {
        // 给 #targetDiv 元素添加 data-info 属性
        $('#targetDiv').attr('data-info', 'Some additional information');
    });
});
</script>

</body>
</html>