Vital jQuery Code Snippets That Every Front End Developer Must Know

jQuery is a dynamic JavaScript library which has offered numerous simple features to the developers. The simple event handling, DOM traversal, and manipulation are few features which are highly adopted by web developers of this library. The best feature of jQuery is that it enables developers to implement complex UI functions without writing long series of codes.

It doesn’t matter whether you are a new or professional jQuery coder, there are few jQuery code snippets present over the web which you are bound to use again and again. So, in this post, we will compile all the vital jQuery code snippets that front-end developers should learn by heart as they are going to use them a lot.

Load external content

If you want to download your external content from some other domain? Then, that’s possible with jQuery, so simply with jQuery, you can break the cross-domain barriers by the following manner;

$(“#content”).load(“fileoutside.html”, function(response, status, my) {

 // error handling

 if(status == “error”) {

   $(“#content”).html(“An error occured: ” + my.status + ” ” + my.statusText);

 }

});

Back to top button

Well, you might have seen numerous websites with the “back to top button” option. This button gives smooth and nice browsing experience to the users. Users can easily browse the sites with this button, so if you want to include this button on your website as well, then you don’t have to do much. Just using this simple jQuery code you can get  your back to a top button ;

// Back To Top

$(‘a.up’).click(function(){

$(document.body).animate({scrollTop : 0},875);

return false;

});

//Create an anchor tag

<a class=”up” href=”#”>Go to Top</a>

Swap Input Field

Every website has certain text fields. These text fields give the user information about what they’re meant for. Like, as numerous websites have an input field with the “Name” as default text and this text disappear when user click on the field. To add similar kind of feature to your website, you just have to put this jQuery code;

<div>

<input type=”text”

name=”MyInputField”

value=”JobTitle”

title=”Job” />

</div>

Disabling input fields

In some cases, you might want to fully disable some text fields instead of swapping the field. So, if you want to disable field until the user completes particular actions, then you have below-mentioned jQuery code for it;

$(input[type=”submit”]’).attr(“disabled”, true);

Now, in order to enable the disabled attribute, use the following line of code:

$(input[type=”submit”]’).removeAt

On hover add & Remove a class

If you want to change the visual of the clickable element of your site when the user hovers over it. Like, you can add cool hover on a div to enhance the visual appearance of your website. Unfortunately, there are few web browsers present who doesn’t allow such features to be embedded with pure CSS. However, using the below mentioned simple jQuery code this function can be supported by all web browsers;

view plaincopy to clipboardprint?

$(‘.onhover’).hover(  

function(){ $(this).addClass(‘hover_class’) },  

function(){ $(this).removeClass(‘hover_class’) }  

)  

Disabling right click

If you want to disable right click function of your site due to some security reasons, then you can easily do that by following this code snippet;

<!– jQuery: Disabling Right Click –>

$(document).bind(“contextmenu”,function(e){

e.preventDefault();

});

Fix broken images

If you have been seeing broken image links on your site, then you don’t have to replace all image links one by one. Because that’s a daunting and time-consuming task, so just put this code and save yourself from lots of hassle;

$(‘img’).error(function(){

$(this).attr(‘src’, ‘img/default.jpg’);

});

So, we truly hope that readers this useful jQuery code snippets list help you a lot. Just keep following us and we will keep sharing such an amazing and helpful stuff.

Send a Message