jQuery addClass() Method

In our last segment, we started a CSS module in Jquery. How can we access CSS and change it dynamically?

We learned in our last segment that how can we set the offset or set the position of any element.

Now let’s move forward in our today’s segment, that is Jquery manipulating CSS means that we will learn to manipulate the CSS that we have added.

Basically, if you have completed our learnvern course then you must be knowing that whenever we add a CSS then we generate a class , then we add that class.

On adding the class, our multiple things that are all the CSS properties get added.

Since currently we are learning jquery therefore we are using id but actually we can do this by class as well, that someone has taken P tag or div tag or h one tag, so to manipulate that we use class, to design it.

So if I have to add any CSS dynamically, remove it dynamically or change it dynamically then what we are supposed to do is what we are going to learn in today’s segment.

We will learn how to dynamically add or remove CSS.

So for that we have some methods available in Jquery manipulation like addclass, hasclass, toggleclass and removeclass.

Definitely when we create a static website then as we change the menus the related pages get opened which are statically placed.

Now if ‘we are performing something dynamically means the data is coming from the server for example if the data has so and so part then we have to add such things and then show them in blue color or red color.

If there is a success part in the data then it is supposed to be shown in green color or if there is an error then it is supposed to be shown in red color.

So what are we performing here, if there is a success then green color or if there is an error then red color.

So here we are adding if like conditions. So how do we get to know these things, here we will manipulate the CSS.

As you can see here, we are going to see four methods today , one of which is hasclass means to check that is a particular class is there in our web page or in our response , if the class is present then so and so CSS and if the class is absent then so and so CSS.

If we have to perform Dynamic things like if else based or conditional based then today’s segment of Jquery will be very useful for you.

Where will we use these things, if you are creating any web application then definitely we get the ‘if else’ condition while coding.

Wherever we have used the if else condition in that case, if you have to dynamically remove, add or update class then out of the four methods in today’s class, you can use the respective method for coding.

We will see all the methods one by one.

The first method is addclass. What addclass method does, as indicated by the name adds class, as it is written here "used to add one or more class name to the selected elements".

Means it is used to add more than one class in one element.

"This method is used only to add one or more class names to the class attributes, not to remove the existing class attributes".

Means for example, our input type equals to something, name equals to something and value equals to something so in our input these types, name value are nothing but attributes.

In the same way our class is also nothing but an attribute in the element. So this will not remove the class attribute but instead it will add values to the class attributes.

That is the addclass method is used to add multiple values in the class attributes. Here is the selector addclass so whatever class name we give will be added here.

For example, we have taken a P and In the P we have added a class, let’s say, I open the sublime text, here I will write HTML… HTML example…. to example… add.

Here we will add our library, ….script, ( 5 seconds pause, typing) style… in which in the body we will  add text align center in the body so our entire content is center aligned.

We will take a h one tag,,,, example of…. addclass method…

Basically what we are doing, let’s say we take a P tag(5 seconds pause, typing)  and we write this is learnvern… inside the P tag.