One of the methods is to change the CSS Class of page elements. In traditional Javascript, we usually implement it by processing the classname feature of HTML Dom; jQuery provides three methods to implement this function. Although they share the same idea with traditional methods, they save a lot of code. -"JQuery makes JavaScript code concise !"
1. addClass ()-add CSS class
Copy codeThe Code is as follows:
$ ("# Target"). addClass ("newClass ");
// # Target indicates the ID of the element to add a style.
// NewClass refers to the CSS Class Name
2. removeClass ()-remove the CSS class
Copy codeThe Code is as follows:
$ ("# Target"). removeClass ("oldClass ");
// # Target indicates the ID of the element to be removed from the CSS class.
// OldClass refers to the CSS Class Name
3. toggleClass ()-Add or remove a CSS class: If the CSS class already exists, it will be removed. On the contrary, if the CSS class does not exist, it will be added.
Copy codeThe Code is as follows:
$ ("# Target"). toggleClass ("newClass ")
// If the element whose ID is "target" has defined the CSS style, it will be removed;
// Conversely, the CSS class "newClass" will be assigned to this ID.
4. hasClass ("className")-determine whether CSS exists
In practical use, we often define these CSS classes first, and then use Javascript event triggers (such as clicking a link) to change the page element style. In addition, jQuery provides a hasClass ("className") method to determine whether an element has been assigned to a CSS class.