<!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><jQuery> 九. Class操作
原文地址：https://www.cnblogs.com/ZeroHour/p/8267292.html