jQuery add or remove class

Показать описание

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss
1. How to check if an element has a css class
2. How to add or remove css classes
3. How to toggle css classes

hasClass - Returns true if an element has the specified class otherwise false
addClass - Adds one or more specified classes. To add multiple classes separate them with a space.
removeClass - Removes one or multiple or all classes. To remove multiple classes separate them with a space. To remove all classes, don't specify any class name.
toggleClass - Toggles one or more specified classes. If the element has the specified class then it is removed, if the class is not present then it is added.

Replace < with LESSTHAN symbol and > with GREATERTHAN symbol

<html>
<head>
<title></title>
<style>
.boldClass {
font-weight: bold;
}
.italicsClass {
font-style: italic;
}
.colorClass {
color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#btn1').click(function () {
$('p').addClass('colorClass');
});

$('#btn2').click(function () {
$('p').removeClass('colorClass');
});

$('#btn3').click(function () {
$('p').addClass('colorClass italicsClass');
});

$('#btn4').click(function () {
$('p').removeClass('colorClass italicsClass');
});

$('#btn5').click(function () {
$('p').addClass('colorClass italicsClass boldClass');
});

$('#btn6').click(function () {
$('p').removeClass();
});
});
</script>
</head>
<body style="font-family:Arial">
<p>Pragim Technologies</p>
<table>
<tr>
<td>
<input id="btn1" style="width:250px" type="button"
value="Add Color Class" />
</td>
<td>
<input id="btn2" style="width:250px" type="button"
value="Remove Color Class" />
</td>
</tr>
<tr>
<td>
<input id="btn3" style="width:250px" type="button"
value="Add Color and Italics Classes" />
</td>
<td>
<input id="btn4" style="width:250px" type="button"
value="Remove Color and Italics Classes" />
</td>
</tr>
<tr>
<td>
<input id="btn5" style="width:250px" type="button"
value="Add Color, Italics & Bold Classes" />
</td>
<td>
<input id="btn6" style="width:250px" type="button"
value="Remove All Classes" />
</td>
</tr>
</table>
</body>
</html>

Рекомендации по теме

Комментарии

thank you for the videos.. do u have java videos???

kaRmajchakma

JQuery still helping us solve our problems efficiently.... hail this framework everyone! and thanks for the video

ldkqcoq

u put a lot of effort to make these tutorials... thanks a lot... very hardworking ... really appreciate it. hope more will come ...

rijuchowdhury

dude, I really like your tutorials.. thank you!!!

Dannyfrsh

Very nice video. Waiting for more exclusive!

sodiumchloride

Hey, thank you, your videos are very helpful, easy to understand....Thanks.

anjalikale

what about ---->hasClass<---- example

Mahmudulhasan-tshm

Great job..keep the good work..any video planned for angular js thanks once again for your good job..

sanjeevdutta

Thank you Sir. Is there any CSS or CSS3 tutorial?

boi-huela

why use each()? I don't use it, but it still work.

$('input').focus(function(){
$(this).addClass('color')
})

$(this).removeClass('color')
})
});

zoeliu

thank you, your video is helpful.

I think that the below code is better, not (chain instant of each)?

() {

});

() {

});

byair

jQuery add or remove class

jQuery add or remove class

How to add and remove class using Jquery | Add remove active class on click Jquery | Jquery tutorial

How to Add Class, Remove Class & Toggle Class in jQuery

34 jQuery addClass removeClass

Add and Remove Active Class on Click

jQuery Add And Remove Active Class to li on click

jQuery addClass & removeClass Method Tutorial in Hindi / Urdu

JQuery animation : 1-Add Remove class

MongoDB Laravel | Make E-commerce #78: Shopping Cart (III) | Update Cart Items Quantity via Ajax

jQuery vs. Vanilla Javascript: Adding, Removing Classes & More

Add class remove class using JQuery

jQuery Tutorial for Beginners #14 - Adding & Removing Classes

jQuery Tutorial : addClass() Method

6. Add & Remove class name from Html Element class list using Vanilla JavaScript and jQuery

JQuery Tutorial for Beginners - 11 - Add and remove classes

Jquery Add / Remove Class

jQuery adding, removing, and toggling classes

Add or Remove Class On Click using jQuery || WebStuff

ADD REMOVE CLASS to a HTML element jQuery

Jquery Tutorial | Append | Prepend | After | Before | Remove | Empty | Add Remove Class | Jquery

JQuery 18 - CSS class manipulation methods -Add class and Remove class

add and remove class with jQuery

jQuery : jquery add remove class

jQuery Add And Remove Class Using jQuery | addClass removeClass | Carry WebTech