jquery获取元素属性

jQuery获取元素属性的方法

jQuery提供了多种方式获取元素的属性，以下是常用的几种方法：

使用attr()方法

attr()方法可以获取匹配元素的属性值。语法如下：

$(selector).attr(attributeName)

示例代码：

var href = $('a').attr('href');
var title = $('#myDiv').attr('title');

使用prop()方法

prop()方法主要用于获取元素的属性（property），特别适合处理布尔值属性。语法如下：

$(selector).prop(propertyName)

示例代码：

var checked = $('input[type="checkbox"]').prop('checked');
var disabled = $('#myButton').prop('disabled');

使用data()方法

data()方法可以获取元素上通过data-*属性存储的数据。语法如下：

$(selector).data(key)

示例代码：

var userRole = $('div').data('role');
var userId = $('#user').data('id');

使用val()方法

对于表单元素，val()方法可以获取其当前值。语法如下：

$(selector).val()

示例代码：

var username = $('#username').val();
var selectedOption = $('select').val();

获取自定义数据属性

HTML5允许自定义data-*属性，可以通过以下方式获取：

var info = $('#element').data('custom-info');
// 或者
var info = $('#element').attr('data-custom-info');

注意事项

• attr()获取的是HTML属性（attribute），而prop()获取的是DOM属性（property）
• 对于布尔值属性（如checked、disabled等），推荐使用prop()
• 修改属性值时，相应的方法可以传入第二个参数
• data()方法会自动将data-后面的属性名转换为驼峰命名法

以上方法可以根据不同场景选择使用，通常attr()适用于标准HTML属性，prop()适用于DOM对象属性，data()适用于自定义数据属性。