(attr() 的工作模型与原生 DOM 的差异)
属性与属性操作的基本差异
在前端开发中，jQuery 的 attr() 是对元素 HTML 属性进行读写的工具，但它被设计为在 jQuery 对象上工作，而非直接作用于单个原生 DOM 元素的原生 API。因此，直接在原生 DOM 元素上调用 attr() 会导致方法未定义的错误，因为原生节点并没有实现这个方法。要在原生元素上操作，必须通过原生接口如 setAttribute/getAttribute 或属性对象来完成。
// 原生 DOM: 没有 attr() 方法
var el = document.getElementById('example');
el.setAttribute('data-x', '1');
相反，使用 jQuery 封装后再调用 attr()，等价于对该 jQuery 对象中包含的所有元素逐个应用属性操作。也就是说，jQuery 提供了一个跨浏览器的封装层，用于简化对属性的读写，并隐藏了直接与 DOM 属性打交道的细节。
// 使用 jQuery 封装后调用 attr()
$('#example').attr('data-x', '1');
为什么 attr() 与原生 DOM 的行为不总是一致
HTML 属性(attr) 与 DOM 属性(property) 在语义上并不完全等同，尤其是对于布尔属性如 checked、selected、disabled 等，属性表示初始标记，而属性的当前状态由 DOM 属性决定。因此，attr() 可能返回初始值而不是当前状态，这导致在真实交互中读取到的结果与用户操作后的实际状态不一致。要获取“当前状态”需要使用 DOM 属性接口或 jQuery 的 prop()。
// 读取初始属性 vs 当前状态的对比
var cb = document.getElementById('cb');
console.log(cb.getAttribute('checked')); // 可能返回 'checked'，表示初始标记
console.log(cb.checked); // true/false，表示当前状态
因此，核心原因在于：attr() 是针对属性的读写，而不是对 DOM 属性的直接动作，并且在布尔属性等场景中需要额外的区分，这也是为何不能简单地把 attr() 直接用于原生 DOM 元素的原因。
// 封装层面的分离示例
// 原生 DOM 打开/关闭一个复选框（当前状态）
cb.checked = true;// jQuery 使用 attr() 写入布尔属性（初始标记）
$('#cb').attr('checked', 'checked');
(attr() 的直接替代方案与正确用法
替代方案的总体思路
为了解决 attr() 与原生 DOM 的不直接兼容问题，优先使用 prop() 访问和修改 DOM 属性，使用 val() 处理表单控件的值，以及在需要与 HTML 属性打交道时使用 getAttribute/setAttribute。这三个方向覆盖了大多数实际场景，保证了行为的一致性和可预测性。
// 使用 prop() 读取当前属性值
var chk = $('#cb').prop('checked'); // true/false// 使用 val() 获取/设置表单控件的当前值
var input = $('#txt');
var current = input.val();
input.val('新值');
具体操作示例：布尔属性、数值属性和值属性的区别
对布尔属性，推荐使用 prop() 来读取和设置当前状态，对属性本身进行操作时再使用 attr()。对具有实际值的属性（如 value、data-*），可以通过 val()、getAttribute/setAttribute 或 prop() 来选择性地操作。
// 布尔属性：当前状态 vs 初始标记
$('#cb').prop('checked', true); // 设置当前状态
console.log($('#cb').prop('checked')); // true
console.log($('#cb').attr('checked')); // 可能返回 'checked' 或 undefined，取决于初始标记// value 属性：当前控件值 vs 初始值
$('#txt').val('默认值'); // 设置当前值
console.log($('#txt').val()); // 获取当前值// data-* 属性：优先通过 attr()
$('#elem').attr('data-role', 'admin');
console.log($('#elem').attr('data-role')); // 'admin'
在原生 DOM 与 jQuery 混用时的正确调用方式
当你在同一个页面或组件中同时操作原生 DOM 与 jQuery 时，应该避免直接把 attr() 当作原生 API 使用。对原生 DOM 元素的读写应始终通过原生接口（getAttribute/setAttribute、element.property）完成，而对 jQuery 封装的集合，继续通过 attr()、prop()、val() 等方法进行操作。
// 原生 DOM 示例
var el = document.getElementById('example');
el.setAttribute('data-mode', 'dark');
console.log(el.getAttribute('data-mode'));// jQuery 示例
$('#example').attr('data-mode', 'dark');
为什么要区分 attr()、prop() 与原生 DOM API 的原因
语义化差异与一致性
属性(Attribute)通常指标记在 HTML 标记中的静态信息，而属性(Property)则代表当前 DOM 的状态。attr() 操作的往往是属性语义，与浏览器对初始标记的渲染相关；prop() 操作的是属性对应的 DOM 状态，与浏览器的渲染和用户交互后的实际状态一致。因此，混用会导致行为不可预测，尤其在表单控件和自定义控件的交互中尤为明显。
// 读取初始 attribute 与当前 property 的对比
el.getAttribute('value'); // 初始字符串值
el.value; // 当前值，用户修改后的实际值
因此，替代方案的核心是将 attr() 与 prop() 的职责分离，以避免在布尔属性和动态状态上的混淆。对于非布尔属性，attr() 仍然有用；对于布尔属性或需要反映当前状态的场景，prop() 更加准确。
// 结合使用的实际范例
var checkbox = $('#cb');
checkbox.prop('checked', checkbox[0].hasAttribute('checked')); // 将初始属性映射到当前状态
替代方案在现代浏览器中的兼容性与实践
在现代开发实践中，prop() 是对 DOM 属性的推荐访问方式，val() 更适合表单值的读写，而 getAttribute/setAttribute 仍然是操作 HTML 属性的底层 API，尤其是自定义数据属性和非布尔属性。通过明确区分这三者，可以获得更稳定的跨浏览器行为与更易维护的代码。
// 兼容性友好的实践
var el = document.querySelector('#el');
el.setAttribute('data-user', 'alice');
var user = el.getAttribute('data-user'); // 属性值// jQuery 侧的等价用法
$('#el').attr('data-user', 'alice');
var user2 = $('#el').attr('data-user');
