3、使用 jQuery 高效操纵 DOM

使用 jQuery 高效操纵 DOM

1. 引言

在现代 Web 开发中，JavaScript 库 jQuery 成为了前端开发人员的得力助手。它不仅简化了 DOM 操作，还提供了丰富的动画效果和事件处理机制。本文将详细介绍如何使用 jQuery 操纵 DOM，帮助开发者提高网页性能，优化用户体验。

2. 使用 css() 方法改变 CSS 样式

jQuery 的 css() 方法非常强大，允许开发者轻松修改元素的样式。通过传递一个属性名和值，可以直接设置元素的样式属性。例如：

$("div").css("width", "200px");

如果需要同时设置多个属性，可以传递一个对象：

$("div").css({
    "width": "200px",
    "height": "200px",
    "background-color": "red"
});

需要注意的是， css() 方法返回的结果是基于第一个匹配的元素，因此如果操作多个元素，建议使用其他方法获取所有元素的样式值。此外， css() 方法不支持简写属性，如 margin 或 padding 。