jQuery Basic Concepts

The jQuery library provides several user friendly strategies and functions for rich application development. Because the functions of jQuery are simple, it is very popular among developers. jQuery may be used in all Web based applications , in spite of the technology. It may be used with ASP, PHP, JSP, CGI, Servlets and most Web programming languages. The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
$ Sign
The $ is just a function. It is actually an alias for the function called jQuery. It can be written either as $() or jQuery() . Because it's a pain to write out all 6 letters of jQuery, the developers of jQuery decided to alias it as the single $ character. That's a valid variable name so they took it. Now, instead of typing out jQuery() , you can just write $() and it means the same thing. $() is really just a shortcut wrapper for JavaScript's findElementById(), findElementByClass() etc. functions. Pass it a CSS-like selector and it will return everything that matches.

Basic syntax is:


A dollar sign to define jQuery a (selector) to "query (or find)" HTML elements. A jQuery action() to be performed on the element(s).

Since selectors work similar to CSS, you will need to specify the selectors in a similar way. When referencing HTML elements, you will just use the element as is. See the following examples:

  1. $("a") - all anchor tags
  2. $("p") - all paragraph tags
  3. $("p.main") - all paragraph tags with a class of main

When referencing class names, you must specify the period (.) before the class name as in the following example:

$(".main") // all elements with the class name of main.

Also, when referencing IDs, you must specify the # before the ID name:

$("#main") // the element with the ID of main.

jQuery selectors

Selectors are strings that are used to target specific HTML elements on the page. The selector syntax is highly intuitive and easy to read and understand. jQuery selectors allow us to select an HTML element and, after doing so, easily perform any action or event on it. We can select elements in three ways.
  1. Based on the element name : $("a")
  2. Based on the elements ID attribute : $("#ID")
  3. Based on the elements class attribute : $("className")

jQuery events

jQuery events occur when the following situations occur

  1. Moving a mouse over an element
  2. Submitting a form
  3. Clicking on an element

These events allow programmers to create interactive user interfaces.

jQuery Effects and Animations

JQuery has a few built-in effects that can be implemented with minimal coding. For further customization, we will look at animations, which allow programmers to animate most of the visual properties of HTML elements.