jQuery中的class操作 jquery

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

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

没有进行属性操作之前，盒子是这样的：

文章图片

1、addClass() addClass()是向匹配的元素添加指定的类名。
这里给盒子添加bgr这个类，给第一个按钮添加点击事件，点击第一个按钮（eq(0)），改变其背景颜色，背景颜色由#666变成了红色。

var box = $('div'); $('button').eq(0).click(function(){ //给某一个元素添加类 box.addClass('bgr'); });

演示结果如下：

文章图片

2、removeClass() removeClass()是从所有匹配的元素中删除全部或者指定的类。
这里给盒子移除bgr这个类，给第二个按钮添加点击事件，点击第二个按钮（eq(1)），改变其背景颜色，背景颜色由红色再次变回初始的#666。

$('button').eq(1).click(function(){ //给某一个元素移除类 box.removeClass('bgr') });

演示结果如下：

文章图片

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的蓝色边框'); } });

演示结果如下：

文章图片

4、toggleClass() toggleClass()是从匹配的元素中添加或删除一个类。
这里我给盒子加了一个width200的类，并给第四个按钮添加点击事件，点击第四个按钮，toggleClass()首先会判断box有没有width200这个类，如果没有，就添加，如果有，则移除，这样一个属性操作十分的好用。