首页 > 编程笔记 > JavaScript笔记 > jQuery DOM操作
jQuery toggleClass()方法切换class
在 jQuery 中,我们可以使用 toggleClass() 方法为元素切换类名。toggle,其实就是“切换”的意思,之后我们会大量接触这个单词,例如 toggle()、slideToggle() 等,小伙伴要留意和对比一下。
语法:
举例:
图 1:切换 class 的效果
在这个例子中,我们使用 toggleClass() 方法来切换元素的 class,使得元素可以在“默认样式”以及“class 样式”之间来回切换。
从这一节的学习中我们知道,使用 jQuery 来操作 CSS 类名这种方式是非常有用的。当 CSS 代码比较多时,我们可以将其放到一个 class 中,这样每次只需要对类名进行操作即可。这种方式相对于 css() 方法来说,代码更加清晰,可读性和可维护性都比较高。
最后总结一下:使用 jQuery 操作元素的样式时,如果样式比较少,建议使用“属性操作”,也就是 css() 方法;如果样式比较多,建议使用“类名操作”,也就是 addClass()、removeClass()、toggleClass() 等方法。
语法:
$().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> <ul> <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() 等方法。
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算