JQuery - Plugins

JQuery is a framework designed with extensions or plugins in mind. There is a large number of plugins which can be found at the plugin page.

In this entry, I will try to select and explain some of the main useful plugins.

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.

Use JQuery in firebug with jQueryfy

Here is a great presentation on how to use firebug to test interactively jquery.

JQueryfy is a bookmarklet to load jquery in any web page easily.

So all you have to do is:

1. go to some web page.
2. Load Jquery with jQueryfy
3. then start firebug

Then go to the console of firebug, and type jQuery(). This should return
"function()".

In order to have all the images disappear for example, you can use:
jQuery('img').hide()

Of course you need to use a correct selector for your queries. But isn't that just great ?

Note: I had to update my version of firebug to have all this working.