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
  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.

Similar Articles