ABCs of jQuery

In this article, we take an introductory look at the various components of jQuery.

What is it

JQuery is a JavaScript library that simplifies javascript programming.

In their own words, as quoted on the jQuery.com website - "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development."

Why do I need to know about it

Whether you work with Asp.net or SharePoint or any other web technologies, chances are that JQuery will be available to make life easier and your site user-friendly, more appealing and functionally rich.

Short and Simple overview

To describe what you can do with jQuery in a single line, the essence is that you select DOM elements and you manipulate them. Majority of jQuery core consists of selectors to easily find/reference DOM elements and events which enable manipulation of the DOM elements in your code.

First and foremost, you need a reference to the jquery library which can either be downloaded to your server and referenced or you can reference the jquery library available on the major CDNs which are free and available for public use.

You just need to reference this jquery.js library to start using the jQuery APIs.

Next, in your code, the most common task is to access the DOM elements. To ensure this occurs after the document is ready, we register a ready event for the document.

Selectors

jQuery offers a wide range of selectors - these tools enable you to select one or more DOM elements matching your criteria. I feel this is the heart of jQuery. Everything you do gets driven from this point. Various choices of selector elments are available to match every need. Some examples are

• Select all button elements
• Select all elements of class "heading"
• Select an element with name=Author
• Select all elements where <attribute> begins with <value>

And so on

Hierarchical selectors allow you to traverse parent/child/siblings etc.

Events

Events enable you to take action on selected elements in reaction to user interaction or system occurences. If selectors are the heart of jQuery, events are the soul :) All the action is in the events. Several events are available for use such as click, focus, bind, keyup etc.

Example

In the following code sample, we are going to attach a click event to all the anchor tags in the document - the event will basically display an alert message to the user before the navigating. Note the selector will register the event to all of the anchor tags. Also, note that I am using a public CDN instead of hosting jQuery locally. (There are pros and cons for both approaches, local as well as CDN)