当前位置：首页 > jquery

jquery的属性

2026-03-17 15:09:14jquery

jQuery 属性操作

jQuery 提供了多种方法来操作 HTML 元素的属性，包括获取、设置、删除属性等。以下是一些常用的属性操作方法：

attr() 方法

attr() 方法用于获取或设置元素的属性值。获取属性值时，只需传入属性名；设置属性值时，需传入属性名和属性值。

// 获取属性值
var href = $('a').attr('href');

// 设置属性值
$('a').attr('href', 'https://example.com');

removeAttr() 方法

removeAttr() 方法用于删除元素的指定属性。

$('img').removeAttr('alt');

prop() 方法

prop() 方法用于获取或设置元素的属性值，通常用于布尔属性（如 checked、disabled 等）。

jquery的属性

// 获取属性值
var isChecked = $('input[type="checkbox"]').prop('checked');

// 设置属性值
$('input[type="checkbox"]').prop('disabled', true);

val() 方法

val() 方法用于获取或设置表单元素的值（如 input、select、textarea）。

// 获取值
var inputValue = $('input').val();

// 设置值
$('input').val('New Value');

data() 方法

data() 方法用于获取或设置元素的自定义数据属性（data-*）。

jquery的属性

// 获取数据属性
var userRole = $('div').data('role');

// 设置数据属性
$('div').data('role', 'admin');

html() 和 text() 方法

html() 方法用于获取或设置元素的 HTML 内容，text() 方法用于获取或设置元素的纯文本内容。

// 获取 HTML 内容
var htmlContent = $('div').html();

// 设置 HTML 内容
$('div').html('<p>New HTML content</p>');

// 获取纯文本内容
var textContent = $('div').text();

// 设置纯文本内容
$('div').text('New text content');

addClass()、removeClass() 和 toggleClass() 方法

这些方法用于操作元素的 class 属性。

// 添加类
$('div').addClass('highlight');

// 删除类
$('div').removeClass('highlight');

// 切换类
$('div').toggleClass('highlight');

css() 方法

css() 方法用于获取或设置元素的 CSS 样式。

// 获取样式
var color = $('div').css('color');

// 设置样式
$('div').css('color', 'red');

注意事项

attr() 和 prop() 的区别：attr() 操作的是 HTML 属性，prop() 操作的是 DOM 属性。对于布尔属性（如 checked、disabled），推荐使用 prop()。
data() 方法操作的是 jQuery 内部的数据存储，不会修改 HTML 的 data-* 属性。如果需要修改 HTML 属性，应使用 attr()。
val() 方法仅适用于表单元素，其他元素应使用 text() 或 html()。