如何用jQuery设置元素的背景色

设置元素的背景色是网页设计中常见的需求之一，jQuery是一个流行的JavaScript库，可以帮助我们实现快捷、灵活的网页交互效果，下面是使用jQuery设置元素背景色的攻略：

1. 使用css()方法

使用css()方法可以直接修改元素的CSS属性值，进而实现调整背景色的目的。可以使用如下方式来设置元素的背景颜色：

$(document).ready(function(){
  $("button").click(function(){
    $("body").css("background-color", "yellow");
  });
});

上述代码的意思是：在文档加载完成后，当用户点击页面中的按钮时，将body元素的背景颜色改为黄色。这里通过css()方法的第一个参数指定了要修改的CSS属性名称，第二个参数指定了新的属性值。

2. 使用addClass()方法

addClass()方法可以在元素上添加CSS类，从而间接修改元素的CSS属性值。例如，我们可以定义一个拥有背景颜色的CSS类，然后将其添加到元素上，来实现修改元素背景色的效果：

$(document).ready(function(){
  $("button").click(function(){
    $("body").addClass("yellow-background");
  });
});

上述代码的意思是：在文档加载完成后，当用户点击页面中的按钮时，将body元素添加一个名为"yellow-background"的CSS类。然后我们就可以在样式表中定义这个CSS类，并将其设置为黄色。

.yellow-background{
  background-color: yellow;
}

这种方式的好处在于可以使用定义好的CSS类，而不需要在JavaScript代码中直接修改CSS属性值。

总结：

以上就是使用jQuery设置元素背景色的两种方法，分别通过直接调整CSS属性值和添加CSS类的方式实现，开发者可以根据实际需求选择适合自己的方法。