怎么使用jquery attr

# 怎么使用jQuery attr() jQuery的`.attr()`方法是操作HTML元素属性的核心函数之一。它既能获取属性值，也能设置属性值，是DOM操作中不可或缺的工具。本文将详细介绍其用法、常见场景和注意事项。 ## 目录 1. [基本语法](#基本语法) 2. [获取属性值](#获取属性值) 3. [设置单个属性](#设置单个属性) 4. [设置多个属性](#设置多个属性) 5. [特殊属性处理](#特殊属性处理) 6. [与prop()的区别](#与prop的区别) 7. [实际应用示例](#实际应用示例) 8. [注意事项](#注意事项) --- ## 基本语法 ```javascript // 获取属性 $(selector).attr(attributeName) // 设置单个属性 $(selector).attr(attributeName, value) // 设置多个属性 $(selector).attr({ attribute1: value1, attribute2: value2 }) 

获取属性值

通过传递属性名作为参数获取值：

// 获取img的src属性 const imgSrc = $('img#logo').attr('src'); // 获取链接的target属性 const linkTarget = $('a.external').attr('target'); 

注意：如果元素不存在或属性未设置，返回undefined。

设置单个属性

// 设置图片src $('img.thumbnail').attr('src', 'new-image.jpg'); // 设置disabled属性 $('button.submit').attr('disabled', 'disabled'); 

设置多个属性

使用对象形式批量设置：

$('input.text-field').attr({ 'placeholder': '请输入内容', 'maxlength': 50, 'data-validate': 'required' }); 

特殊属性处理

布尔属性

像checked、disabled这类属性建议使用.prop()：

// 推荐方式 $('#checkbox').prop('checked', true); // 也能用attr（但不推荐） $('#checkbox').attr('checked', 'checked'); 

自定义data属性

HTML5建议使用.data()方法：

// 获取data-*属性 const user = $('#profile').data('user-id'); // 等效于： const user = $('#profile').attr('data-user-id'); 

与prop的区别

方法	作用对象	适用场景
.attr()	HTML属性	href, title, alt等
.prop()	DOM属性	checked, selected, disabled

示例对比：

// 返回原始HTML值 $('input').attr('value'); // 返回当前DOM值（会随用户输入变化） $('input').prop('value'); 

实际应用示例

图片懒加载

$('img.lazy').each(function() { const realSrc = $(this).attr('data-src'); $(this).attr('src', realSrc); }); 

表单验证提示

$('form').submit(function() { if (!$('#email').val()) { $('#email').attr('title', '邮箱不能为空'); return false; } }); 

动态修改链接

$('a.locale').click(function() { const lang = $(this).attr('data-lang'); $('html').attr('lang', lang); }); 

注意事项

1. 性能考虑：频繁操作DOM会影响性能，建议批量修改

2. 属性名大小写：HTML属性不区分大小写，但建议保持一致性

3. SVG元素：部分SVG属性需要使用attr()而非prop()

4. 移除属性：使用.removeAttr()方法

   $('div.tooltip').removeAttr('title'); 

5. 回调函数：支持动态计算属性值

   $('img').attr('src', function(i, oldSrc) { return oldSrc + '?timestamp=' + Date.now(); }); 

通过灵活运用.attr()方法，可以高效地完成各种DOM属性操作需求。建议结合具体场景选择最合适的方法。 “`

注：本文实际约850字（含代码示例），主要涵盖jQuery attr()的核心用法和实用技巧。