How to save time with jQuery

[Neo]

jQuery is a popular JavaScript library that greatly simplifies developing advanced JavaScript applications. It is extremely powerful and lightweight at the same time. I've been using it for the first time on a current project, and I really like it.

jQuery supports all major browsers, has a small file size, and is used by major websites such as Google! Here is the description from their website:

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development."

As described, jQuery does all the hard work with traversing the DOM, working with events, some nice animation effects, and AJAX functions. Things that would take several lines of JavaScript can be reduced to one line. Take this example where we change the font color in all div tags that do not have the "ignore" class:

Code: Select all

// without jQuery
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++) {
  if(divs[i].className != 'ignore') {
    divs[i].style.color = "#FF0000";
  }
}
 
// with jQuery
$("div").not(".ignore").css('color', '#FF0000'); 

As you can see, 6 lines becomes 1 line. Instead of looping through each element and checking its class ourselves, we just tell jQuery what we want to do in a concise language. This really speeds up development and reduces duplicate code, and that's what jQuery is all about. Selecting and modifying elements in the DOM tree is one thing, but what about complex things like AJAX? Well, allow me to demonstrate with another example, where we fill the contents of a div tag with the output of menu.php:

Code: Select all

// without jQuery
function getMenu(page, item) {
  var HttpRequestObject = false;
  if(window.XMLHttpRequest) {
    HttpRequestObject = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {
    HttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if(HttpRequestObject) {
    var div = getElementById('target');
    HttpRequestObject.open('GET', 'menu.php?page=' + page + '&item=' + item, true);
    HttpRequestObject.onreadystatechange = function() {
      if(HttpRequestObject.readyState == 4 && HttpRequestObject.status == 200) {
        div.innerHTML = HttpRequestObject.responseText;
      }
    }
    HttpRequestObject.send(null);
  }
}
 
// with jQuery
function getMenu(page, item) {
  $.get('menu.php', { 'page': page, 'item': item }, function(data) {
    $("#target").text(data);
  });
}
 

Its functionality can also be extended using plugins. One such plugin is jQuery UI, which allows you to easily add fancy controls to your project. You can see many examples of what UI can do, such as draggable items, date pickers, accordions, tabs, sliders, and more.

If you are a JavaScript coder and haven't yet checked out jQuery, it might be worth checking out!