jquery属性

jQuery 属性操作

jQuery 提供了多种方法来操作 HTML 元素的属性。以下是常见的属性操作方法：

获取和设置属性 使用 attr() 方法可以获取或设置元素的属性值。获取属性时传入属性名，设置属性时传入属性名和值。

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

// 设置属性
$('a').attr('target', '_blank');

移除属性 使用 removeAttr() 方法可以移除元素的指定属性。

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

*获取和设置自定义属性（data-）* 对于 HTML5 的 `data-属性，可以使用data()` 方法。

// 获取 data- 属性
var user = $('#user').data('id');

// 设置 data- 属性
$('#user').data('id', 123);

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

// 获取属性值
var isChecked = $('input').prop('checked');

// 设置属性值
$('input').prop('disabled', true);

获取和设置表单值 val() 方法用于获取或设置表单元素的值。

// 获取值
var text = $('input[type="text"]').val();

// 设置值
$('input[type="text"]').val('New Value');

获取和设置 HTML 内容 html() 方法用于获取或设置元素的 HTML 内容。

// 获取 HTML
var content = $('#container').html();

// 设置 HTML
$('#container').html('<p>New content</p>');

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

// 获取文本
var text = $('#container').text();

// 设置文本
$('#container').text('New text content');

获取和设置 CSS 类 addClass()、removeClass() 和 toggleClass() 方法用于操作元素的 CSS 类。

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

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

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

检查 CSS 类 hasClass() 方法用于检查元素是否包含指定的 CSS 类。

if ($('div').hasClass('highlight')) {
    // 执行操作
}

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

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

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

获取和设置元素尺寸 width()、height()、innerWidth()、innerHeight()、outerWidth() 和 outerHeight() 方法用于获取或设置元素的尺寸。

// 获取宽度
var width = $('div').width();

// 设置宽度
$('div').width(500);

获取和设置元素位置 offset() 和 position() 方法用于获取元素的位置信息。

// 获取相对于文档的偏移
var offset = $('div').offset();

// 获取相对于父元素的偏移
var position = $('div').position();

遍历属性 使用 each() 方法可以遍历元素的属性。

$('img').each(function() {
    var alt = $(this).attr('alt');
    console.log(alt);
});

这些方法提供了灵活的方式来操作 HTML 元素的属性和内容，使得动态更新页面变得更加简单高效。