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

<body>
    <button>添加一个红色背景</button>
    <button>移除红色背景</button>
    <button>判断有没有1px的蓝色边框<-/button>
    <button>宽度切换</button>
    <div class="box border1"></div>
</body>

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

<style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: #666;
        }
        .bgr{
            background-color: red; 
        }
        .border1{
            border: 1px solid blue;
        }
        .border5{
            border: 5px solid green;
        }
        .width200{
            width: 200px;
        }
    </style>

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

class的值 jquery jquery操作class属性_class

1、addClass()

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

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

演示结果如下：

class的值 jquery jquery操作class属性_class的值 jquery_02

2、removeClass()

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

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

演示结果如下：

class的值 jquery jquery操作class属性_属性操作_03

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

演示结果如下：

class的值 jquery jquery操作class属性_class的值 jquery_04

4、toggleClass()

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

$('button').eq(3).click(function(){
        //类的切换 判断有没有这个类
        //如果没有这个类，则添加，如果有，则移除
        box.toggleClass('width200');
    });

演示结果如下：

一开始是没有width200这个类的，点击第四个按钮，结果是这样的：

class的值 jquery jquery操作class属性_class的值 jquery_05


再次点击该按钮，则会移除这个width200这个类，又恢复成初始宽度100px的状态，如下图：

class的值 jquery jquery操作class属性_jquery_06

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