<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .basic { background-color: pink; color: red; font-size: 33px; } .bigger { font-size: 66px; } </style> </head> <body> <input type="button" value="添加basic类"> <input type="button" value="添加bigger类"> <input type="button" value="移除basic类"> <input type="button" value="移除bigger类"> <input type="button" value="切换类"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script src="jquery-3.2.1.js"></script> <script> $(function () { // 添加一个类 $("input").eq(0).click(function () { $("ul>li").addClass("basic"); }); $("input").eq(1).click(function () { $("ul>li").addClass("bigger"); }); // 移除一个类 $("input").eq(2).click(function () { $("ul>li").removeClass("basic"); }); // 移除一个类 $("input").eq(3).click(function () { $("ul>li").removeClass("bigger"); }); // 判断类, 切换类 $("input").eq(4).click(function () { // if ($("ul>li").hasClass("basic")) { // $("ul>li").removeClass("basic"); // } else { // $("ul>li").addClass("basic"); // } $("ul>li").toggleClass("basic"); }); }); </script> </body> </html>