Introduction To jQuery

jQuery is a cross-browser lightweight JavaScript library. In simple words jQuery has been designed to make navigation to any element easier, or adding/invoking event handlers on your HTML page. Using jQuery, one can easily convert his static looking website to a powerful and dynamic website.

Before proceeding further, I would like to clarify one very important point; that jQuery is extraordinarily useful, but you should still know how JavaScript works and how to use it correctly.

A quick look at what is available in jQuery:

Cross-browser support and detection
AJAX functions
CSS functions
DOM manipulation
DOM transversal
Attribute manipulation
Event detection and handling
JavaScript animation
Hundreds of plugins for pre-built user interfaces, advanced animations, form validation, etc.
Expandable functionality using custom plugins.

Getting Started

To start with jQuery you must first of all download the latest version from http://jquery.com
Provide the reference of the downloaded file in your HTML page.

e.g. <script type="text/javascript" src="jquery.js"></script>

jQuery Core Concepts

The entire jQuery logic rotates around the magic of the $() function. $() by default, represents the jQuery object. When combined with a selector, it can represent multiple DOM Elements.

The most popular function of jQuery is:

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

Since this is fired when the DOM is ready for programming.

jQuery Selectors

All Selectors.

$("*") // find everything (Selectors return a pseudo-array of jQuery elements)
Basic Selectors

1. By Tag:
$("h1") // <h1>Hello C# Corner</h1>

2. By ID:
$("#username") // <span id="username">Pete</span>

3. By Class:
$(".menu") // <ul class="menu">Home</ul>
More Precise Selector.

$("div.main") // tag and class
$("table#main") // tag and id
Combination of Selectors.

$("#container, .f_left") // find by id + by class
$("h1, h2, h3, div.container") // multiple combination
Hierarchy Selectors.

$("table td") // descendants
$("tr > td") // children
$("label + input") // next
$("#content ~ div") // siblings
Selection Index Filters

$("tr:first") // first element
$("tr:last") // last element
$("tr:lt(2)") // index less than
$("tr:gt(2)") // index gr. than
$("tr:eq(2)") // index equals
Attribute Filters

$("div[id]") // has attribute
$("div[dir='rtl']") // equals to
$("div[id^='name]") // starts with
$("div[id$='main]") // ends with
$("a[href*='corner]") // contains
Form Selectors

$("input:checkbox") // checkboxes
$("input:radio") // radio buttons
$(":button") // buttons
$(":text") // text inputs

I have tried to cover most basic features that will help to start with jQuery.

Thanks for your reading. Please provide your inputs and suggestions for the article.