Hello, in this jQuery video, we are going to look at class attribute and values. So we're gonna have a look at how to determine if an element has a particular class, we are going to look at determining value, I mean moving a class from a element, and also just toggling a class as well. The first of all, I've got this button right here, that just when I was to, you know, do something What am I actually going to do is duplicate this I will have a button for you know, call it check class, the left we have class one class No, I'm gonna change the class, just because I want the exact method is called and class and then the next one is Okay, so the only one of the chain we're going to make any HTML is we're gonna, first of all add the class.

No matter what it is on the class. I'm going to duplicate this. On the last one, I'm not going to have the class at all, doesn't matter what sort of element type you are using. Obviously, you know, however you incorporate an income annual selector, that's what matters. This doesn't need to have the class this doesn't have the class jobs before where you got the button detection right here but I need to change it to have class clapper when the class button I'll be impressed. And let me just do it the same class and what's the other The one what was the other one?

I told you slipped my mind. Okay, so what we are going to do is save that reload nature we gain Everything okay? The Good, the good. And okay, so if we go to body we can see everything right here. Actually, I could get rid of this day, we don't need it there to be fair. And let me reload it.

This is extra HTML that we don't actually need. So, and here, we are going to just print out so I'm going to do is assign the result of whether or not it had the class to a variable called var result equals dollar. So this is where your selector is implemented, no matter what the selector is on to keep it simple and just say p tag before making more complex than this. Then I'm going to say I'm going to detect ID. And all I'm going to do Actually, you know what? scrub this, I'm never going to go down this route of it.

I'm not going to go down this route of the have class one. I'm going to do something slightly different. I'm going to do when the when the p tag is selected, and we're wrong on that how the class that will print out something according to say console dot log, though, so if I go to here, reload, I didn't see on the first two paragraphs have the epi classifier click it says True, true. What is the last one? It's a truth well. Okay, so let's have a look at This what is happening when we click the last one?

So the last one, which is this one, right, we're the, the, watch this if I were to move this and reload it, see what we get. So finally that we have false we have false false. So if it's on one of them, it can mess we'll need something a bit more specific to be able to distinguish this paragraph from with Pyro or actually do a also the same ID so epi ID So before I do that, so if I were to copy this and said on the do hashtag epic, I do reload this content true. This pumps out. Now if we reload that print site true and false because technically this is being triggered as well. So obviously using a combination of whydid classes and no actually more advanced selectors, I should say you can eliminate that, but let's look at removing the class.

So what we're going to say now we see where we are selecting so P. So everything is a paragraph dot remove class. Okay, so if I save that reload, I go to add I'm gonna click Remove class, he removes the class remove all paragraphs that have that class, you might be thinking, Oh, it's just empty now doesn't matter that doesn't matter at all. So easily identified this paragraph as well, it just basically put an empty class there, but that wouldn't you know, interfere with any other classes it you know has from before so you can have more classes in this one. Let's look at toggling toggle. We are going to do this. And we're going to say total class.

So total class to see exactly what this class said that reload. Total class, as you can see, removed from these two attitudes tied in to this one. So if you don't have it, you're out. So that's the way you, you know, add a class. So you can just toggle it like so. So that's how you manipulate classes.

Now, it's really simple, but it is extremely effective because they allow you to do your front side stuff. So maybe you have some sort of interface. And on that interface, you click something, it may be apply some sort of class that, you know, puts a border around the highlighted item, perhaps it's a form and an input form, for example, and when you you know, input some sort of invalid data, that's when it puts you around. So it is amazing for that and actually know what I forgot to show you the one or the thing is the Add class one, you know, I made a mistake. I said tau class is the way you add it. That's how you toggle it.

If you just want to only add it and not just toggle it. You can do that by I think you guessed it, I think you've guessed the code. And the name of it is called add class. So now if I were to just copy this, and I'll replace the selector with class, and instead we're going to say add class, reload this. And if I click Add class, I didn't see it only added it to this one. For do that nothing happened.

Niklas all paragraph tags, or everything that is selected by this selector already had the epi class added. So that's how you check with a particular class. This is how you remove a class toggle between a class Oh, that's great for you know, on and off, and this is how you add a class directly. That's it. So you add manipulate and you know, just do some epic stuff in classes in jQuery. you have any questions, feel free Common message as usual, I look forward to seeing you in the next video.