jq类的切换事件,toggleClass()方法

它是那样的舒展,那样高雅。特别是盛夏时节,热青奔放,有粉的,白的,紫的……,互不相让,竟相开放,它们好象正在表演一场时装表演。在巨大的碧绿的荷叶上,小水珠滚来滚去,偶尔一些小青蛙跳上一片荷叶,把荷叶当做歌台。在陽光的照耀下,水珠闪闪发光,显得楚楚动人。

前端元素的动态操作中,我们可以对一个元素添加一个类,也可以删除一个类。那如果我们对指定的元素中的某个类在添加和删除之间来回切换呢?这篇文章就说一说,元素中某个类在添加和删除之间的切换效果,也就是JQ中的切换事件。

JQ中的toggleClass()方法定义与用法

toggleClass():此方法对设置或移除被选元素的一个或多个类进行切换。

注意:该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果

语法

$(selector).toggleClass(class,switch)

例:JQ改变字体的颜色

代码

<style>
    .c{
        color:red;
    }
    #mochu{
        margin: 10px 0;
    }
</style>
<div id="mochu">
    
</div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        $('#mochu').toggleClass('c');
    });
</script>

运行结果如下图,字体会在两种颜色之间进行切换:

JQ切换字体颜色    Q切换字体颜色

例:JQ显示和隐藏某个元素

还是上面的代码,我们只改成一个类C的属性

代码

<style>
    .c{
        display: none;
    }
    #mochu{
        margin: 10px 0;
    }
</style>
<div id="mochu">
    
</div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        $('#mochu').toggleClass('c');
    });
</script>

运行结果如下图:

JQ隐藏显示切换    jq类的切换事件,toggleClass()方法,JQ添加一个类,JQ删除一个类,JQ隐藏显示切换,JQ切换字体颜色

注意:请比较以上两张图中箭头所指的方向,每次点击按钮,元素中的类都在添加和删除两事件中切换。

JQ利用判断来添加和删除类

如果上面的例子,不能完全的了解toggleClass()方法,那么下面的示例可以从另一方面来实现类的添加和删除

<style>
    .c{
        display: none;
    }
    #mochu{
        margin: 10px 0;
    }
</style>
<div id="mochu">
    
</div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        // $('#mochu').toggleClass('c');
        // 以下代码和上面被注释掉的代码等价
        if($('#mochu').hasClass('c')){
            $('#mochu').removeClass('c');
        }else{
            $('#mochu').addClass('c');
        }
    });
</script>

我们可以使用hasClass方法判断是否具有类C,如果有就删除,如果没有就添加。

removeClass()
//删除一个类
addClass()
//添加一个类

以上就是jq类的切换事件,toggleClass()方法。一切幸福,都是由生命热血换来的。更多关于jq类的切换事件,toggleClass()方法请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
JQuery获取与设置元素CSS属性

JQuery is()方法与hasClass()方法的对比

jQuery选择元素的方法大全

如何利用JQuery为元素添加样式的方法

jQuery中自定义动画animate()方法如何使用与详解