jQuery中的class操作

来源：互联网发布：sql引擎编辑：程序博客网时间：2024/06/05 08:57

在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>

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

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这个类，如果没有，就添加，如果有，则移除，这样一个属性操作十分的好用。

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

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

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

阅读全文

0 0