Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Useful jQuery snippets

Monday, January 11th, 2016 by Servage

jQuery- Write Less, Do MoreWhen building websites you are likely to encounter the jQuery Javascript framework. It is a great library that allows you to build functionality in Javascript better and faster. It basically enables you to programmatically change the DOM by adding, editing and removing elements. Furthermore you can engage with events such as hover, click, scroll, and more. Lastly the ability for Javascript to perform requests to the backend server, thus working with data in the manipulation of the DOM is the cornerstone for web applications. Working with jQuery makes it significantly easier to build great websites.

Snippet library

The following list contains a few examples of jQuery snippets that are great to know. They are meant as an inspiration for the use and demonstration of the capabilities of Javascript and jQuery. The examples are just a few of many in this jQuery snippet library, and you can have a look there for many more examples. If you do not know jQuery yet, then it is strongly recommended that you learn it – or a similar Javascript-based system – so you can do more with your web projects.

Adding and removing a CSS class on hover

The ability to add and remove a CSS class on hover gives you stronger capabilities when working with hover effects. Furthermore you could essentially change the class of another element, when hovering something.

$('#elm').hover(
  function(){ $(this).addClass('hover') },
  function(){ $(this).removeClass('hover') }
)

Checking if a checkbox is checked or not

This could be used to validate that “Terms of service” have been checked before moving on in a sign up form.

if ( $('#checkBox').attr('checked') )
{
  // Do something...
}

Preload images you need later

If some images are used in effects on the page, then you can preload them, so that the browser already has them ready when the effect is executed. Otherwise you may experience undesired waiting while loading images when the effect should occur.

$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preloadImages("image1.jpg","image2.jpg");

Validate a person’s age

You often see this on websites with restricted content, but could adapt this check to suit any other age-validating requirement.

$("#age-form").submit(function(){
  var day = $("#day").val();
  var month = $("#month").val();
  var year = $("#year").val();
  var age = 18;
  var mydate = new Date();
  mydate.setFullYear(year, month-1, day);

  var currdate = new Date();
  currdate.setFullYear(currdate.getFullYear() - age);
  if ((currdate - mydate) < 0){
    alert("Sorry, only persons over the age of " + age + " may enter this site");
    return false;
  }
  return true;
});

There are many use-cases for small functions in Javascript and jQuery, and the examples above illustrate how working with jQuery makes is easy to work with the DOM.

Useful jQuery snippets, 3.0 out of 5 based on 4 ratings
Categories: Tips & Tricks

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.