Welcome back.
So in this video we're going to talk about the ad class method.
So the ad class method adds one or more classes to the selected elements.
And this is for manipulating CSX.
So let's go into our HP docs shortcut.
Go to the learn advance J query right click click new folder.
Want to do.
And we'll do add class method came a close that we're going to go to sublime right click to new file
Index study tomorrow and we'll do control and control asthma me and jazz and we're can go to the subject
query folder control a control C control W and then control V and the index that each email file.
Same with the man that J asked.
We're gonna control a control C control W and paste into the main J us right click and open in the browser
inspect make sure it's working.
There it is.
OK.
Close that up.
Now we can get to the fun part.
So what we're gonna do is we're going to add
the class method.
We're gonna play with that right now.
So what I want to do is we're going to write out a little bit of H Jamal so we're gonna do an H1 heading
one each to head into to a paragraph tag sort of paragraph 1 and we'll do Paragraph 2
paragraph 2
and we'll do div.
This is a div then we're gonna hit a button
add classes two elements.
Now what we're gonna do is we're gonna go right below the script tag here and I'm going to write a style
tag.
So we'll do style return a couple times tab n and we're gonna do that.
Important
and we're going to do fine Wait mold and font size.
Extra extra large.
I'm we're gonna do da blue.
It's going to be color blue.
So the reason we're writing this out first is we're going to add this with J query.
So because right now if we were to run this let's run it real quick just so I can show you this.
None of this is showing the way it's supposed to.
Right.
Because dot important is a class but none of these have a class or just elements right now with no classes.
Same with the blue.
There's no elements here with that class so that's not going to work.
But what we're going to do is we're going to dynamically add it with J query.
So let's go over to the main dot J.S. Let's delete the council dot log in to do document
dot ready.
We're going to a function and we'll do the curly brace here and we'll do dollar sign and then button
to call the element button dot Clark function and inside of the function we're going to return the H1
comma H2
comma p p tag and we're gonna add a class so dot add class and we're going to do blue.
So now we're telling the browser add this class to this element.
So now we're going to do div dot class add class sorry and we're gonna do important
so you can see how cool this is to add classes dynamically without having to even write it in a CSF
file.
You know
so let's open the browser and when I click this everything is going to change the blue and the font
size will change the font weight will change the color will change.
So I'll right click.
So let's inspect this real quick.
And if I go to the eight wonders for an example and I click this as soon as I click that it dynamically
adds that it gives it blue are the class of blue and then it calls the color the property blue.
Same with the important and adds that now if I refresh this and I go there there's nothing there but
when I add it it's there because what it's doing is it's dynamically changing it when I add it to the
page.
So that is the add class method.
So I'll see in the next video.
Thanks for watching.