Introduction to jQuery for the Beginners

jQuery is an extremely popular feature-rich Javascript library that provides many advanced and cross-browser functions that can enhance web applications. It makes repetitive tasks such as element selection, DOM manipulation, event handling, animation, and Ajax much simpler.

jQuery is a JavaScript framework, which makes it much easier to use JavaScript on your website, simplifying complicated things from JavaScript. jQuery can be described as abstraction layer, as it takes a lot of the functionality that require many lines of JavaScript to accomplish and wraps it into methods that you can call with a single line of code.

It is important to note that jQuery is just a JavaScript library. The code you write when you use jQuery is still JavaScript code, so having a strong knowledge of JavaScript is necessary for understanding, structuring, and debugging your code.

Some of the features of jQuery are as follows:

• HTML/DOM selection and manipulation (based on CSS selectors that uses elements’ names and attributes, such as id and class)
• CSS manipulation
• Events
• Ajax
• Effects and animations
• JSON parsing
• Extensibility through plug-ins (New events, elements, and methods can be easily added and then reused as a plugin)
• Utilities

Why use jQuery instead of just basic JavaScript?

JavaScript is not consistent across browsers and using direct JavaScript can cause issues related to browser incompatibilities. JavaScript libraries provide helpers and shortcuts and also take care of  browser incompatibilities with best practices. It is better that you spend time developing your application, and use native JavaScript only if you have to.

There are a bunch of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. You can easily find jQuery plugins for almost any task.

Getting Started with jQuery

To use jQuery in your website, you need to import jQuery script inside a Web Page. You can either download jQuery library from jQuery.com website or include jQuery from a content delivery network(CDN) like Google CDN and Microsoft CDN.

Using those CDNs instead of using jQuery library from your own server provide significant performance (faster loading time) as many users already have downloaded jQuery from CDN when visiting other website.

Here’s how to include jQuery into a web page. The src attribute in the <script> element must point to a copy of jQuery source file.Write inside head section of your page.
[html]

[/html]
In this example, 3.1.1 is version number of jQuery library used.
To include jQuery from Google CDN, write something like this:
[html]

[/html]

To include jQuery from Microsoft CDN, write something like this
[html]

[/html]

How to use jQuery ?

Like many other javascript libraries, jQuery uses the global $ variable as a shortcut. A $ sign is used to define or access jQuery. You can use either $(“div”) and jQuery(“div”). They are identical. You can use whichever according to your preference, but $ is shorter, neater and easy to spot than jQuery.
General syntax is: $(selector).action()

Examples:
[code]
$(this).hide() – hides the current element.

$(“div”).hide() – hides all div elements

$(“.myDiv”).hide() – hides all elements with class=”myDiv”.

$(“#myDiv”).hide() – hides the element with id having “myDiv”.
[/code]

To run code as soon as the document is ready to be manipulated, you can use jQuery statement known as the ready event.
[code]
$( document ).ready(function() {

// Your code here.

});
[/code]
Alternatively, you can also use:
[code]
$(function(){

// jQuery methods go here…

});
[/code]
This is basic for starting jQuery. To master jQuery, you should learn to use jQuery selector and jQuery events. jQuery Selectors allow you to find the element(s) that you wish to change while jQuery events help you to bind code to the event of an element. There are lot of resources available in the internet which will guide you to master selectors and events.

This much for today. Hope this will help you to learn basics of jQuery.