JQuery - Basics

After the post on prototype I thought I might just present the features of jQuery. Just as for prototype I first summarize the features of JQuery, then I describe in a little more details these features. The informations from this entry come from the jQuery API.

• simple on load execution mechanism
• simple query mechanism using selectors and syntactic sugar $()
• Simple Ajax functions and Helpers
• Manipulation of the DOM elements
• visualization effects
• Dimensions Utilities
• Data Storage and manipulation utilities

simple on load execution mechanism

JQuery provides a way to load code directly on load, by using the .ready() function. In that way, it is possible to initialize a certain number of elements once the web page is ready.

$(document).ready(function() {
  // Handler for .ready() called.
});

Simple Query Mechanism using Selectors and Syntactic Sugar $()

As prototype and other frameworks provide, jquery provides the means of selecting elements using css selectors. The function to use for this is the jQuery() function ( or its equivalent syntactic sugar: $()).

Simple Ajax functions and Helpers

jQuery provides a simple framework to perform Ajax Queries of the sort:

$.ajax({ url: "urltocall",
  context: document.body,
  success: function(){
  // code to perform when the ajax query has been a success
}}
);

Some callback functions can be given as parameters, in order to act depending on the result of the call. In the previous example, the function success is a callback function used when the Ajax request was successful. Other possibility is for example error. But also the request parameters can be changed before the HttpRequest is sent to the server.

Manipulation of the DOM Elements

jQuery provides a great number of utility methods to interact with DOM elements retrieved for instance with the CSS selectors mentioned earlier. For instance, you can add a title ( here an h2 element ) to all elements of the class container.

$('.container').append($('h2'));

Other possibilities is to prepend, the content to an element.

Two other methods can be useful: html() and text() which return respectively the HTML content or the text content of the element or its child elements.

Visualization Effects

JQuery provides the possibility to animate the elements of the page. For example, if the user clics on an elements a small animation can be displayed to inform the user that something actually occurs.

jQuery('#elementToClick').click(function() {
  $('#elementToAnimate').animate({
   opacity: 0.35,
   left: '+=20',
   height: 'toggle'
  }, 5000, function() {
  // the code called once the animation is finished
  });
});

Dimensions Utilities

JQuery provides a number of useful methods to determinate the dimensions of objects. See for example:

$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document

Other methods are for example width(), innerHeight() and innerWidth()

Data Storage and manipulation Utilities

// code to add data to an element elementToStoreData
$('elementToStoreData').data('age', 52);
$('elementToStoreData').data('nameInfo', { firstName: 'Mark', lastName: 'MacGuire });
// code to remove the data from the element elementToStoreData
$('elementToStoreData').removeData('age');
$('elementToStoreData').removeData('nameInfo');
$('elementToStoreData').removeData(); // removes all entries stored in this Element

Visit the API page for more informations.