jQuery添加class的操作
Posted luwn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery添加class的操作相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>class操作</title> <style> li.basic { background-color: pink; font-size: 32px; color: red; } .bigger { font-size: 40px; } </style> </head> <body> <input type="button" value="添加basic类" > <input type="button" value="添加bigger类"> <input type="button" value="移除bigger类"> <input type="button" value="判断bigger类"> <input type="button" value="切换类"> <ul> <li class="aa bb cc dd">1</li> <li class="aa bb cc dd">2</li> <li class="aa bb cc dd">3</li> <li class="aa bb cc dd">4</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { //添加一个类 $("li").addClass("basic"); }); $("input").eq(1).click(function () { $("li").addClass("bigger"); }); $("input").eq(2).click(function () { //移除一个类 $("li").removeClass("bigger"); }); //判断类 $("input").eq(3).click(function () { //判断是否有bigger类 console.log($("li").hasClass("bigger")); }); $("input").eq(4).click(function () { //判断li有没有basic类，如果有，就移除他，如果没有，添加他 //toggle $("li").toggleClass("bigger"); }); }); </script> </body> </html>
以上是关于jQuery添加class的操作的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript课程——Day21（jQuery下class操作css操作元素宽高元素的位置滚动条创建.添加.替换.删除.克隆节点事件滑上事件的区别）