jQuery Tutorial For Beginners With Examples 1/3

jQuery Tutorial For Beginners With Examples 1/3

Rapid and smooth introduction to the use of libraries JS fashionable. Or how to add a layer of interaction simply and cleanly to your pages. Here the jQuery tutorial for beginners with examples.

Note  : this post will be divided into three parts.

jQuery Tutorial For Beginners With Examples 1/3

jQuery Tutorial For Beginners With Examples 2/3

jQuery Tutorial For Beginners With Examples 3/3


Introduction

jQuery is a library JS developed primarily by John Resig .

For library it intends a consistent set of features to overcome the grunt and repetitive tasks consistently on the most common browsers.

It is licensed under GPL and MIT , and therefore completely reusable on professional work. Its weight is compressed to 14  KB , which is quite reasonable on most of our projects.

The supported browsers are:

  • Firefox 1.5+
  • Internet Explorer 6+
  • Safari 2.0.2+
  • Opera 9+

The library is used for example on sites like:

  • Dell
  • Google Code
  • Digg
  • NBC
  • Amazon
  • Mozilla
  • WordPress
  • Drupal
  • SPIP
  • The Zend Framework
  • etc.

Furthermore this library is compatible (it does not conflict) with others.


Prerequisites

These notions are you are familiar:

  • JavaScript (events, etc. )
  • DOM (nodes, tree, etc. )
  • CSS (selectors, etc )
  • AJAX

Bases

Call

Typically, the call to the library will be as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
         <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=iso-8859-15" />
         <title>Exemple</title>
         <script type="text/javascript" src="./js/lib/jquery.js"></script>
         <script type="text/javascript" src="./js/example.js"></script>
     </head>
     <body>
         &hello;
     </body>
 </html> 

At First, It will load the jQuery library, then our file example.js that will contain our scripts.

Compression

jQuery is available in three formats:

  • Without compression (93  KB )
  • Compressed using packer (28  KB )
  • Compressed using JSMin then gzip (15  KB )

It will be necessary to call the lightest format in a production environment , but it is still possible to browse the library in its uncompressed version.

Function jquery()

jQuery is based on a single function:  jQuery() or  $().

Like all JavaScript functions it accepts parameters and returns an object, which we will call later “jQuery object.”

Regarding the accepted parameters, we can pass:

A function

In this case, jQuery will execute this function when the page is loaded by the browser. Specifically, when the DOM is loaded.

This is why one capsule often all code written in jQuery:

$(function(){
   // ...
}); 

This ensures that the code will be executed once the page loads, and it is safe to manipulate the DOM without error. Unlike the event window.onload, the full loading of the page images is not necessary.

A string (query)
Selectors CSS

A major strength of jQuery is to integrate the selector syntax CSS . It is easy to easily target nodes DOM of interest.

For example :

var menu_object_jQuery = $("#menu_image");
var menu_object_jQuery = $("#menu a"); 

Or :

var menu_object_jQuery = $("#id > .class, #id td:last-child"); 

Note in passing that contrary to the support CSS browsers, the library totally understand the pseudo-classes and pseudo-elements .

See the documentation selectors CSS

JQuery selectors

There are specific to jQuery selectors that are not equivalencies in CSS . However, they are very convenient. For example :

var mneu_objet_jQuery = $('tr:odd td');

etc .

See the documentation of jQuery selectors


Methods

Now that we have a jQuery object, we have to use it. And for this a whole range of methods are available in the library: handling of DOM , the CSS , events and other visuals.

If one wishes for example progressively hide sections of a page, use:

$("p").hide(); 

Either without setting as either specifying a time in mili-seconds or with chains slow, fast and normal.

Two other examples:

$("li").html("This is <strong>blue</strong> color");
$("#menu a").click(function(){
     window.open($(this).attr("href"));
     return false;
}); 

In the latter, you will notice that combines “classic” JavaScript functions in jQuery code, but also that transforms the current object this object with jQuery $(this).

The set of methods and publications are available on Visual jQuery .


Callback

Some functions (such as function fadeOut()) accept another function as a parameter. The latter will be executed at the end of the execution of the first.

This allows for example to create animations:

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

This is what we call a callback.


Chaining

We saw the jQuery methods return a jQuery object. This allows for “chaining” functions.

So instead of writing:

$(".content").append("a text");
$(".content").css("border","1px solid red");
$(".content").addClass("warp");
$(".content").removeClass("content"); 

Can be simplified by running the code by:

$(".content").append(" a text").css("border","1px solid red").addClass("warp").removeClass

 

jQuery Tutorial For Beginners With Examples 2/3


Note  : this post will be divided into three parts.

jQuery Tutorial For Beginners With Examples 1/3

jQuery Tutorial For Beginners With Examples 2/3

jQuery Tutorial For Beginners With Examples 3/3

Lucid Kit

Related Posts
Leave a reply
Captcha Click on image to update the captcha .