jQuery 改变多个属性值
在使用 jQuery 时，我们经常需要改变元素的属性值，比如改变元素的宽度、高度、颜色等等。而有时候我们需要同时改变多个属性值，这就需要用到 jQuery 的多属性操作方法了。本文将介绍如何使用 jQuery 改变多个属性值，并提供代码示例。
使用 .css() 方法改变属性值
.css() 方法是 jQuery 提供的改变元素属性值的方法之一。它可以同时改变多个属性的值，使用起来非常方便。
语法
$(selector).css(property1, value1, property2, value2, ...);
selector是要改变属性值的元素的选择器。property1, value1, property2, value2, ...是要改变的属性名和对应的属性值，可以同时改变多个属性。
示例
假设我们有一个按钮，希望点击按钮时同时改变按钮的背景色和字体颜色。
首先，我们需要给按钮添加一个 ID，方便通过选择器进行操作。HTML 代码如下：
<button id="myButton">Click Me</button>
然后，我们在 JavaScript 中使用 .css() 方法来改变按钮的属性值。代码如下：
$("#myButton").click(function() {
$(this).css("background-color", "red", "color", "white");
});
这样，当按钮被点击时，背景色会变为红色，字体颜色会变为白色。
使用 .attr() 方法改变属性值
除了使用 .css() 方法，我们还可以使用 .attr() 方法来改变元素的属性值。
语法
$(selector).attr(property1, value1).attr(property2, value2).attr(...);
selector是要改变属性值的元素的选择器。.attr(property, value)是用来改变一个属性的值的方法，可以多次连续调用。
示例
假设我们有一个图片，希望点击图片时同时改变图片的宽度和高度。
首先，我们需要给图片添加一个 ID，方便通过选择器进行操作。HTML 代码如下：
<img id="myImage" src="image.jpg" alt="My Image">
然后，我们在 JavaScript 中使用 .attr() 方法来改变图片的属性值。代码如下：
$("#myImage").click(function() {
$(this).attr("width", "500").attr("height", "300");
});
这样，当图片被点击时，宽度会变为 500 像素，高度会变为 300 像素。
使用对象字面量改变多个属性值
除了上述的方法，我们还可以使用对象字面量来改变多个属性值。
示例
假设我们有一个 div 元素，希望同时改变它的宽度、高度和背景色。
首先，我们需要给 div 元素添加一个 ID，方便通过选择器进行操作。HTML 代码如下：
<div id="myDiv">Some content</div>
然后，在 JavaScript 中使用对象字面量来改变 div 元素的属性值。代码如下：
$("#myDiv").click(function() {
$(this).css({
"width": "200px",
"height": "100px",
"background-color": "blue"
});
});
这样，当 div 元素被点击时，宽度会变为 200 像素，高度会变为 100 像素，背景色会变为蓝色。
总结
本文介绍了使用 jQuery 改变多个属性值的方法。我们可以使用 .css() 方法、.attr() 方法或对象字面量来同时改变多个属性的值。无论是改变按钮的背景色和字体颜色，还是改变图片的宽度和高度，都可以使用这些方法来实现。希望本文对你理解和使用 jQuery 改变多个属性值有所帮助。
引用：[jQuery API Documentation](
