HomeОбразованиеRelated VideosMore From: kudvenkat

jQuery add or remove class

175 ratings | 47517 views
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-add-or-remove-class.html 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> <script src="jquery-1.11.2.js"></script> <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>
Html code for embedding videos on your blog
Text Comments (17)
Karma (3 years ago)
thank you for the videos.. do u have java videos???
kudvenkat (3 years ago)
+Karma j chakma Thank you very much for taking time to give feedback. This means a lot. I am very glad you found the videos useful. At the moment, we don't have videos on the concepts you mentioned. I will record and upload as soon as I can. Thank you very much for your patience. Dot Net & SQL Server training videos for web developers https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd You can order DVDs for offline viewing using the link below http://www.pragimtech.com/Order.aspx Code Samples & Slides are on my blog http://csharp-video-tutorials.blogspot.com Tips to effectively use our channel https://www.youtube.com/watch?v=y780MwhY70s To receive email alerts, when new videos are uploaded, please subscribe to our channel http://www.youtube.com/subscription_center?add_user=kudvenkat Please click that THUMBS UP button below the video, if you like the videos Thanks a million for sharing these resources with your friends Best Venkat
mahendher reddy (6 months ago)
best videos on jquery.
Riju Chowdhury (10 months ago)
u put a lot of effort to make these tutorials... thanks a lot... very hardworking ... really appreciate it. hope more will come ...
Anjali Kale (1 year ago)
Hey, thank you, your videos are very helpful, easy to understand....Thanks.
Sodium chloride (1 year ago)
Very nice video. Waiting for more exclusive!
vijay kumre Vijay1994 (1 year ago)
thanks
Mahmudul hasan (2 years ago)
what about ---->hasClass<---- example
Drez Covers (2 years ago)
thanks bro u are the best
byair1974 (2 years ago)
thank you, your video is helpful. I think that the below code is better, not (chain instant of each)? $('input[type=text]').focus(function () { $(this).addClass('textBoxStyle'); }); $('input[type=text]').blur(function () { $(this).removeClass('textBoxStyle'); });
Daniel Jaquez (3 years ago)
dude, I really like your tutorials.. thank you!!!
developernader (3 years ago)
Thank you very much
sanjeev Dutta (3 years ago)
Great job..keep the good work..any video planned for angular js thanks once again for your good job..
Boi-Hue La (3 years ago)
Thank you Sir. Is there any CSS or CSS3 tutorial?
Rahul Srivastava (3 years ago)
thank you sir
Pablo Salas (3 years ago)
thank you!!! :)
Pablo Salas (3 years ago)
ok !! It's the least I can do !! :)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.