jQuery中的class操作

电玩女神 2022-06-08 04:08 181阅读 0赞

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

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

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

没有进行属性操作之前，盒子是这样的：  
![这里写图片描述][SouthEast]

#### 1、addClass() ####

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

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

演示结果如下：  
![这里写图片描述][SouthEast 1]

#### 2、removeClass() ####

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

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

演示结果如下：  
![这里写图片描述][SouthEast 2]

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

演示结果如下：  
![这里写图片描述][SouthEast 3]

#### 4、toggleClass() ####

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

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

演示结果如下：  
一开始是没有width200这个类的，点击第四个按钮，结果是这样的：  
![这里写图片描述][SouthEast 4]  
再次点击该按钮，则会移除这个width200这个类，又恢复成初始宽度100px的状态，如下图：![这里写图片描述][SouthEast 5]

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

[SouthEast]: /images/20220608/e5dcc522f52b4edb9d1ea55e88c75399.png
[SouthEast 1]: /images/20220608/2f1a7d2c15094572a7ac74f1cc585240.png
[SouthEast 2]: /images/20220608/e6d46ee57292441eaf0ee6db40f4bd60.png
[SouthEast 3]: /images/20220608/86ad0424d35b4b63be97fe339d3e408d.png
[SouthEast 4]: /images/20220608/d2755452d6b24fb2ac76f03ee0db5358.png
[SouthEast 5]: /images/20220608/67fe870a12084df396993d5f29ca81bd.png