jQuery attr() 方法超详细讲解：属性获取、赋值、实战踩坑全解

前言在我们日常 jQuery 开发中attr() 是最常用、最核心的属性操作方法。之前做的 select下拉框回显、表格行删除弹窗、动态获取行ID 功能底层全部依赖 attr() 实现。很多新手分不清attr() 到底能操作什么属性为什么有时候取值是 undefined为什么和 prop() 效果不一样这篇博客带你从零吃透 attr()包含完整语法、四种用法、实战案例、高频踩坑、attr与prop核心区别看完彻底搞定前端DOM属性操作。一、attr() 方法核心定义attr attributeHTML标签属性作用专门用于 获取 / 设置 / 修改 / 删除 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‘buttonclassrewmdata−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永远返回 字符串取不到返回 undefinedprop()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操作复选框、禁用状态用attrchecked / disabled 属于DOM状态用attr无效必须用 prop。七、全文总结极简记忆attr() 只管HTML标签属性可读、可写、可批量赋值自定义属性、data-id、src、href 一律用 attr复选框、禁用、选中状态 一律用 prop动态DOM属性获取必须配合 事件委托attr 返回值全部为字符串数字场景需手动转换类型。