jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作,在jQuery中,我们可以使用.addClass()
、.removeClass()
和.toggleClass()
方法来修改元素的class。
1、.addClass()
方法:为指定的元素添加一个或多个class,如果元素已经具有这些class,则不会重复添加。
语法:
$(selector).addClass(className);
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery addClass示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .highlight { background-color: yellow; } </style> </head> <body> <div class="box">原始盒子</div> <button id="btn">添加高亮</button> <script> $(document).ready(function(){ $("#btn").click(function(){ $(".box").addClass("highlight"); }); }); </script> </body> </html>
在这个示例中,当点击id为"btn"的按钮时,会为class为"box"的元素添加一个名为"highlight"的class,使其背景变为黄色。
2、.removeClass()
方法:从指定的元素中删除一个或多个class,如果元素没有这些class,则不会执行任何操作。
语法:
$(selector).removeClass(className);
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery removeClass示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .highlight { background-color: yellow; } </style> </head> <body> <div class="box highlight">带有高亮效果的盒子</div> <button id="btn">移除高亮</button> <script> $(document).ready(function(){ $("#btn").click(function(){ $(".box").removeClass("highlight"); }); }); </script> </body> </html>
在这个示例中,当点击id为"btn"的按钮时,会为class为"box"的元素删除一个名为"highlight"的class,使其背景恢复原状。
3、.toggleClass()
方法:在指定的元素上切换一个或多个class,如果元素已经具有这些class,则删除它们;如果没有,则添加它们。
语法:
$(selector).toggleClass(className);
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery toggleClass示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .highlight { background-color: yellow; } </style> </head> <body> <div class="box">原始盒子</div> <button id="btn">切换高亮</button> <script> $(document).ready(function(){ $("#btn").click(function(){ $(".box").toggleClass("highlight"); }); }); </script> </body> </html>
在这个示例中,当点击id为"btn"的按钮时,会为class为"box"的元素切换一个名为"highlight"的class,使其背景在黄色和原始颜色之间切换。