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).
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:
- $("a") - all anchor tags
- $("p") - all paragraph tags
- $("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:
Also, when referencing IDs, you must specify the # before the ID name:
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.
- Based on the element name : $("a")
- Based on the elements ID attribute : $("#ID")
- Based on the elements class attribute : $("className")
jQuery events occur when the following situations occur
- Moving a mouse over an element
- Submitting a form
- 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.