jQuery toggleClass()方法切换class

在 jQuery 中，我们可以使用 toggleClass() 方法为元素切换类名。toggle，其实就是 切换 的意思，之后我们会大量接触这个单词，例如 toggle()、slideToggle() 等，小伙伴要留意和对比一下。

语法：

$().toggleClass( 类名 )

toggleClass() 方法用于检查元素是否有某个 class。如果 class 不存在，则为元素添加该 class；如果 class 已经存在，则为元素删除该 class。

举例：

 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 style type= text/css 

 .select

 color:red;

 background-color:silver;

 font-weight:bold;

 /style 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function () {

 $( #btn ).click(function(){

 $( li:nth-child(odd) ).toggleClass( select 

 /script 

 /head 

 body 

 li HTML /li 

 li CSS /li 

 li JavaScript /li 

 li jQuery /li 

 li Vue.js /li 

 /ul 

 input id= btn type= button value= 切换 / 

 /body 

 /html 

预览效果如图 1 所示。

图 1：切换 class 的效果

在这个例子中，我们使用 toggleClass() 方法来切换元素的 class，使得元素可以在 默认样式 以及 class 样式 之间来回切换。

从这一节的学习中我们知道，使用 jQuery 来操作 CSS 类名这种方式是非常有用的。当 CSS 代码比较多时，我们可以将其放到一个 class 中，这样每次只需要对类名进行操作即可。这种方式相对于 css() 方法来说，代码更加清晰，可读性和可维护性都比较高。

最后总结一下：使用 jQuery 操作元素的样式时，如果样式比较少，建议使用 属性操作 ，也就是 css() 方法；如果样式比较多，建议使用 类名操作 ，也就是 addClass()、removeClass()、toggleClass() 等方法。

23811.html

CSShtmljavaJavaScript