Post
Ask Question

Starting With jQuery

Now, client side document manipulation, dynamic content with effects has become the vital part in all Web application development. This client side manipulation is done with help of JavaScript and CSS. JQuery is simply a library of JavaScript-functions. It contains well written and tested common functions. We can also add our methods/functions to it. jQuery functions(Browser Sniffer) guarantee to work in any browser because they are written in that fashion (ECMAScript is a standard and JavaScript is one of its dialects. Since jQuery is a JavaScript library, any browser supporting JavaScript will automatically support jQuery. Though, jQuery is not standardized by ECMAScript.)

Starting with jQuery is very easy. You need to know the only basics of JavaScript or even you can start without knowing JavaScript. But, usage of JavaScript shouldn't be avoided in developing rich responsive web applications. One should use JavaScript also whenever, wherever it is required. You can mix the jQuery with native JavaScript also. Generally, we write many line of code in JavaScript to accomplish a task, but jQuery makes it easy for us and same can be accomplished in 1 or few lines of jQuery.

Is there only jQuery which contains a good collection of common JavaScript functions?

No, there are many other JavaScript library collections with their own pros and cons. They also provide us the same thing i.e. manipulating or access to DOM model and AJAX functionality. So selection choice for these JavaScript libraries depends upon the requirements. There may be chances that other JavaScript Library may be more suitable to some kind of web development rather compare to jQuery.

Here are few popular JavaScript libraries

  1. JQuery (Created by John Resig and released in January 2006 as free and open source under MIT license. Now it has a very big team for its development with few other jQuery Core related projects like jQuery Mobile, Sizzle, jQuery UI, QUnit. It is very popular and has easy syntax patterns with documentations and examples.)
     
  2. MooTools (Created by Valerio Proietti and released in September 2006. It has gained much popularity due to its plugins. Bing and Joomla are using this library framework. Its Plugins are widely being used on Wordpress blogging platform. It is little bit harder to use as compare to jQuery)
     
  3. Prototype (Created by Sam Stephenson in February 2005 for Ajax support in "Ruby on Rails" . It supports XMLHttpRequest protocol that reduce entire webpage reload at browser for dynamic web pages. Ex. used in Ruby on Rails)
     
  4. Dojo Toolkit (Created by Alex Russell, Dylan Schiemann, David Schontzler, and others in 2004. This library is providing much more than other libraries in terms of Classes, Constructors, and inheritance in JavaScript. It is also gaining more popularity since it's released from 2004/05 year. It comes with 3 components: Dojo core, Dijit and DojoX. It is little bit harder to use as compare to jQuery)
     
  5. Ext (Created by Jack Slocum in 2008 as an add-on library extension of YUI. Now don't have any dependency on other library. This is known for its compatibility with jQuery and Prototype though its syntax is differing. It has predefined UI objects and easily can be called into web pages. This gives rich controls handling like radio buttons, toolbars etc.)
     
  6. Script.aculo.us (Created by by Thomas Fuchs in June 2005. It is built on the "Prototype JavaScript Framework" and has very rich set of effects functionality. Used on Ruby on Rails platform.)

There are many others but I have pointed few popular of them. I personally prefer jQuery usage for its simplicity and power.

So why to go for jQuery?

JQuery has several benefits over using other JavaScript libraries. It has great AJAX supports with easy DOM-model access. It is more easy to use compare to other libraries. Large numbers of plug-ins are available for it. JQuery also has a good level of tutorials and examples. JQuery is simple in use and easy to extend. And also it is most popular library collection among others.:)

Since, I work on Microsoft technologies and Microsoft itself is adopted jQuery, so how can I avoid it over other JavaScript libraries. Microsoft has adopted it for use within ASP.NET AJAX framework and ASP.NET MVC Framework. Also a big brand "Nokia" in cell-phone arena has integrated jQuery into its Web Run-Time widget development platform.)

JQuery is rocking and widening day by day.

Power of jQuery (What we can do with help of jQuery)

There are two basic requirements in developing web applications - 1) access to DOM model and 2) AJAX for making dynamic web. And jQuery provide these functionalities. In brief we can perform following things with jQuery

  • Event handling of HTML element
     
  • Usage of Common Utilities written in jQuery
     
  • Easy AJAX calls with flexible options (raw Ajax with many customized APIs)
     
  • CSS handling
     
  • Applying effects and animations
     
  • DOM/Html elements manipulations
     
  • DOM traversal and modifications
     
  • DOM filtering APIs
     
  • Use of Chaining and Call-back functionality
     
  • Access to third parties well written/developed plug-ins for more beautification.
     
  • Multi browser support

How to start using jQuery?

As I mentioned above, it is a collection of well written functions, so we need to have it before utilizing it. This functions collection (library) is stored in a scripting file (js file) and we have to refer this. It can be downloaded from http://jQuery.com/  . This is a small library file and its size is in Kb. It comes in two modes

  1. Developers mode file (around 252 kb in size) and
     
  2. Minified or Production mode file (around 32 kb in size)

Minified is smaller in size because it is compressed and so used in production. Developer mode file is heavier because it has readable/formatted code and so used in developing for debugging or customizing.

So in order to use jQuery, we need to refer any of above mentioned mode file in our application. We refer it in <head> tag before using it as Browsers parse <head> part first and ideally css then scripts. Browser starts executing the scripts in their order. Then <body> contents are parsed and drawn. So, when we refer this collection file, it gets downloaded at each web user end and cached by Browser. There are two ways to get reference of this library file

  1. Store this library file locally or own web-server (after downloading it from http://jQuery.com/) along with application resources (pages, images, CSS etc,) and refer it on page.
     
  2. Directly refer from shared CDN (Content Delivery Network) provided by many web-servers like Google and Microsoft.

Second one is better approach this is because of:

  • There may be chances that: User may have surfed other websites that may have already referred this jQuery file from that CDN. So it minimizes the re-downloading of jQuery file from our web-server as Browser has already cached it.
     
  • CDN server may be nearer or closer to user than our web-server and it yields a faster loading (downloading for Browser).
     
  • If our code is not jQuery version specific then we can make link that will always refer the latest version of jQuery from CDN. It means we needn't to update it each time new jQuery version come.

The jQuery library can be referred in web page inside <head> tag as:

<script src="Scripts/jQuery.min.js"></script> 

OR

<script src="http://ajax.googleapis.com/ajax/libs/jQuery/1.8.2/jQuery.min.js"></script> 


How it works?

jQuery functions operates on jQuery objects and not on simple DOM elements. A jQuery object (an special array like object) can contain multiple DOM elements depending on the selector has been used.

We select the DOM/Html elements and perform some actions using jQuery. We can also bind events on these selected elements.

There are two variant of jQuery usage-

  1. jQuery(context).functioncall (works on jQuery object)

    Example:
     $('#myDivID').css('color','green').add('p').addClass('myClass').slideDown('down'); 
     
  2. jQuery.functioncall (works globally and not on jQuery object, generally all utility functions are accessed in this way)

    Example:
     $.support.ajax
    output==> it returns true if browser supports ajax

To know more about jQuery's namespaces, please refer my blog jQuery $.each and $.fn.each and to understand jQuery Object what is jQuery Object?. Also note that window.jQuery is same as jQuery, and below all are the same:

 window.jQuery  =  window.$  =  jQuery  =  $

Example: 

 window.jQuery.fn.jQuery
output==> it returns the version of jQuery

Below line will also give the same result as above. 

 $.fn.jQuery
output==> it returns the version of jQuery

jQuery has a ready event which automatically triggered when Document becomes ready(still images may be being loaded but DOM is ready for operations). So code written inside this ready event comes in action only after the document is ready. This DOM ready wait, ensures that referring element is able to access and avoid the null or undefined/non-existence problem. If we still want more wait until everything is fully loaded including banner-images then load event can be used instead of ready event. In native JavaScript, there is also a 'window.onload' event which happen when document is fully loaded including banner images etc.

So, we are going to place our code that will come into action once document is ready as:

 $(document).ready(function () {/* my script goes here */ });

We can use short hand also by just passing a function to $() and it works like passing a function to ready event.

$(function () {  } );      ==>    $(document).ready(function () { });


A simple example can be seen as: 

 $(document).ready(function () {
       		$('input[id$=myInputControlID]').css('color', 'green');});



Similar Articles