jQuery如何修改DOM元素的属性值及样式属性大全介绍教程

频道：互联网 日期： 浏览：2

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画效果和 Ajax 交互等操作。在 jQuery 中，修改 DOM 元素的属性值和样式属性是非常常见的操作，下面将详细介绍相关方法。

修改 DOM 元素的属性值

attr() 方法

attr() 方法用于获取或设置元素的属性值。当传递一个参数时，它用于获取属性值；当传递两个参数时，它用于设置属性值。

// 设置属性值
$('img').attr('src', 'new-image.jpg');

// 获取属性值
var src = $('img').attr('src');

removeAttr() 方法

removeAttr() 方法用于移除元素的属性。

$('a').removeAttr('target');

prop() 方法

prop() 方法用于获取或设置元素的属性。与 attr() 方法不同的是，prop() 方法主要用于处理元素的固有属性，如 checked、selected 等。

jQuery如何修改DOM元素的属性值及样式属性大全介绍教程

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

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

removeProp() 方法

removeProp() 方法用于移除元素的属性。需要注意的是，它不能移除 HTML 属性，只能移除通过 prop() 方法设置的属性。

$('input[type="checkbox"]').removeProp('checked');

val() 方法

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

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

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

修改 DOM 元素的样式属性

css() 方法

css() 方法用于获取或设置元素的 CSS 样式属性。当传递一个参数时，它用于获取样式属性值；当传递两个参数时，它用于设置样式属性值。

jQuery如何修改DOM元素的属性值及样式属性大全介绍教程

// 设置单个样式属性
$('p').css('color', 'red');

// 设置多个样式属性
$('p').css({
    'font-size': '16px',
    'line-height': '1.5'
});

// 获取样式属性值
var color = $('p').css('color');

addClass() 方法

addClass() 方法用于为元素添加一个或多个 CSS 类。

$('div').addClass('highlight');

removeClass() 方法

removeClass() 方法用于移除元素的一个或多个 CSS 类。

$('div').removeClass('highlight');

toggleClass() 方法

toggleClass() 方法用于切换元素的 CSS 类。如果元素已经有该类，则移除它；如果元素没有该类，则添加它。

jQuery如何修改DOM元素的属性值及样式属性大全介绍教程

$('div').toggleClass('highlight');

hasClass() 方法

hasClass() 方法用于检查元素是否包含指定的 CSS 类。如果包含，则返回 true；否则返回 false。

var hasHighlight = $('div').hasClass('highlight');

通过上述方法，你可以方便地修改 DOM 元素的属性值和样式属性，实现各种交互效果。