它是那样的舒展，那样高雅。特别是盛夏时节，热青奔放，有粉的，白的，紫的……，互不相让，竟相开放，它们好象正在表演一场时装表演。在巨大的碧绿的荷叶上，小水珠滚来滚去，偶尔一些小青蛙跳上一片荷叶，把荷叶当做歌台。在陽光的照耀下，水珠闪闪发光，显得楚楚动人。
前端元素的动态操作中，我们可以对一个元素添加一个类，也可以删除一个类。那如果我们对指定的元素中的某个类在添加和删除之间来回切换呢？这篇文章就说一说，元素中某个类在添加和删除之间的切换效果，也就是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显示和隐藏某个元素
还是上面的代码，我们只改成一个类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利用判断来添加和删除类
如果上面的例子，不能完全的了解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其它相关文章！
