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

1. To start with jQuery you must first of all download the latest version from http://jquery.com
    
2. 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.