Jquery Methods

Hello guys, We will continue the same segment as the previous one for today as well.  So today's video is the continuation of the previous segment.

What we saw previously let’s move ahead on that. After “add class, comes “has class. Has class is used to check that if I give the name of so and so class that class is inside it or not.

So it will basically return us true and false. Means the program that we have prepared, inside it we have given classes one, two, three, we have added them.

I paste this complete program here and remove these properties inside “p”. And these classes one, two, three, I add them inside “p” in this way as class one, class two, class three.

Example for has class, example for has class. Let’s save this program by the name “has class''. And run it, “has class. So this is our program that is running. So here you can see, we have taken the same previous program here.

But the classes that we added dynamically are already adding it here. Now we check inside it on a button click that class one, two, three are in it or not.

You can see here after the selector we have “has class in which we have to pass class name that will return us true or false. So what we will do here, we take a variable check that is equal to a dollar. Our “p” will come here, dot… has class, now here I will check class one.

I will check this “class one”, whether class one is in “p” or not. Let’s do alert check, value of …check, save…, reload, ..click.

So what we are getting is whether class one is there or not. So here value of… OK.( 4 seconds pause, typing) So we are checking if class one exists or not. Yes class one is there that’s why we are getting true here.

OK, now if I check class five, then what will I get? Class one exists, actually it is class five OK. So if I check for class five, I get false. Means the class I am finding if it is there so I will get true value. If the class I am finding is not there I will get the false value.

Now we will move to our example. Now the example that we have just checked, a similar example is here. That inside “p” has class, is there any class by the name “intro” or not.

In our case we check class one, two, three. So “has class” returns us what? True or false. On the basis of “has class”, one more example is given here.

Then, in it we have to check whether there is a value or not. If it’s there, on the basis of it we are showing some different effects here.

Means, you can count this program as the extension of our “has class. If in my so and so division the program I want to check, is there. So we want to highlight that division.

If I want to check so and so division and if it’s not there, my that division won’t be highlighted.. We want to do something like that.

So let’s say I copy this one program from here and paste it here and I remove this button click portion, remove these classes from the body. Now you look carefully, we will do one more thing inside the “has class.

I will create something in the buttons and will add some div. For example, div, inside this div we will write class red…, class red… exists. After red we will write here green and here we will write blue. Now we do this, red, green, blue three divs we have created.

So for this red class, we will add a red colour class. Background colour red. …Will write three times. For my green…, green in it, for my blue, blue inside it. So we have got red, green, blue.

Now what we will do, we will firstly save our divs program, “has class underscore two. And we will run this program. So you can see, here is my class red exist… we have to change the content.

Class green exists and class blue exists. And we will give some margin inside all three. Like margin till ten pixel, and will give padding fifty, till twenty pixel.

( 5 seconds pause, typing ) Save, reload. So you can see we have got red, green, blue and inside it colour white, font size twenty pixel. Save. So all three colours are visible to you.

Now I have to check that my, I will write some buttons here, like button id, red button…, check red class. OK….

After red comes green, so check green…. Then comes our blue, so check blue. Save. So, all three buttons have come.

If I click on red so that my portion should highlight, if I click on green so my green portion should highlight, and if click on blue so the blue portion should highlight.

We are generating an example like this. So what will we do for this? So first of all, whenever I click on this red, my document will come here.

Here is my id, red button so, by clicking on the red button what I have to check? That my attribute red colour exists here or not.

So let’s say I have an id, in it I will also add class, but the button we will not need as we already have it. So I will add button no.

If I click on any button, so, over the button click I have to check that my class exists or not. And I have added these classes inside them.

So, dollar div dot has class, now if I clicked on red button so I have to check the has class for…red

So here will come, dollar hashtag, here is my id, red button. So, I clicked on the red button, so I have to check in which div is this class  red.

So has class red. So if red class is there, means if value, var value equals to, if I am getting true in red. So now I want to highlight that particular div.

So how will I perform that highlight? So inside value wherever I have got true, I will write here something like this, if value means if this is true.

So, what do I have to do? If the true value is returned to me, I will take the reference of this red class of mine.

So that is a dollar.. dot red ….dot fade to… slow point zero dot…. fade to… slow comma one… point zero. So we have written this only for red.

So let’s see, we will check whether it runs or not. Let’s save this program and my button is red. So when I am clicking here you can see, nothing is happening right now.

We can also check in the console if there is an error or not, no there’s not. So what have we done here? I want such a div, if my red class exists. So do I have such a div? Yes.

Well basically I have a div that has red class in it, that particular div of mine which has red class, that div of mine should fade. I want to do that.

So all the similar things that I wrote for red after red button, will write for green button as well. Here my class is green. After red is green.

Then it is also green. Same thing we will write for the blue button…. Here, my blue will come. Save, reload. So if I click on red you can see that my red strip is blinking.

If clicking on green, green one is blinking, when clicking on blue, then blue one. So you can see whenever I will click on any, any colour, that one is being checked.

First thing to check here is whether I have that class or not. If I have that class, I am fading that div of mine which has that class.

You would have seen something like this in websites, where you click or hover it, that so and so portion of our webpage gets highlighted.

So this is our extension of such types of example, that whatever is the class you are getting it checked whether it exists or not

So whenever you work with a web application, you have to check conditional things. So you can do something like this, with the help of “has class can get it checked with conditions.

And you can see how we are playing with the design using jQuery.

After this has class, comes our toggle class. Toggle class like we learnt in toggle, to add or remove two things, to do it together we use toggle.

If you have conducted our initial display effect segment, there we learnt that how can we hide the show simultaneously, with the help of a method named toggle.

Toggle class is like that, to add one class and by using the same method remove that class as well. We can do this with the help of toggle.

Means add class only adds, and what toggle class do, it adds as well as removes.  So for toggles we will take the add class example. Same inside this program, toggle class, here… toggle, and in place of this class one I will only keep the class name for now.

And here also make it class name, I will add these properties here, because I have to do this only for one class. Example of toggle class. Save toggle class. Now we will run this program….

So this is our program. So you can see as I click on the button, my classes should add. So here my class is added. Now as soon as I click the button, my classes that were added are now getting removed.

Means add and delete, add and remove work simultaneously, whenever we use toggle.

You would remember, wherever we used the word toggle, always two things happened there. Hide show, open close, scroll up and scroll down happens simultaneously.

Toggle is like that if by adding the class you have to remove it also, so we can do both the tasks simultaneously with one button.

So this is our example of toggle class. We have seen add class, “has class and toggle. So now only remains are simple,  removed. How can we remove a class?

So for remove, simple, after selector we have to add remove. Here is a line, “it removes the selected elements itself, as well as everything inside it (including all texts and child nodes).”

Means, whatever class, if this class is associated with any child, so the child will also get removed, remove class explains this to us.

We don’t have to tell which class to be removed under remove class, our all classes get removed. For example if I copy and paste here, the add example and here I write remove class, here remove class and my classes that are added, I remove them.

And add them here explicitly.

Class equal to class one, class two, class three. So will save this program by the name remove class. And will also run this. Here you can see my classes are already added here.

I will open the console, elements, OK. Here you can see class one, class two, class three all three are added here. As soon as I click on this remove class button my all the three classes should be removed.

So you can see as I clicked that all the three classes got removed. Class will be safe here. So what is the use of “remove class”? Remove class  doesn’t remove a particular class.

Remove class, selector is given, will remove your selectors all the classes. So you can count it as a remove's advantage as well as its disadvantage, because with the help of remove you cannot just remove one class.

Remove will remove all your classes. That’s why you can also see in the slide, a remove selector is given, and here is our one example of without parameters.

If we consider here with any parameter, we can see one trial here. Let’s see I let’s see in this program, remove class dot, I will take class two and I remove it.

Click. So you can see class two got removed, one and three are remaining. Meaning my background coloured ones.

So here we see that whether selector accepts remove under parenthesis, means if you have to remove a specified class so you can remove that too.

If you are to remove all the given classes so you can do that as well. In that case as shown in the syntax you have to pass the parameter. If a parameter is not passed all will get removed, if a parameter is passed only that particular class will be removed.

Now come to this last line, “this method also removes the data and the events of the selected elements.”

Because we can associate any event with the class of our buttons, we saw in the last example, where we took the red class and clicked on that button.

So if we have kept any id or event associated with the class and we remove that so our that event will also be removed. Means if there will be no class in DOM no related events will be fired against it.

If there will be class in DOM related events will be fired. So this is our remove class, that will remove class and its related events as well.

So here ends our CSS class’s manipulations. We completed all four in today's segment : how to add a class, to check whether there is an element in the class, to toggle the class means to add and remove simultaneously and simply remove the class.

With this ends our jQuery’s CSS module means all CSS related methods we have finished here. The practicals given under both the segments are a little tricky, because these work with big things in web application.

So I request you all do practise the practicals, if you want code file you can take it from our videos description box.

If you face any difficulty during practice, the program is not running, or any other problem is there or issue. So you can tell us that on “FORUMS.LEARNVERN.COM”.

Simultaneously if you have any problem in understanding any segment, so you can tell that as well on “FORUMS.LEARNVERN.COM”.

We will revert all your questions with solutions there. The next module of ours is jQuery’s dimension related methods. That relates to our width, height.

So will meet in our next module that is on jQuery dimension method.

Thank you.