Using jQuery

jQuery is a solid JavaScript framework. Among its many advantages:

• Works as expected with numerous web browsers.
• Clear, concise and intuitive architecture.
• Many available plugins.

You can learn more about jQuery on the official website: http://jquery.com/

jQuery's $

jQuery has the $() function, and the $ namespace, which contains all the other functions.

The $() function can be used in many ways:

• When using a function as its parameter, $() will execute the function once the DOM is fully loaded. For instance: $(function(){ /* do something */ });
• When passing a string containing a CSS selector, $() will return all the HTML nodes which match the selector. For instance: $('ul#nav');
  

  • That set of nodes can then be assigned to any of jQuery's methods. For instance, if you wanted to hide the navigation element returned by the above selector: $('ul#nav').slideUp('fast');

• When using pure HTML code as its parameter, $() will create the node (DOM element).

  • That node can, again, be used with any of jQuery's methods: $("<li>Sign Off</li>").appendTo("ul#nav");

You can learn more about jQuery() and $() on the official website: http://api.jquery.com/jQuery/

Functions in jQuery

jQuery's $ namespace contains all the functions that are not attached to a specific node.

Among these are a few Ajax and utilitarian functions. For instance:

$.post('/handler.php', {'action': 'purchase', 'product': 434}, function(data){/* do something */} );

You can attach events to a set of nodes returned by $(). One of the advantages of using jQuery, once again, is that when handling events, it helps you by harmonizing so that you do not have to cater for each browser specifics.

In order to association a function to a click event, simple add .click(function).

In order to generate a click, you can also use .click() with any parameter. For instance: $('#button').click(function(){/* do something */});

You can learn more about jQuery's Ajax and utilitarian function on the official website:

• http://api.jquery.com/category/ajax/ (for instance, http://api.jquery.com/jQuery.post/)
• http://api.jquery.com/category/utilities/

Selectors

jQuery offers two ways to selection elements:

• Combine CSS and XPath selectors in a string, which is used with the $() function. For instance: $("div > ul a")
• Using one of the several methods already available in the jQuery namespace.

These two ways can be combined.

var my_jQuery_object = $("#my_image");
var my_jQuery_object = $("#menu a");
var my_jQuery_object = $("#id > .classe, #id td:last-child"); 
    
/* returns the 'td' elements within the odd 'tr'. */
var my_jQuery_object = $('tr:odd td');
    
/* returns the fourth paragraph. */
var my_jQuery_object = $("p:eq(4)");
    
/* returns the 7 first paragraphs. */
var my_jQuery_object = $("p:lt(8)");

You can learn more about jQuery's selectors on the official website: http://api.jquery.com/category/selectors/

Methods and callbacks

A whole set of methods are available in the standard API: DOM manipulation, CSS manipulation, event management, visual effects, etc.

For instance, if you wish to have all the paragraphs in a page slowly disappears, use this:

$("p").fadeOut();

Some methods (such as the fadeOut() one) accept another method as a parameter. Such a method will be executed once the first one is done. That is called a callback.

For instance:

$(".test").fadeOut("slow",function(){ 
  $(this).fadeIn("slow"); 
});

All of jQuery's methods return a jQuery object. This makes it possible to chain methods, with no limit. You can even write your code so that it reads just like a function block.

For instance, this code works perfectly well, and is easy to read and to update:

$(".emptyContent").append("This is a test")
  .css("border", "1px solid red")
  .addClass("fullContent")
  .removeClass("emptyContent");

A couple other functions

jQuery's API is incredibly complete, and you will spend hours finding new possibilities.

Here is a couple of function that can be tremendously useful when creating a theme.

First, each(), which makes it possible to loop through a list of elements:

$("img").each(function(){ console.log($(this).attr("src")); });

Second, browser, which is an object that helps you know which browser you are working with:

if($.browser.msie) {
  if($.browser.version == 6) {
    // Your IE6 specific code.
  } else {
    // Code for any other IE browser.
  }
}