CODE LAB: 10 Useful jQuery Code Snippets for Web Developers in 2019

Query is one of the top javascript library in the world. I have been using this jQuery library for the last 10 years. I’m going to share most useful jquery code snippets where you can copy and use it in your projects immediately without reinventing the wheel. These jquery code snippets are easy to use and I hope it will adapt to match on your requirements.

By using these code snippets you can save your pretty valuable time when developing user interfaces. Just copy the jquery code snippets and make your website with pretty nice effects

Replace Broken Images If your web page has lot of images. Sometimes the image isn’t available, so a broken image is displayed in the browser.
How do I find and replace that broken images using jQuery? Check below code to replace all broken images.

										
$("img").on("error", function () {
$(this).attr("src", "broken.gif");
});
										
										

Preload all images Below script will preload the images using jQuery

										
function preloadImages(arrayOfImages) {
		$(arrayOfImages).each(function(){
		$('')[0].src = this;
		});
		}

		// Usage:

preloadImages([
		'img/1.jpg',
		'img/2.jpg',
		'img/3.jpg'
]);
												
										

Prevent Users from Submitting the Form Twice This below code will work perfect even on forms that have multiple submit buttons

										
$(document).ready(function(){
		var $myForm = $("#formID");
		$myForm.submit(function(){
				$myForm.submit(function(){
				return false;
				});
		});
});
												
										

Get Client IP address ipinfo.io is FREE for 1000 requests a day. We can easily get more details about geo location from this API

										
$(document).ready(function () {
		$.getJSON("http://jsonip.com/?callback=?", function (data) {
		console.log(data);
		alert(data.ip);
		});
});
												
										

Check If a Checkbox is Checked in jQuery By using jQuery’s is() function, we can achieve this functionality

										
$(document).ready(function () {
if($(element).is(':checked')) {
// checked
} else {
// unchecked
}
});
												
										

Count No of Rows in a Table Below code is used to count the number of tr elements within the table

										
$(document).ready(function () {
var rowCount = $('#myTable tr').length;
});
												
										

Lowercase and Uppercase with jQuery

										
$(document).ready(function () {
$('#selector').val().toLowerCase();
$('#selector').val().toUpperCase();
});
												
										

Check If an Element has a CSS Class

										
$(document).ready(function () {
$("#selector").hasClass(className);
$(".selector").hasClass(className);
});
												
										

Toggle class on hover We usually want to change the visual of a clickable element on our page when the user hovers over and this jQuery snippet does just that, it adds a class to your element when the user is hovering and when the user stops it removes the class, so all you need to do is add the necessary styles in your CSS file.

										
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
												
										

Make two divs the same height Sometimes you want two divs to have the same height no matter what content they have in them, this little snippet enables just that; in this case it sets the min-height which means that it can be bigger than the main div but never smaller. This is great for masonry like websites.

										
$(‘.div').css('min-height', $(‘.main-div').height());