Hello, in this jQuery video, I am going to show you how to, you know, get and set CSS classes. So a class, as you know, is something like if I create to do text here, hello, will and maybe the class into applying multiple classes to elements further 34. So, last one for example, you know there's something but actually according blue and I'm just going to add a style tag here. Very stylish. What we are going to do is the blue tag is going to change the color, simply code that is all it's doing. That's all it is going to do.

So if we reload it See it has blue now. So we're actually going to get rid of it. And we're going to add the class using jQuery, I'm going to have a button. And this button is going to say, I have an idea to identify, I was going to call this ad. Okay, so if we go to our JavaScript file, we are going to attach an event to the button. So it's going to say, and it was going to be ad.

Clicks are where the button is clicked. If you're a bit unsure about what's happening here, or here. For this part, I recommend checking out all that needs to be hash. For this part, recommend checking that the selected part of the series and for this little section, recommend check in at the bottom series. Okay, we'll go with that. Let's continue So what we're going to do is select the element, always select the elements.

And I'm simply going to say div, just to keep it simple, but you can use any fancy selector dot add class. And this add class method. And just to prevent any confusion on the say, add class button. Just so no confusion between this and this, these are technically two. And now you can click Apply the class you want to add, it doesn't matter whether you have any styling setup for it, you can apply something that doesn't really have started settle for just won't do anything but you can, maybe you you know, do that you set up the CSS later, potentially. And so if I reload, click it, as you can see, it's applied the class but if I reload, and I'll just inspect the element.

So you can see right there at class As you can see the blue class have been added. Let's say you add a class, how about removing the class really simple. We're going to create a nother button and get the new class move class. And if I go to I will just literally copy this. The only thing we need to change is detect when a new class button is clicked. And instead of add class we put a new class.

So anything they picked up by this selector for any div element will have its blue class removed. So if I run it, I go to here if I click Remove class, you know it doesn't do anything because it doesn't exist at this point on any class. When a div class member click it on here, and I click that addict fee it's moved to default final one I'm going to show you is the toggle class. And this changes to toggle class. And this will just toggle it on or off. So if you, if the selector picks up an element already has that class, you're just basically move it if it picks up an element that doesn't have that class feel added.

So if you just want to be able to just toggle it if you didn't have food for you, so if we copy this There you go, we're done. We're done. That's a copy this total class. And all you do now if I reload it, click it, I didn't see it, I did it again. And you know, I could do that. I could do that.

That's another key point. So this so this is how you You add a class specifically Once you've selected and elemental certain element, this is how you move the class, mislay toggle it. Very simple stuff. You don't have to enclose it within a button, click this piece of code, or this code or this code could be anywhere, you know, based on some sort of condition. We're going to ignore the start of your web page. That's it simple stuff.

If you have any questions, feel free to pop me a message. And as usual, I look forward to seeing you in the next video.