jQuery中的class操作

在jQuery中,对于元素的属性操作相对于JavaScript来说代码要简单很多,这次主要介绍几个常用的jQuery中的属性操作。
首先先写一个简单的盒子出来用作案例演示:
这个是html的部分,构造了一个盒子和几个用于点击事件的按钮:


在css部分设置了几个类用于演示属性操作:

没有进行属性操作之前,盒子是这样的:
jQuery中的class操作
文章图片

1、addClass() addClass()是向匹配的元素添加指定的类名。
这里给盒子添加bgr这个类,给第一个按钮添加点击事件,点击第一个按钮(eq(0)),改变其背景颜色,背景颜色由#666变成了红色。
var box = $('div'); $('button').eq(0).click(function(){ //给某一个元素添加类 box.addClass('bgr'); });

演示结果如下:
jQuery中的class操作
文章图片

2、removeClass() removeClass()是从所有匹配的元素中删除全部或者指定的类。
这里给盒子移除bgr这个类,给第二个按钮添加点击事件,点击第二个按钮(eq(1)),改变其背景颜色,背景颜色由红色再次变回初始的#666。
$('button').eq(1).click(function(){ //给某一个元素移除类 box.removeClass('bgr') });

演示结果如下:
jQuery中的class操作
文章图片

3、hasClass() hasClass()是检查匹配的元素是否拥有指定的类。
这里我给盒子加了一个border1的类,给第三个按钮添加点击事件,点击第三个按钮(eq(2)),首先判断这个box有没有border1这个类,如果有,则在控制台输出“有1px的蓝色边框”,没有就输出“没有1px的蓝色边框”。
$('button').eq(2).click(function(){ //判断某个元素中是否带有某一个类 var has1pxBorder = box.hasClass('border1'); if(has1pxBorder){ console.log('有1px的蓝色边框'); }else{ console.log('没有1px的蓝色边框'); } });

演示结果如下:
jQuery中的class操作
文章图片

4、toggleClass() toggleClass()是从匹配的元素中添加或删除一个类。
这里我给盒子加了一个width200的类,并给第四个按钮添加点击事件,点击第四个按钮,toggleClass()首先会判断box有没有width200这个类,如果没有,就添加,如果有,则移除,这样一个属性操作十分的好用。
$('button').eq(3).click(function(){ //类的切换 判断有没有这个类 //如果没有这个类,则添加,如果有,则移除 box.toggleClass('width200'); });

演示结果如下:
一开始是没有width200这个类的,点击第四个按钮,结果是这样的:
jQuery中的class操作
文章图片

再次点击该按钮,则会移除这个width200这个类,又恢复成初始宽度100px的状态,如下图:jQuery中的class操作
文章图片

【jQuery中的class操作】以上,就是关于jQuery中class属性操作的全部内容。

    推荐阅读