Introduction to jQuery

To use jQuery we need to get the library from one of those sites hosting it, for example the JQuery project page, or use the Google Libraries API. We can call the online versions and save server resources or better have our own version to make sure it never goes off.

jQuery library has methods, selectors and events to interact with the page objects and let you make some very nice effects, change or add styles and some other issues with no effort at all. I am going to have a look at it with the basics to get initiated into this amazing library.

Selectors

First of all, to interact with the page objects we need to select them, so that we can know with which object we are working. Like in CSS, we have some commands to select the object we want to change or interact with, so it seems the most important to learn before working with jQuery.

JQuery has the $ funtion that gives you the object or collection of objects that matches your criteria. So $(document) would return the page document, and $(“a”) would return all the a tags found in the document.

That seems easy, but if we want to select with more precision we will need more operators, and we have them. Like with the CSS selectors you can do something like this:

 $(document).ready(function() {
   $("#orderedlist > li").addClass("blue"); // li elements in #orderlist
   $("#orderedlist > li:last").addClass("blue"); //last li in #orderlist
   $("div.green").addClass("blue");     // All the divs with the class green
   $("div:visible").hide(); // All the visible divs
 });

In the first example we are selecting all the child lis that the object with the id orderedlist has, in the second case we are just selecting the last one of those childs. The third case selects all the divs that has the green class (I mean class=”green”), the fourth selects all the visible divs, etc. You can have a look at more options for selecting this way if you want to learn more.

But if you thought that’s all JQuery had to give you, you underestimated this library. You have also some functions you can use to search and select what you need like find, each, filter, closest, end, and many other. Let’s see an example:

 $(document).ready(function() {
   $("#orderedlist").find("li").each(function(i) {
     $(this).append( " BAM! " + i );
   });
 });

Effects

Once you get access to the object you want there are many things you can do, like change its style, its content, the object itself, hide, show, or use some effects that JQuery incorporates and will make your web much more dynamic.

 $(document).ready(function(){
   $("a").toggle(function(){
     $(".stuff").hide('slow');
   },function(){
     $(".stuff").show('fast');
   });
 });

This example will make the div “stuff” hide or show whenever a link is clicked. You can use lots of effects like delay(), slideDown(), slideUp(), fadeOut(), or any of these included in the library, also, you can make your own effects using animate() or create your own effects with a little more javascript and also your own JQuery library making a plugin that will use JQuery library and your own functions to make any effect you may imagine. Here you have a list of 150 amazing effects people has done using JQuery and their own plugins.

Events

I am not sure if it is needed to be said but yes, there are some handlers that you can use to set when an effect or process will be made, like click(), mouseover(), mouseout(), etc. You can have a look at the complete list to know which ones you can use.