本文详解 jQuery 中正确读取自定义属性（如 data-option-label）并更新元素文本的方法，重点纠正 this.attr() 的常见误用，强调 $(this) 的必要性及 data() 方法的规范实践。
本文详解 jquery 中正确读取自定义属性（如 `data-option-label`）并更新元素文本的方法，重点纠正 `this.attr()` 的常见误用，强调 `$(this)` 的必要性及 `data()` 方法的规范实践。
在 jQuery 开发中，常需根据 HTML 元素的自定义属性动态更新其显示文本。但初学者易犯一个典型错误：直接对原生 DOM 元素（this）调用 jQuery 方法（如 .attr()），导致 attr is not a function 运行时错误。根本原因在于 this 指向的是原生 JavaScript 对象，而非 jQuery 包装对象——必须通过 $(this) 显式封装后，才能调用 jQuery 方法。
✅ 正确做法是：
- 使用 $(this) 获取 jQuery 对象；
- 优先采用标准的 data-* 属性（如 data-option-label）替代非标准属性（如 option-label）；
- 调用 .data() 方法读取数据（jQuery 自动处理驼峰转换与类型解析，比 .attr() 更健壮）。
以下是完整可运行的示例代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-size">
<div class="size">
<div class="text" data-option-label="NONE"></div>
<div class="text" data-option-label="44">NONE</div>
<div class="text" data-option-label="46">44</div>
<div class="text" data-option-label="48">46</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.custom-size .size .text').each(function() {
// ✅ 正确：$(this) 将原生元素转为 jQuery 对象
// ✅ 推荐：使用 .data() 读取 data-* 属性（自动转换 key 名，如 data-option-label → optionLabel）
var optionLabel = $(this).data('option-label');
$(this).text(optionLabel);
});
});
</script>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- ❌ 避免使用 $('document') —— 应为 $(document)（字符串 'document' 会被当作选择器，查找 <document> 标签，无效）；
- ❌ 禁止直接调用 this.attr() 或 this.data()，this 是原生 Element，无这些方法；
- ✅ 若必须读取非 data-* 属性（如自定义 option-label），请用 .attr('option-label')，但需确保属性名完全匹配且不推荐；
- ✅ .data() 会缓存首次读取值并智能转换类型（如 "123" → 123，"true" → true），若需原始字符串，请用 .attr('data-option-label')；
- ? 语义化最佳实践：所有自定义数据应使用 data-* 命名，符合 HTML5 规范，保障可访问性与未来兼容性。
总结：jQuery 操作的核心前提是明确上下文对象类型——DOM 元素需包裹为 $() 才能调用链式方法；而数据存储应严格遵循 data-* 标准，配合 .data() 方法实现安全、高效、语义化的动态内容控制。
