jquery获取属性值

jQuery获取属性值的方法

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

使用.attr()方法

.attr()方法用于获取匹配元素集合中第一个元素的属性值。语法如下：

var value = $('selector').attr('attributeName');

示例：

var href = $('a').attr('href'); // 获取第一个<a>标签的href属性

使用.prop()方法

.prop()方法用于获取匹配元素集合中第一个元素的属性值（通常用于布尔属性如checked、disabled等）。语法如下：

var value = $('selector').prop('propertyName');

示例：

var isChecked = $('#checkbox').prop('checked'); // 获取复选框的选中状态

使用.data()方法

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

var value = $('selector').data('key');

示例：

var user = $('#user').data('id'); // 获取<div data-id="123">中的值

使用.val()方法

.val()方法用于获取表单元素（如input、select、textarea）的值。语法如下：

var value = $('selector').val();

示例：

var username = $('#username').val(); // 获取输入框的值

注意事项

• .attr()和.prop()的区别：.attr()操作的是HTML属性，而.prop()操作的是DOM属性。对于布尔属性（如checked、disabled），建议使用.prop()。
• 如果元素不存在或属性未设置，.attr()和.prop()会返回undefined。
• .data()方法会自动将data-属性转换为驼峰命名（如data-user-id变为userId）。