jQuery adds/changes/removes CSS classes and determines whether CSS_jquery already exists

Changing the page element style can also be achieved using Javascript, but is there a simpler way? The answer is yes. Now with jQuery, it seems that the Js code has been slimmed down a lot, which is true to the sentence: "jQuery makes JavaScript The code becomes concise!” Let’s get back to the point, let’s see how jquery adds and removes CSS classes:

1. removeClass() - Remove CSS class

$("#target").removeClass("oldClass"); 
//#target 指的是需要移除CSS类的元素的ID 
//oldClass 指的是CSS类的名称

2.addClass() - Add CSS class

$("#target").addClass("newClass"); 
//#target 指的是需要添加样式的元素的ID 
//newClass 指的是CSS类的名称

3. toggleClass() - Add or remove a CSS class: If the CSS class already exists, it will be removed; conversely, if the CSS class does not exist, it will be added.

$("#target").toggleClass("newClass") 
//如果ID为“target”的元素已经定义了CSS样式，它将被移除； 
//反之，CSS类“newClass”将被赋给该ID

4.hasClass("className") - Determine whether CSS already exists

In actual application, we usually define these CSS classes first, and then change the page element style through Javascript event triggering (such as clicking a button). In addition, jQuery also provides a method hasClass("className") to determine whether an element has been assigned a CSS class. By the way, I would like to tell newcomers to front-end development that jquery is worth owning, so study it carefully when you have time.