如何使用jQuery进行精确的样式调整操作？

本文共计666个文字，预计阅读时间需要3分钟。

一、添加一个class类javascript增加一个class类 / / 增加一个bbb的class类，aaa与bbb同时存在$().addClass(bbb);

二、删除一个class类javascript删除一个class类 / / 删除aaa这个class类$().removeClass(aaa);

三、修改一个class类javascript修改一个class类 / / 修改方括号内的内容$().addClass(bbb);

一、增加一个class类

//增加一个bbb的class类，aaa与bbb同时存在

$(".aaa").addClass("bbb");

二、删除一个class类

//删除aaa这个class类

$(".aaa").removeClass("aaa");

三、修改一个class类

//方法一

//先删除，后添加。或者先添加后删除均可

$(".aaa").addClass("bbb").removeClass("aaa");

$(".aaa").removeClass("aaa").addClass("bbb");

//方法二

//利用attr方法

$(".aaa").attr("class","bbb");

//这里需要注意的是，如果这个HTML标签不止有aaa这一个类时，

//这个方法之后，这个HTML标签会只有bbb这一个class类,

//当然也可以设置多个

$(".aaa").attr("class","bbb ccc ddd");

判断是否存在一个class类

//判断HTML标签中是否有bbb这个class类

$(".aaa").hasClass("bbb");

//返回值是一个boolean值，存在返回true，不存在返回false。

四、实例

//实现一个hover功能，鼠标上去为aaa，离开为bbb

$(".ccc").hover(function() {

$(this).addClass("aaa");

$(this).removeClass("bbb");

}, function() {

$(this).addClass("bbb");

$(this).removeClass("aaa");

});

定义与用法

css()方法设置或返回选定元素的一个或多个样式属性。

用于返回属性时:

此方法返回第一个匹配元素的指定 CSS 属性值。然而并不完全支持简写 CSS 属性（如 "background" 与 "border"），在不同的浏览器中可能会出现不同的结果。

用于设置属性时:

此方法为所有匹配的元素设置指定的 CSS 属性。

---

语法

返回 CSS 属性值:

1. $(selector).css(property)

设置 CSS 属性和值:

1. $(selector).css(property,value)

使用函数设置 CSS 属性和值:

1. $(selector).css(property,function(index,currentvalue))

设置多个属性和值:

1. $(selector).css({property:value, property:value, ...})

参数描述 property 指定 CSS 属性名称，如 "color", "font-weight", 等等。 value 指定 CSS 属性的值，如 "red", "bold", 等等。 function(index,currentvalue) 指定一个函数，该函数返回 CSS 属性的新值

• index- 返回元素在集合中的索引位置
• currentvalue- 返回 CSS 属性的当前值