JQuery is a Javascript library which is used
extensively for client side validation and manipulation of Dom elements. It is a
light weight, cross browser compatible and is a repository of many reusable
Javascript functions. To learn JQuery, we should have awareness of Html, CSS and
Javascript.
The jQuery library contains the following features:
- HTML element selections and manipulations
- CSS manipulation
- HTML event functions
- JavaScript Effects and animations
- HTML DOM traversal and modification
- AJAX
Adding JQuery to a page :
The jQuery library is stored as a single JavaScript file, containing all the
jQuery methods.
It can be added to a web page with the following mark-up:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
Please note that the <script> tag should be inside the page's <head> section.
jQuery syntax :
Basic syntax is: $(selector).action()
- A dollar sign to define jQuery
- A (selector) to "query (or find)" HTML
elements
- A jQuery action() to be performed on the
element(s)
Examples:
$(this).hide() - hides current element
$("p").hide() - hides all paragraphs
$("p.test").hide() - hides all paragraphs with class="test"
$("#test").hide() - hides the element with id="test"
$("p").css("background-color","yellow");
jQuery Events
Here are some examples of event methods in jQuery:
$(document).ready(function) Binds a function to the ready event of a document
(when the document is finished loading)
$(selector).click(function) Triggers, or binds a function to the click event of
selected elements
$(selector).dblclick(function) Triggers, or binds a function to the double click
event of selected elements
$(selector).focus(function) Triggers, or binds a function to the focus event of
selected elements
$(selector).mouseover(function) Triggers, or binds a function to the mouseover
event of selected
JQuery updates and downloads :
jQuery.com has all the updates. JQuery is available in two flavors Minified (for
production) and Uncompressed (for development and testing). Current version of
JQuery is 1.6.2. We can download JQuery file and place it on our application
folder and just mark a reference to JQuery file within the html file to make it
work.
If you don't want to download JQuery, you can directly use hosted JQuery library
from Google or Microsoft CDN.