jQuery

jQueryBasics :

The jQuerylibrary defines a single global function i.e. jQuery(). As this function is been used most frequently so a shortcut is been defined for it i.e. $. The value which is been returned by this function represents a set of zero or more DOM elements and is known as a jQuery object. The jQuery() is a factory function rather than a constructor: it returns a newly created object but is not used with the new keyword and the jQuery objects define many methods for operating on the sets of elements they represent.

Example :

$("p.newContent").css("background-color", "yellow").show("fast");

Explanation :

In the above example, css() method will be operated on the jQuery object returned by $(), and it will return the same object, so that the show() method can be invoked next in a compact “method chain.”
This method chaining idiom is common in jQuery programming.

How to obtain jQuery :

The jQuery library is a free software. we can download it from the http://jquery.com. Once the downloading is done we can include the src it in the script tag as :
< script >
src="jquery-1.4.2.min.js"
</ script >

The min in the file name is the minimised version of the library i.e. the unnecessary comments, whitespaces are been removed and the internal identifiers are been replaced with shorter one's.

And Here goes the another way to use jQuery in your web applications i.e. is to allow a content distribution network to serve it using a URL like (any URL can be used from the below mentioned one's):
            http://code.jquery.com/jquery-1.4.2.min.js
            http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
            http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

But most recommended is to use the downloaded file. where our data will be loaded faster and if the URL is been used sometimes the data may be received late because of network issues.

The jQuery() function :

The jQuery() function is the most important one in jQuery library.  The function can be invoked in four different ways i.e.

         The first way is to invoke $() to pass a CSS selector to it. When it is been called this way, it returns the set of elements from the current document that matches the selector. jQuery supports most of the CSS3 selector syntax, and also some extensions of its own. An element or a jQuery object can be passed as the second argument to $(), it will return only the matching descendants of the specified element or elements. A starting point is been defined for the jQuery by the optional second argument and is often called the context.

The second way is to invoke $() i.e. to pass it to a window or element or document object. It will simply bind the element, document or window in a jQuery object and it will return that specified object. By this it allows us to use jQuery methods to manipulate the element rather than using it as  raw DOM methods. The jQuery programs call $(document) or $(this). 

Example :

jQuery objects can be able to represent more than one element in a document, and you can also pass an array of elements to $(). So, the returned jQuery object represents the set of elements in an array.

         Now third way is to invoke $() i.e. to pass it a string of HTML text. Then the jQuery will create the HTML element or elements described by that text and then it returns a jQuery object representing those elements. If we are passing a plain text when you invoke $() in this way, or jQuery then it will think you are passing a CSS selector. For this format, the string which is been passed to $() must include at least one HTML tag with angle brackets.

       When invoked in this third way, $() will accept an optional second argument. A  Document object can be passed to specify the document with which the elements are to be associated or normally an object can be passed as a second argument. If you do this, the object properties are assumed to specify the names and values of HTML attributes to be set on the object. But if the object is been included with the properties containing any of the following names “css”, “html”, “text”, “width”, “height”, “offset”, “val”, or “data”, or properties that contains the same name as any of the jQuery event handler registration methods, then the  jQuery will invoke the method of the same name on the newly created element and pass the property value to it.

Now, the fourth way to invoke $() is to pass a function to it. The function which is been passed by us 

will be invoked when the document has been loaded and the DOM is ready to be manipulated. This is the jQuery version of the onLoad() function.

jQuery(function() { // Invoked when the document has loaded

// All jQuery code goes here

});

This will be invoked when the document is ready and DOM is ready.

The function which is been passed to jQuery() will be invoked with the document object as its

this value and with the jQuery function as its single argument. This means that we can undefine the global $ function and still use that convenient alias locally with  noconflict() :

jQuery.noConflict(); 

jQuery(function($) { 

});

Difference between $() and querySelectorAll() :

The $() function is similar to the Document method querySelectorAll() that was described both take a CSS selector as their argument and return an array-like object that holds the elements that match the selector. The jQuery implementation uses querySelectorAll() in browsers that support it, but there are good reasons to use $() instead of querySelectorAll() in your own code:

• querySelectorAll() has only recently been implemented by browser vendors but the $() works in older browsers as well as new ones.

• Because jQuery can perform selections “by hand,” the CSS3 selectors supported by $() work in all browsers, not just those browsers that support CSS3.

• The array-like object returned by $() (a jQuery object) is much more useful than the array-like object (a NodeList) returned by querySelectorAll().

each() :

• looping over all elements in a jQuery object. we can call the each() method instead of writing a for loop. The each() method is like a ECMAScript 5 forEach() array method. 
• It expects a callback function as its sole argument, and it invokes that callback function once for each element in the jQuery object . 
• The callback is invoked as a method of the matched element, so within the callback the this keyword refers to an Element object. 
• each() also passes the index and the element as the first and second arguments to the callback. 
• The second argument are raw document elements, not jQuery objects. 
• If we want to use a jQuery method to manipulate the element, we need to pass it to the $() first.
• jQuery’s each() method has one feature that is quite different than forEach().
• If the callback returns false for any element, iteration will be terminated after that element.
• each() returns the jQuery object on which it is called, so that it can be used in method chains.

jQuery has released in January 2006 by John Resig at BarCamp NewYork. It is currently headed by Timmy Wilson and it is been maintained by the team of developers. Nowadays, the jQuery is been used by so many websites.

jQuery Release Dates :

Version No                                                   Release Date

   
    1.0                                                               26-Aug-2006
   
    1.1                                                               14-Jan-2007

    1.2                                                               10-Sep-2007

    1.3                                                               14-Jan-2009

    1.4                                                               14-Jan-2010

    1.5                                                               31-Jan-2011

    1.6                                                               3-May-2011

    1.7                                                               3-Nov-2011

    1.8                                                               9-Aug-2012

    1.9                                                               15-Jan-2013

    1.10                                                             24-May-2013

    1.11                                                             24-Jan-2014

    2.0                                                               18-Apr-2013

    2.1                                                               24-Jan-2014