jQuery的一个非常重要的部分是操纵DOM的可能性。
jQuery提供了有效地操作元素样式的方法。
在本章中,我们将说明如何在DOM中添加或删除CSS类。
使用jQuery,我们可以轻松地操纵元素的样式。
我们有以下用于CSS操作的jQuery方法:
下面将向您展示如何使用每种方法。
jQuery 方法将一个或多个类名称添加到所选元素。
下面的示例将类名添加到第一个<p>元素:
$("button").click(function(){ $("p:first").addClass("highlight"); });测试看看
一次可以将多个类(用空格隔开)添加到所选元素,如下所示:
$("button").click(function(){ $("p:first").addClass("highlight big"); });测试看看
jQuery 方法从所选元素中删除一个或多个类名称。
下面的示例从所有<p>元素中删除一个类名:
$("button").click(function(){ $("p").removeClass("highlight"); });测试看看
一次可以从一组选定元素中删除一个以上的类(以空格隔开),如下所示:
$("button").click(function(){ $("p").removeClass("highlight big"); });测试看看
如果在参数中未指定类名,则将删除所有类:
$("button").click(function(){ $("p").removeClass(); });测试看看
jQuery 方法在添加/删除所选元素中的一个或多个类名称之间切换。
下面的示例在为所有<p>元素添加和删除“ anotherClass”类名称之间切换:
$("button").click(function(){ $("p").toggleClass("anotherClass"); });测试看看
此方法检查每个元素的指定类名称:
如果缺少类名,则添加
如果已经设置了类名,则将其删除
jQuery 方法获取或设置所选元素的一个或多个样式属性。
jQuery 方法将在下一章中说明。
有关完整的CSS方法参考,请访问我们的jQuery HTML / CSS参考。