Seven Most Common jQuery Methods

Add, remove and toggle class is also a very common way to manipulate style.

.addClass() and .removeClass()

I add two class selector in the style tag. Class one is to change text color to be green, and class two is change both text and background color.

Now I refresh the page and change h1 text to green by using addClass() method: $(“h1”).addClass(“one”).  If you want to remove the style, you can change it to removeClass(“one”).

I do the same thing to the list. I change the list color and add a background color by adding the class two style value:$(“li”).addClass(“two”).

.toggleClass()

According to jQuery, toggerClass method can add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.

I only want to change the first list item color and background by writing:$(“li”).first().toggleClass(“two”), so the “Apple” changes to red with a yellow background.

Then, I want to change all the list items color and backgound:$(“li”).toggleClass(“two”). 

As the result, the “Apple” style disappear, and the rest two fruits change the style. That’s how toggle works: the “Apple” already had that class two style, so it removed automatically when I set all list items to the same class two style.