visit www.iGnani.com

Click here for the Video Tutorial of this article.

Now a days, in the web development world, where ever you see, you here these new words “jQuery” & “HTML5”. Browsers speak about how fast they can handle these two and how complaint they are in terms of these two. In this series, let us see what is this “jQuery”.

I can easily assume that if you are into the developer world, you would have been hearing this word “jQuery” for quite a few years now. Where ever you look, you see “jQuery this” and “jQuery that”. For the last few years or so, jQuery has become one of the most used term and has come to become favorite with web designers and developers.

I can assume that the as and when you heard about “jQuery'’, you would have searched about it on the internet and would have found a lot of articles. But even after finding so many, it might be that you just can’t seem to learn jQuery? The reason may be that these tutorials expect you to know certain concepts or may be that the way they are presented is not easily understandable because of those alien jQuery terms used.

I heard of this term jQuery for quite a long time, and finally it came to a point where in I had to understand it. As with all you guys, I too started to search on the internet to look for something on jQuery. This is what I got to know:

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. jQuery is the most popular JavaScript library in use today. And jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2.

Also I got these words on every site I looked upon: “Write Less, Do More”.

Now though its good to know that jQuery is a open source software, did not understand why do we need another library and a new form of syntax to write it, while I have already been using some kind of JavaScript with HTML. I found a lot of materials telling me about the capability of jQuery library and the kind of things that I can achieve just by writing simple code. That was enough for me to start on. Since I had to put in a lot of effort in learning it, thought of sharing it with all those of you who are starting to know more about jQuery and how to start developing web pages using jQuery.

Starting with this article, I’m going to write a series of articles primarily aimed at people who have some basic understanding of HTML and related concepts, but do not have any clue of jQuery. This does not mean that those of you who do have some or good understanding of jQuery are not welcomed here. It is just that in this series, I will be looking at covering at using jQuery library in your projects from a point of view of a beginner and will not be covering any advanced concepts, which I will cover in my next series on “Advanced jQuery Development”.

I won’t be covering any more into how it evolved or its features etc. But will cover a few questions in brief before starting to write our first jQuery enabled web page.

So what exactly is jQuery?

In simple words, it is a "Write Less, Do More JavaScript Library". jQuery is an incredible JavaScript library that allows a website developer to easily create wonderful web effects in just a few lines of code. jQuery makes writing JavaScript code fun.

jQuery is a fast & concise JavaScript Library. It helps the programmers to keep code short and simple. it simplifies the process of traversal of HTML DOM tree. You can use jQuery to handle events, perform animation, and add the Ajax support into your web applications with ease. jQuery is designed to change the way that you write JavaScript.

Why I should use jQuery?

The main advantage of jQuery library is that the kind of things that you can achieve in just a few lines of code when compared to writing them in JavaScript. Just one glance at the source code of a page using jQuery & you’ll see what I mean by it.

jQuery is itself written in JavaScript and comes in the form of a .js file that you can use in your webpage. Once a link is established in your webpage through a reference, you will have access to a variety of functions and you can then accesses the library by calling various jQuery functions. Other than this, there are numerous jQuery plugins to make your webpage even more desktop application like but with very less code.

Another reason for using jQuery is that it makes your code to be executable on most of the popular browsers today. Incompatibilities between browsers meant that you had to write different JavaScript code for each browser. With jQuery, you will just make a call to the necessary jQuery function and leave the compatibility issue for the jQuery library to solve.

What all I can do using jQuery?

jQuery makes it easy to write powerful JavaScript apps and create amazing animation effects even rivaling those that use Flash/Silverlight. jQuery library can be used for:

DOM Traversal and Selection: To traverse and access elements in a Document Object Model (DOM) tree it takes a lot of code to be written. jQuery provides a robust and efficient mechanism to easily traverse through the DOM and retrieve the exact piece of the document that is to be inspected or manipulated.
Cross-browser support: With CSS, we can control the way a page is designed and rendered, but we can’t be sure that it will appear in the same way on all browsers since not all browsers support the same standards. jQuery is a kind of JavaScript code that you can write without worrying about browser compatibility.
Adding power to forms: jQuery not only makes traversing and selecting elements in a DOM easy, but allows us to change the classes or individual style properties applied to a portion of the document even after the page has been rendered. You can easily add, remove, modify and reorder content in the Web page using just a few lines of code.
jQuery not just allows mere cosmetic changes, but provides full control to modify the content of a document itself with a few lines of code. Text can be changed, lists can be re-ordered, images can be inserted or replaced, or entire structure of the HTML can be rewritten and extended - all with simple functions. In simple terms, using jQuery you can easily add complex client-side form validation features, enable AJAX features easily, design forms that can provide UI on par with the desktop applications, and have complete control over any or the entire part of the HTML structure and content of a page.
Adding animation effects: jQuery lets you easily add effects such as fading in/out, sliding in/out, and expanding/contracting etc.
Event Handling: jQuery library offers an elegant way to handle a variety of events without the need to mess up the HTML code.
Easily enable AJAX: AJAX in simple terms is about sending & retrieving data between the web page and the server without refreshing a page. AJAX stands forAsynchronous JavaScript And XML. jQuery removes the browser-specific complexity while writing AJAX code and allows developers just to concentrate on the server side functionality.
Making drop-down menus: jQuery makes it easy to create multi-level dropdowns with amazing animations.
Creating drag-and-drop interfaces: Use jQuery to build a page with elements that can be repositioned or reordered or resized simply by dragging and dropping.
And a lot more…

All this is good, but what about the cost?

jQuery library is a open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2. That means its free to download. Zero costs, but by decreasing the amount of code you will have to write in JavaScript or in using additional resources to develop Flash/Silverlight components, you would be in fact paying a lot less on the long run.

Then, show me how to start with!!!

Now that we know what we can achieve with jQuery, let us start to write some code and put the jQuery library into action. In the next article, I will show you how to download jQuery library. Then will continue with Creating a simple demo page -and write your first function in jQuery, Handle an event in jQuery and using some functions provided by jQuery to add animation effect to the page.

Click here for the Video Tutorial of this article.

visit www.iGnani.com