<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <style>. Basic{Background-color:Pink;Color:Red;font-size:33px; }. Bigger{font-size:66px; } </style></Head><Body><inputtype= "button"value= "add Basic class"><inputtype= "button"value= "add bigger class"><inputtype= "button"value= "remove Basic class"><inputtype= "button"value= "remove bigger class"><inputtype= "button"value= "toggle class"><ul> <Li>1</Li> <Li>2</Li> <Li>3</Li> <Li>4</Li></ul><Scriptsrc= "jquery-3.2.1.js"></Script><Script> $(function () { //Add a class $("input"). eq (0). Click (function () { $("Ul>li"). addclass ("Basic"); }); $("input"). eq (1). Click (function () { $("Ul>li"). addclass ("bigger"); }); //remove a class $("input"). eq (2). Click (function () { $("Ul>li"). Removeclass ("Basic"); }); //remove a class $("input"). eq (3). Click (function () { $("Ul>li"). Removeclass ("bigger"); }); //Judging classes, Switching classes $("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> Nine. class operation