 方法超详细讲解：属性获取、赋值、实战踩坑全解)
前言
在我们日常 jQuery 开发中，attr() 是最常用、最核心的属性操作方法。之前做的 select下拉框回显、表格行删除弹窗、动态获取行ID 功能，底层全部依赖 attr() 实现。
很多新手分不清：attr() 到底能操作什么属性？为什么有时候取值是 undefined？为什么和 prop() 效果不一样？
这篇博客带你从零吃透 attr()，包含：完整语法、四种用法、实战案例、高频踩坑、attr与prop核心区别，看完彻底搞定前端DOM属性操作。
一、attr() 方法核心定义
attr = attribute（HTML标签属性）
作用：专门用于 获取 / 设置 / 修改 / 删除 HTML 标签上的原生属性、自定义属性。
核心特点：操作的是 HTML 结构上的属性，也就是你写在标签上看得见的属性。
适用场景：自定义属性、data-*属性、src、href、title、class、name、id 等标签固有属性。
二、attr() 四种完整语法（必记）
- 获取属性值：$(selector).attr(‘属性名’)
不传第二个参数，代表 读取属性值，返回对应属性的字符串值。
删除此行
- 单个属性赋值：$(selector).attr(‘属性名’,‘值’)
传两个参数，代表 给元素设置/覆盖属性值。
// 修改按钮自定义ID
$(‘.del-btn’).attr(‘data-id’,‘2026’);
// 修改图片地址
$(‘img’).attr(‘src’,‘./images/new.png’);
// 修改标签标题
$(‘a’).attr(‘title’,‘点击跳转详情’); - 批量设置多个属性（高效写法）
传入 对象格式，一次性修改多个属性，简化代码。
$(‘img’).attr({
src: ‘./img/banner.png’,
title: ‘首页轮播图’,
alt: ‘轮播图片’,
class: ‘banner-img’
}); - 函数动态赋值（动态渲染常用）
第二个参数传函数，可根据索引、旧值动态修改属性，适合列表批量处理。
// 给所有列表项动态设置自定义序号
$(‘li’).attr(‘data-index’,function(index,oldVal){
return index + 1; // 根据下标赋值 1、2、3…
});
三、配套方法：removeAttr() 删除属性
如果需要移除标签上的某个属性，不用手动赋值空，直接使用专属方法。
// 移除单个属性
$(‘.del-btn’).removeAttr(‘data-id’);
// 移除多个属性，空格分隔
( ′ i m g ′ ) . r e m o v e A t t r ( ′ s r c t i t l e ′ ) ; 四、项目实战：你做过的功能底层原理结合你之前写的表格删除弹窗、动态获取行 I D 场景，完美对应 a t t r ( ) 用法。实战场景：表格每行删除按钮获取当前行 I D 动态渲染表格时，给删除按钮绑定 d a t a − i d 存储当前行数据 I D ，点击时用 a t t r ( ) 获取。 / / 1. 渲染时绑定自定义属性 h t m l + = ‘ < b u t t o n c l a s s = " r e w m " d a t a − i d = " ('img').removeAttr('src title'); 四、项目实战：你做过的功能底层原理 结合你之前写的 表格删除弹窗、动态获取行ID 场景，完美对应 attr() 用法。 实战场景：表格每行删除按钮获取当前行ID 动态渲染表格时，给删除按钮绑定>(′img′).removeAttr(′srctitle′);四、项目实战：你做过的功能底层原理结合你之前写的表格删除弹窗、动态获取行ID场景，完美对应attr()用法。实战场景：表格每行删除按钮获取当前行ID动态渲染表格时，给删除按钮绑定data−id存储当前行数据ID，点击时用attr()获取。//1.渲染时绑定自定义属性html+=‘<buttonclass="rewm"data−id="{item.id}">删除`
// 2. 点击删除按钮，获取当前行ID
$(document).on(“click”, “.rewm”, function () {
// 核心：attr 获取自定义属性
let delId = $(this).attr(‘data-id’);
console.log(delId); // 当前点击行的ID
});
为什么不用 val()？
val() 只能获取表单 value 值，自定义属性只能用 attr() 获取，这是新手高频误区。
五、重中之重：attr() 和 prop() 终极区别（必踩坑）
90% 的属性bug，都是因为 attr 和 prop 用混了，一张表彻底分清：
方法
操作对象
适用场景
返回值特点
attr()
HTML标签属性（写在标签上的）
自定义属性、data-*、src、href、title
永远返回 字符串，取不到返回 undefined
prop()
DOM元素对象属性
复选框checked、单选框selected、disabled
返回 布尔值 true/false
经典错误案例（新手必错）
总结口诀：自定义属性用 attr，状态属性用 prop。
六、attr() 高频踩坑清单（避坑指南）
坑1：动态DOM获取属性为 undefined
动态渲染的按钮、列表，直接绑定事件会获取不到属性。
✅ 解决：必须使用 事件委托( d o c u m e n t ) . o n ( ) ，再用 a t t r ( ) 获取属性。坑 2 ：多次赋值不生效 a t t r ( ) 赋值会直接覆盖原有属性值，不会拼接。需要拼接需手动获取旧值再叠加。坑 3 ：混淆属性类型 a t t r 获取的所有值都是字符串，如果是数字 I D ，需要手动转数字： N u m b e r ( (document).on()，再用 attr() 获取属性。 坑2：多次赋值不生效 attr() 赋值会 直接覆盖原有属性值，不会拼接。需要拼接需手动获取旧值再叠加。 坑3：混淆属性类型 attr 获取的所有值都是 字符串，如果是数字ID，需要手动转数字：Number((document).on()，再用attr()获取属性。坑2：多次赋值不生效attr()赋值会直接覆盖原有属性值，不会拼接。需要拼接需手动获取旧值再叠加。坑3：混淆属性类型attr获取的所有值都是字符串，如果是数字ID，需要手动转数字：Number((this).attr(‘data-id’))。
坑4：操作复选框、禁用状态用attr
checked / disabled 属于DOM状态，用attr无效，必须用 prop。
七、全文总结（极简记忆）
- attr() 只管HTML标签属性：可读、可写、可批量赋值；
- 自定义属性、data-id、src、href 一律用 attr；
- 复选框、禁用、选中状态 一律用 prop；
- 动态DOM属性获取，必须配合 事件委托；
- attr 返回值全部为字符串，数字场景需手动转换类型。
