OK so there's three more methods I want to talk about.
And they all are very similar.
They have to do with classes.
So if you think back to the class list property and the DOT Add Remove and toggle methods that go along
with class list.
These are the J.A.G. analogs So this will be a quick question.
Just going to demonstrate those really quickly.
So I'm going to go to my HMO and the first thing I'm going to do is define the style tag and I'm just
going to do it in line for the second time and I'm going to add a few classes.
So the first one will add in.
Well just call it Dot correct and it will make something turn green.
So we'll just do colored green and we'll add another one dot wrong and that will make color red and
background pink.
And then lastly will do dot done which will be like for a To Do list and we'll do color is gray and
text decoration is line through.
OK so now we have three classes and then we're going to use J query to add and remove those classes
.
So I'll take a look at the docs.
Just one of them.
Let's take a look at add class.
You can see that it adds the specified class or classes to each element in the set of matched elements
.
So this will add two classes to all paragraphs.
My class and your class to all paragraphs which makes it really useful if we want to assign a class
to a bunch of elements at once.
So let's go back here.
So let's begin by making this H-1 have the correct class which just turned to green.
So we select H-1 make sure we have it.
Does it add class.
Correct.
Just like that.
And it turns green.
And if we inspect it you can see that it has class equals correct.
And then we can do remove class to do the same thing but in reverse.
So H-1 remove.
Class.
Correct.
We'll remove the class correct from that element and now it no longer has that class.
So we can also do that to a collection.
So we will select all allies.
We get three of them and then we'll add the class.
Wrong just like that.
And all of them now have that class where they have a pink background and text color is red.
You can see it added them to three.
So once again I know I'm a broken record here but if we did this without j Querrey we would have to
select all three of these manually with a query selector all possibly and then we would loop through
with the for loop and for each one we would do class classless add wrong.
So we don't have to do any of that.
This has an implicit loop that takes care of it all for us.
So let's now remove that class wrong from all of them and let's add the class.
Correct.
All of them just like that.
And now they all turn green.
Perfect.
So the last one that I'll demonstrate is toggle class which works just like.
Class list toggle does where it takes a argument a class name and it will either apply that class or
add it to the Elman or set of elements.
If they don't have it yet and if they do have that class it will remove it.
So let's try that now.
Let's go and do a toggle so all allies toggle.
Class.
Correct.
And they already have that class.
So that will remove it.
And if we run it again that will add it and remove it and add it and remove it.
So let's try something a little bit different and only do it for the first ally.
So Elijah it first which is just like the last that I showed you.
And we'll toggle the class done.
And so only the first one is great out and has that strikethrough effect.
Now if I select all of them allies that toggle class done and I hit enter you can see that it toggles
each one individually.
So this one had the class done.
So it was removed and these two didn't have the class.
So it automatically added declasse.
That's all I wanted to demonstrate.
We have I'd class remove class and toggle class and they worked very similarly to how they did with
class list with vanilla.
Yes.
The big difference like everything in J query is that we can act on a collection of elements without
actually having to write the loop.
OK.