jQuery Google Latest | Google jQuery Hosting – Always Include latest jQuery from Google/jQuery CDN

If you already know about the intro about jQuery hosted on Google and would like to skip to the code directly, then simply click here. Or if you would like to read an intro about it and the advantages of always including the latest jQuery from Google, then continue to read on.

jQuery, as you know is an awesome JavaScript framework (If you would like to know more about jQuery, then read my article on What jQuery is, why to use jQuery and how to use jQuery). When developing websites, you may have noticed that jQuery releases periodical updates that can be really helpful as they fix bugs (if any), add new features, deprecate any older functions, etc. So you might come around a tutorial on the internet that shows you how to do things the new way by including the latest jQuery in their demo/scripts. And if you do implement those tutorials in your website and try to run it then you ultimately risk breaking that specific (new) functionality on your website. You may be wondering that you are using the exact same code but still you cant figure out what’s wrong and why the script is not working. After hours (or even days) of struggling with it, you may eventually realize that you forgot to include the latest version of jQuery! So is there any way to fix this automatically without having you to manually update is to the Google latest jQuery version? Fortunately, there is!

Enter “Hosting latest version of jQuery from Google/jQuery CDN“! Instead of including the jQuery script from your local files, you can now can just make including latest jQuery from jQuery CDN, always & automatically it or from Google hosted servers (with minor changes to script tag)! I am going to give a quick definition of CDN (as I am going to be using that word quite few times through this article) & then I will talk about some of the advantages of including Google jQuery hosting, followed by the actual code.

Quick Definition of CDN:

A CDN stands for Content Delivery Network. This network focus on distributing your static content across servers in various, diverse physical locations. That said, when a browser resolves the URL for these files that are included in the webpage (such as javascript), the script will be downloaded/made available from  the closest available server in the network.

Advantages of always including latest version of jQuery from Google/jQuery CDN

• No manual update required – Once you implement the code provided in this article, you no longer will have to update to the newest version of jQuery, whenever one becomes available. The newer version of jQuery is automatically included for you. So this decreases maintenance & increases your productivity. This is true if you choose to include jQuery from jQuery CDN. But if you include it from Google CDN, you will have to update the script name again.
• Access to the latest additions – You can always take advantage of the latest features without having to worry about including the latest jQuery version. Simply go ahead & make your changes & that’s it! Again, this is true in case of including jQuery from jQuery CDN. In case of Google CDN, you will have to make sure that you have updated the script URL to take advantage of the newest version.
• Parallel Download/Parallelism – Usually the web browsers limit the number of connections that can be made simultaneously, to avoid overloading servers unnecessarily. So depending on the browser that is being used at that point of time, you may be limited to as low as two connections per hostname. So if you opt to use jQuery/Google AJAX Libraries, CDN eliminates one request to your site, allowing more of your local content to downloaded in parallel. It may not seem like a huge difference if the browser allows multiple concurrent connections, but for users who are running a browser that allows minimum concurrent connection, the difference can be noticed.
• Decreased latency –When the latest version of jQuery is included from jQuery/Google’s AJAX Libraries CDN, the browsers of users who are located physically away from your server, will be able to download jQuery faster from jQuery/Google’s servers. So this will reduce the time their browser spends on fetching the copy of jQuery. So if your website is focused on targeting only a specific region of the globe and you are absolutely certain that your audience reach may never go beyond your targeted region & if your webserver is located in the same place as your consumers, then you may opt to include a copy of jQuery on your servers.
  If this is not the case and you have visitors all over the globe, then including jQuery from jQuery/Google’s AJAX Libraries CDN will fasten up browsing experience for users who are away from your web server’s physical location. And the best part is that using jQuery/Google’s CDN is free! So it be a worthy move to include jQuery from jQuery/Google’s library.
• Caching – The biggest advantage of including jQuery from Google CDN or jQuery CDN is that your website users may not need to download jQuery at all. The browsers will be able to download it once from the CDN and they will be able to use this cached copy. And this speeds up browsing speed tremendously.

 How to always include latest jQuery version from Google for any website.

Well ok, so here’s the part that you were waiting for.

Code to always include latest jQuery from jQuery CDN in a regular website:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Code to always include latest jQuery from Google CDN in a regular website:

//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

In the above code, make sure that you don’t include http: in front of //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js. It is intentionally made that way as it allows you to use a single reference that works on both HTTP and HTTPS pages. You may use http: in front of it, if you are not using a web server altogether i.e. when you might be working on HTML pages & including jQuery in it. So if you are working on a website that needs a web server, such as PHP, WordPress, Joomla, etc. you can safely omit using http:

Code to always include latest jQuery from Microsoft CDN in a regular website:

http://ajax.microsoft.com/ajax/jquery/jquery-1.8.2.min.js

Code to always include latest jQuery from jQuery CDN in a WordPress theme/website:

<?php
function my_jquery_enqueue()
{
	//If any jQuery is already included, deregister it
	wp_deregister_script('jquery');

	//Register our jQuery from jQuery hosted servers
	wp_register_script('jquery', 'http://code.jquery.com/jquery-latest.min.js', false, null);

	//Enqueue the latest version of jQuery registered in the above step, to be used in the website
	wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_jquery_enqueue');
?>

Code to always include latest jQuery from Google CDN in a WordPress theme/website:

[php]

<?php

function my_jquery_enqueue()
{
//If any jQuery is already included, deregister it
wp_deregister_script(‘jquery’);

//Register our jQuery from Google hosted servers
wp_register_script(‘jquery’, ‘//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’, false, null);

//Enqueue the latest version of jQuery registered in the above step, to be used in the website
wp_enqueue_script(‘jquery’);
}
add_action(‘wp_enqueue_scripts’, ‘my_jquery_enqueue’);
?>

[/php]

Code to always include latest jQuery from Microsoft CDN in a WordPress theme/website:

<?php
function my_jquery_enqueue()
{
	//If any jQuery is already included, deregister it
	wp_deregister_script('jquery');

	//Register our jQuery from Microsoft hosted servers
	wp_register_script('jquery', 'http://ajax.microsoft.com/ajax/jquery/jquery-1.8.2.min.js', false, null);

	//Enqueue the latest version of jQuery registered in the above step, to be used in the website
	wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_jquery_enqueue');
?>

jQuery CDN vs Google CDN vs Microsoft CDN for jQuery:

You might be wondering which option to go with, for choosing to host your jQuery file with. Here’s what I recommend:

jQuery CDN – There’s no maintenance required for it, whatsoever. It’s automatically updated, thereby providing you all new features without having to mess with the script tag tweak.

Google CDN – If you have no issues in changing the script tag manually each time jQuery is updated & you would like to use Google to host it as they have broader coverage than jQuery CDN.

Microsoft CDN – If you are a Microsoft fan!

There are some other differences but they are not important if you just need to include latest version of jQuery.

That’s it for this article!

Do you know of any other ways to use latest version of jQuery from Google/jQuery/Microsoft CDN? Feel free to suggest by commenting below.

How to use .css() Method in jQuery – Examples

In order to see how to use the .css() method in jQuery, let us consider that we have a div and we are going to apply our CSS styles to it. Lets see by means of a simple example, how to do this in different ways. But first, feel free to try the demo. Following the demo, will be the source code followed by specific examples.

Using .css() method in jQuery to access and manipulate the styles of an element

Here’s the HTML + basic jQuery required to get started with our examples:
(Please note that jQuery v.>= 1.7 is required to run the demo using .on() method in jQuery)

<html>
<head>
<title>jQuery .css(); Method Examples</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.red {
border: 1px solid #FF0000;
margin: 10px;
}
.green {
background-color: #CEFFCE;
margin: 10px;
}

</style>
</head>

<body>

<div class="divs_container">

<div id="mydiv1" class="red">
This is my 1 div

</div>

</div>

<input type="button" name="sbt_get_class" id="sbt_get_class" value="Get Class">

<input type="button" name="sbt_set_class" id="sbt_set_class" value="Set/ReplaceWith Green Class">

<input type="button" name="sbt_remove_class" id="sbt_remove_class" value="Remove Class">

<br>
<input type="button" name="sbt_add_red_class" id="sbt_add_red_class" value="Add Red Class">

<input type="button" name="sbt_add_green_class" id="sbt_add_green_class" value="Add Green Class with Red Class">

<input type="button" name="sbt_remove_red_class" id="sbt_remove_red_class" value="Remove Red Class">

<br>

<input type="button" name="sbt_add_purple_bg" id="sbt_add_purple_bg" value="Add Purple Background">

<input type="button" name="sbt_add_multiple_css" id="sbt_add_multiple_css" value="Add Multiple CSS">

<input type="button" name="sbt_chain_css_styles" id="sbt_chain_css_styles" value="Chain CSS styles">

<br>

<input type="button" name="sbt_reset" id="sbt_reset" value="Reset everything">
<script type="text/javascript" language="javascript">

$(document).ready(function(){

var divs_container_html = $(".divs_container").html();

});

</script>
</body>
</html>

Following is the jQuery code for the examples:

Example #1 – Alert the current class of the div using the .css() method in jQuery

$('#sbt_get_class').on("click", function(){

alert( $('#mydiv1').attr('class') );

});

Example #2 – Assign/Set/Replace Class for a div using the .css() method in jQuery

$('#sbt_set_class').on("click", function(){

$('#mydiv1').attr('class', 'green');

});

Examples #3 – Remove existing/all classes of a div using the .css() method

$('#sbt_remove_class').on("click", function(){

$('#mydiv1').removeClass();

});

Example #4 – Add a single class to a div using the jQuery .css() method

$('#sbt_add_red_class').on("click", function(){

$('#mydiv1').attr('class', 'red');

});

Example #5 – Append a single new class to an existing class of a div using css() method

$('#sbt_add_green_class').on("click", function(){

$('#mydiv1').addClass('green');

});

Example #6 – Remove a specific single class from a list of all applied classes using .css() method in jQuery

$('#sbt_remove_red_class').on("click", function(){

$('#mydiv1').removeClass('red');

});

Example #7 – Add Class by specifying CSS style directly using jQuery CSS

$('#sbt_add_purple_bg').on("click", function(){

$('#mydiv1').css("background-color","purple");

});

Example #8 – Add new css styles using the .css() method in jQuery (If any of the style is already present on the target div, it will be overwritten with the new style).

$('#sbt_add_multiple_css').on("click", function(){

$('#mydiv1').css({"background-color":"#CEFFCE", "font-size":"20px", "font-color":"#000", "font-weight":"bold"});

});

Example #9 – Add CSS styles via “chaining” using .css() method of jQuery

$('#sbt_chain_css_styles').on("click", function(){

$('#mydiv1').css("background-color", "#0099FF")
.css("font-size", "40px")
.css("font-color", "#FFF")
.css("font-weight", "normal")
.css("border", "10px solid #06C");

});

Example #10 – Reset the divs back to their original state using the .css() method

$('#sbt_reset').on("click", function(){

$(".divs_container").html(divs_container_html);

});

Easy so far? You can build up on the other CSS properties using the methodology as described above.

That’s it for this article!

Do you know of any other ways to use the jQuery css method? Feel free to suggest by commenting below.

How to use the jQuery insertAfter() method

Let’s consider an example. This example assumes that we have few divs with class applied to each of them & these divs are held in another “container” div for easy manipulation. So what we are going to do is have an individual button that will let you add content insertAfter the red and orange div. We also have another button that will reset the div back to their original state, once the jquery insertAfter method has been used on them dynamically.

Example: Here is the complete source code that shows how to use the insertAfter method in jQuery

<html>
<head>
<title>jQuery .insertAfter() method Examples</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.red {
background-color: #FFA6A6;
border: 1px solid red;
margin: 10px;
}
.green {
background-color: #CEFFCE;
border: 1px solid green;
margin: 10px;
}
.grey {
background-color: #EEEEEE;
border: 1px solid #CCC;
margin: 10px;
}
.orange {
background-color: #FF9900;
border: 1px solid #F60;
margin: 10px;
}
.blue {
background-color: #0099FF;
border: 1px solid #06C;
margin: 10px;
}
.purple {
background-color: #9966FF;
border: 1px solid #90F;
margin: 10px;
}
</style>
</head>

<body>

<div class="divs_container">

<div id="mydiv1" class="red">
This is my 1 div

<div id="mydiv2" class="green">
This is my 2 div
</div>

</div>

<div id="mydiv3" class="grey">
This is my 3 div
</div>

<p>&nbsp;</p>

<div id="mydiv4" class="orange">
This is my 4 div

<div id="mydiv5" class="blue">
This is my 5 div
</div>

<div id="mydiv6" class="purple">
This is my 6 div
</div>

</div>

</div>

<input type="button" name="sbt_insertAfter_green" id="sbt_insertAfter_green" value="Add Grey Div insertAfter Green">

<input type="submit" name="sbt_remove" id="sbt_remove" value="Undo">

<input type="button" name="sbt_insertAfter_orange" id="sbt_insertAfter_orange" value="Add Purple Div insertAfter Orange">
<script type="text/javascript" language="javascript" >

$(document).ready(function(){

var divs_container_html = $(".divs_container").html();

//Add Gray Div after Green
$('#sbt_insertAfter_green').on("click", function(){

$('.green').insertAfter($('.grey'));

});

//Add Orange Div after Purple
$('#sbt_insertAfter_orange').on("click", function(){

$('.orange').insertAfter($('.purple'));

});

//Reset the divs back to their original state
$('#sbt_remove').on("click", function(){

$(".divs_container").html(divs_container_html);

});

});

</script>
</body>
</html>

Difference between jquery .after() and jquery .insertAfter()

In jQuery, the .after() and .insertAfter() methods have the same functioanlity. However, the main difference lies in the syntax. To be more precise, the syntax varies, in the placement of the content and target. Here’s an easy represenatation for your understanding:

Using jQuery .after();

$('target_selector').after(new_content);

Using jQuery .insertAfter();

$('new_content').insertAfter('target_selector');

Where the new_content can be a div, an image, HTML content, etc. If you would like a technical explanation of the above, here it is:

When .after() is used, the target selector appears before the method and the new content appears after the method.

When .insertAfter() is used, the target selector appears after the method and the new content appears before the method.

Hope that explains it!

That’s it for now!

Do you know of any other ways to use .insertAfter() method using jQuery? Feel free to suggest by commenting below.

How to use the jQuery after() method

Let’s consider an example. This example assumes that we have few divs with class applied to each of them & these divs are held in another “container” div for easy manipulation. So what we are going to do is have an individual button that will let you add content after the red and orange div. We also have another button that will reset the div back to their original state, once the jquery after method has been used on them dynamically.

Example: Here is the complete source code to use the .after() method in jQuery

<html>
<head>
<title>jQuery .after() method Examples</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.red {
background-color: #FFA6A6;
border: 1px solid red;
margin: 10px;
}
.green {
background-color: #CEFFCE;
border: 1px solid green;
margin: 10px;
}
.grey {
background-color: #EEEEEE;
border: 1px solid #CCC;
margin: 10px;
}
.orange {
background-color: #FF9900;
border: 1px solid #F60;
margin: 10px;
}
.blue {
background-color: #0099FF;
border: 1px solid #06C;
margin: 10px;
}
.purple {
background-color: #9966FF;
border: 1px solid #90F;
margin: 10px;
}
</style>
</head>

<body>

<div class="divs_container">

<div id="mydiv1" class="red">
This is my 1 div

<div id="mydiv2" class="green">
This is my 2 div
</div>

</div>

<div id="mydiv3" class="grey">
This is my 3 div
</div>

<p>&nbsp;</p>

<div id="mydiv4" class="orange">
This is my 4 div

<div id="mydiv5" class="blue">
This is my 5 div
</div>

<div id="mydiv6" class="purple">
This is my 6 div
</div>

</div>

</div>

<input type="button" name="sbt_after_green" id="sbt_after_green" value="Add Grey Div after Green">

<input type="submit" name="sbt_remove" id="sbt_remove" value="Undo">

<input type="button" name="sbt_after_orange" id="sbt_after_orange" value="Add Purple Div after Orange">

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

var divs_container_html = $(".divs_container").html();

//Add Grey Div after Green
$('#sbt_after_green').on("click", function(){

$('.green').after($('.grey'));

});

//Add Purple Div after Orange div
$('#sbt_after_orange').on("click", function(){

$('.orange').after($('.purple'));

});

//Reset the divs back to their original state
$('#sbt_remove').on("click", function(){

$(".divs_container").html(divs_container_html);

});

});

</script>
</body>
</html>

That’s it for now!

Do you know of any other ways to use .after() method using jQuery? Feel free to suggest by commenting below.

How to use jQuery appendTo method

Here’s a simple example to use the appendTo() method. This example assumes that we have 2 main divs with class “red” & “green” applied to them & these divs are held in another “container” div for easy manipulation. So what we are going to do is have 2 individual buttons that will let you appendTo the red div to green div and vice-versa. We also have another button that will reset the divs back to their original state, once the jquery appendTo method has been used on them dynamically.

Example for .appendTo() method:

Here is the complete source code:

<html>
<head>
<title>jjQuer .appendTo() method Examples</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.red {
background-color: #FFA6A6;
border: 1px solid red;
margin: 10px;
}
.green {
background-color: #CEFFCE;
border: 1px solid green;
margin: 10px;
}
</style>
</head>

<body>

<div class="divs_container">

<div id="mydiv1" class="red">This is my 1 div</div>

<div id="mydiv2" class="green">This is my 2 div</div>

</div>

<input type="button" name="sbt_append_g2r" id="sbt_append_g2r" value="Append Green Div to Red">
<input type="submit" name="sbt_remove" id="sbt_remove" value="Unappend/Remove">
<input type="button" name="sbt_append_r2g" id="sbt_append_r2g" value="Append Red Div to Green">

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

var divs_container_html = $(".divs_container").html();

//Append Green Div to Red
$('#sbt_append_g2r').on("click", function(){

$('.green').appendTo($('.red'));

});

//Append Red Div to Green
$('#sbt_append_r2g').on("click", function(){

$('.red').appendTo($('.green'));

});

//Reset the divs back to their original state
$('#sbt_remove').on("click", function(){

$(".divs_container").html(divs_container_html);

});

});

</script>
</body>
</html>

Difference between jquery .append() and jquery .appendTo()

In jQuery, the .append() and .appendTo() methods have the same functioanlity. However, the main difference lies in the syntax. To be more precise, the syntax varies, in the placement of the content and target. Here’s an easy represenatation for your understanding:

Using .append();

$(target).append(new_content);

Using .appendTo();

$(new_content).appendTo(target);

Where the new_content can be a div, an image, HTML content, etc. If you would like a technical explanation of the above, here it is:

When .append() is used, the container into which the content is inserted appears before the method.

When .appendTo() is used, the container into which the content is inserted appears after the method.

That’s it for now!

Do you know of any other ways to use .appendTo() method using jQuery? Feel free to suggest by commenting below.

How to use jQuery append method

So let’s see how to use the .append() method with a simple, easy to follow example. This example assumes that we have 2 main divs with class “red” & “green” applied to them & these divs are held in another “container” div for easy manipulation. So what we are going to do is have 2 individual buttons that will let you append the red div to green div and vice-versa.  We also have another button that will reset the divs back to their original state, once the append method has been used on them dynamically.

Here is the complete source code:

<html>
<head>
<title>Easy examples for using the .append() method in jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.red {
	background-color: #FFA6A6;
	border: 1px solid red;
	margin: 10px;
}
.green {
	background-color: #CEFFCE;
	border: 1px solid green;
	margin: 10px;	
}
</style>
</head>

<body>

<div class="divs_container">

<div id="mydiv1" class="red">This is my 1 div</div>

<div id="mydiv2" class="green">This is my 2 div</div>

</div>

<input type="button" name="sbt_append_g2r" id="sbt_append_g2r" value="Append Green Div to Red">
<input type="submit" name="sbt_remove" id="sbt_remove" value="Unappend/Remove">
<input type="button" name="sbt_append_r2g" id="sbt_append_r2g" value="Append Red Div to Green">

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

	var divs_container_html = $(".divs_container").html();

	//Append Green Div to Red
	$('#sbt_append_g2r').on("click", function(){

		$('.red').append($('.green'));

	});

	//Append Red Div to Green
	$('#sbt_append_r2g').on("click", function(){

		$('.green').append($('.red'));

	});	

	//Reset the divs back to their original state
	$('#sbt_remove').on("click", function(){		

		$(".divs_container").html(divs_container_html); 

	});		

});

</script>
</body>
</html>

That’s it for now!

Do you know of any other ways to use jQuery append method? Feel free to suggest by commenting below.

How to Iterate Over Array using for each loop in jQuery

Consider that we have an array of fruits names and we want to iterate over this array so that we can alert the individual values of this array.

Example: HTML source for iterating over array using for each loop in jQuery

<html>
<head>
<title>Iterate Over Array using for each loop in jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>
<p>
<label>
<input type="checkbox" name="fruits[]" value="Apple" id="fruits_0">
Apple</label>
<br>
<label>
<input type="checkbox" name="fruits[]" value="Mango" id="fruits_1">
Mango</label>
<br>
<label>
<input type="checkbox" name="fruits[]" value="Watermelon" id="fruits_2">
Watermelon</label>
<br>
<label>
<input type="checkbox" name="fruits[]" value="Strawberry" id="fruits_3">
Strawberry</label>
<br>
</p>
<input type="submit" name="sbt_alert_all" id="sbt_alert_all" value="Alert each elements of array">
<input type="submit" name="sbt_alert_checked" id="sbt_alert_checked" value="Alert Checked elements">
<input type="submit" name="sbt_alert_unchecked" id="sbt_alert_unchecked" value="Alert Unchecked elements">
</body>
</html>

Now I am going to show you ways to access the array values and indices based upon the situation, when the button is clicked. Following are the jQuery source codes for each case.

Example 1: Iterate Over Array and alert all values along with array key/index number

<script type="text/javascript">
//Alert all values along with array key/index number</pre>
$('#sbt_alert_all').on("click", function(){

$('input[name="fruits[]"]').each(function(index) {
alert(index + ': ' + $(this).text() + $(this).val() );
});

});

</script>

Example 2: Iterate Over Array and alert all CHECKED values along with array key/index number

<script type="text/javascript">

//Alert all checked values along with array key/index number
$('#sbt_alert_checked').on("click", function(){

$('input[name="fruits[]"]:checked').each(function(index) {
alert(index + ': ' + $(this).text() + $(this).val() );
});

});

</script>

Example 3: Iterate Over Array and alert all UNCHECKED values along with array key/index number

<script type="text/javascript">
//Alert all unchecked values along with array key/index number
$('#sbt_alert_unchecked').on("click", function(){

$('input[name="fruits[]"]:not(:checked)').each(function(index) {
alert(index + ': ' + $(this).text() + $(this).val() );
});

});

</script>

That’s it!

Do you know of any other ways to iterate over array elements using for each loop / for loop in jQuery? Feel free to suggest by commenting below.

Examples to Add Class, Remove Class, Change Class, Toggle Class, Check if has Class using in jQuery

Let’s assume that we have a div with ID “my_div“. Now we will see how we can add a class, replace existing class, remove applied class, check to see if it has a specific class & toggle class using jQuery with relevant examples.

Here is the HTML source code common for all examples below:

<html>
<head>
<title>Add Class, Remove Class, Toggle Class using jQuery</title>
<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>
<style type="text/css">
.green {
background-color: #B3FFB3;
}

.red {
background-color: #FFBFBF;
}
</style>
</head>

<body>

<div id="my_div">This is my div</div>

<input type="submit" name="add_class" id="add_class" value="Add Class Green">
<input type="submit" name="remove_class" id="remove_class" value="Remove Class Green">
<input type="submit" name="has_class" id="has_class" value="Has Class Red?">
<input type="submit" name="toggle_class" id="toggle_class" value="Toggle Red Class">

</body>
</html>

Example 1: Add a class to div using .addClass() method in jQuery

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

//Add a class to the div
$('#add_class').click( function(){

$('#my_div').addClass('green');

});

});

</script>

Example 2: Remove an already applied class from the div using .removeClass() method in jQuery

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

//Remove an already applied class from the div
$('#remove_class').click( function(){

$('#my_div').removeClass('green');

});

});

</script>

Example 3: Check if a class has already been applied or not using .hasClass() method in jQuery

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

//Check if a class has already been applied or not. Alerts true if has class or false if it does not have class
$('#has_class').click( function(){

alert( $('#my_div').hasClass('red') );

});

});

</script>

Example 4: Toggle an existing class of the div with a new class using .toggleClass() method in jQuery

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

//Toggle an existing class of the div with a new class
$('#toggle_class').click( function(){

$('#my_div').toggleClass('red');

});

});

</script>

In order to test the above example, if there’s no class applied to div and you click on the ‘Toggle Red Class’ button, that will apply the red background color to the div. If you click on the button again, that will remove the red background color and thus make it a transparent background.

However, if you now click on the ‘Add Class Green’ button & then click on ‘Toggle Red Class’ button twice, you will notice that when you first click the button, it will remove the green class & apply the red class. When you click the button the second time, it will then remove the red class & apply the class that was previously assigned to the div, i.e. the green class. So in short, Toggle class will simply toggle the recent most class with the class that has been already assigned to the element (if any).

That’s it for now!

Do you know of any other ways to change class i.e. add class, remove class, toggle class, check if has class using jQuery? Feel free to suggest by commenting below.

How to use jQuery Check Class

Let’s assume that we got couple of divs and they have id’s and classes assigned to them. In order to check class of the div, we can use a simple method called hasClass. The following is the full source code of a working example:

Example to Check if element has Class using jQuery

<html>
<head>
<title>jQuery check if element has class</title>
<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>
</head>

<body>

<div id="mydiv1" class="my_class1">This is my 1 div</div>

<div id="mydiv2" class="my_class2">This is my 2 div</div>
<script type="text/javascript" language="javascript" >

$(document).ready(function(){

//The first div has the my_class1 applied to it, so the following will alert true
alert( $('#mydiv1').hasClass('my_class1') );

//The second div does NOT have the my_class345 applied to it, so the following will alert false
alert( $('#mydiv2').hasClass('my_class345') );

});

</script>
</body>
</html>

When you run the above code, you should be able to see 2 alerts. The first one would alert true & the second one would alert false. I have left comments above the relevant lines in the source code for your guidance.

Don’t you think it’s simple?

Do you know of any other ways to check if an element has a specific class or not using jQuery? Feel free to suggest by commenting below.

How to Count Elements with Class using jQuery – Examples

Let’s assume that we got few divs in our web page and they all have a class of “my_class” applied to them. In such a case, we can count the number of divs easily. Following is the complete code (HTML + jQuery):

Example: Count Elements with Class using jQuery

<html>
<head>
<title>Example</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.my_class {
	background-color: #DBF0FF;
	border: 1px solid #06F;
}
.my_class2 {
	background-color: #FFDF9D;
	border: 1px solid #F90;
}
.my_class3 {
	background-color: #D7FFD7;
	border: 1px solid #090;
}

</style>
</head>

<body>

<div class="my_class">This is my 1 div</div>

<div class="my_class">This is my 2 div</div>

<div class="my_class">This is my 3 div</div>

<div class="my_class2">This is my 4 div</div>

<div class="my_class2">This is my 5 div</div>

<div class="my_class3">This is my 6 div</div>

<p>
  <input type="submit" name="sbt_count" id="sbt_count" value="Count all divs that have .my_class (blue color background) applied to them ">
</p>

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

	$('#sbt_count').on("click", function(e){		

		alert( $('.my_class').length );

		e.preventDefault();

	});		

});

</script>
</body>
</html>

Simple, isn’t it?

Do you know of any other ways to get the count of elements with specific class using jQuery? Feel free to suggest by commenting below.