10 Simple and handy jQuery Snippets

jquery snippets you would regularly use

Following is the list of 10 jQuery code snippets that I have put together from my experience of daily use. You may save and copy to use according to your requirements. I hope you find them beneficial and they help in cutting code time.

jQuery AJAX Request

Sending requests using the jQuery AJAX is one of the most common functions used. The syntax could be very confusing to memorize and if you look at the jquery documentation, you would need to spend some time to get the right snippet to copy. So, consider copying this and using it in your next project.

$.ajax({
 type: ‘POST’,
 url: ‘server.php’,
 data: “option=”+postvar
 success: function(data){
 },
 error: function() { 
 }
});

jQuery Hover

This is a very handy jQuery function for determining if the cursor is hovered over the element or is just leaving the element. This small snippet covers both the events at the same time.

$(“#divid”).hover(
 function () {
 // code on hover
 },
 function () {
 // code when not hover
 }
);

Update HTML on select change

A lot of times, it is required to change the HTML of the div based on the select option. This could be a very useful snippet.

$(function () {
 $(‘#select_ID’).change(function () {
 var selected = $(this).val();
 $(“.item_to_hide”).hide();
 $(‘#’+selected).show();
 });
});

Load External Content

You can pull external HTML code from a file or external webpage right into your webpage. This is different from the AJAX class. This is made to get the external webpage or HTML to load in the DOM element on your webpage.

$(“#div”).load(“requesthtml.php”, function(response, status, xhr) {
 if(status == “error”) {
 alert(“error”);
 }
});

Add Class, Remove Class and Toggle Class

Adding and removing CSS classes on HTML elements is another very common action. You can use addClass() to add a CSS class and removeClass() to remove it. There is another function called toggleClass() which is faster and can be used to replace both addClass() and removeClass().

$(‘a’).addClass(‘selected’);
$(‘a’).removeClass(‘selected’);
$(‘a’).toggleClass(‘selected’);

Scroll to top of the browser window

This function is used to make the window scroll to top of the page. If you have a webpage that uses infinite scroll towards the bottom, this could be used to make the user reach the top of the page in one click.

$(“a”).click(function() {
 $(“html, body”).animate({ scrollTop: 0 }, “slow”);
 return false;
});

Disable Scrolling

A very likely scenario of this snippet could be using an overlay and you dont want the user the window to scroll when the overlay is open.

$(document).bind(“touchmove”,function(event){
 event.preventDefault();
});

jQuery Device Detection

With a lot of websites moving towards responsive design, there are times when CSS media queries are not enough to cover the functionality. This little jQuery little snippet would help you determine which device is being used to open your website.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
 // Do something
} else {
 // Do something else
}

Fix broken images

We have times when we have broken images on our website and it is not practical to replace them one by one. Using this simple piece of code can save you a lot of time.

$(‘img’).error(function(){
$(this).attr(‘src’, ‘errorImageLoad.png’);
});

Stop Anchor Links from Loading

Sometimes you don’t want links to perform their normal functionality and want them to run another function on click. This piece of code will help to prevent the default action.

$(‘a.linkclass’).click(function(e){
e.preventDefault();
});