Monday, August 1, 2011

JQuery tutorial

JQuery is a Javascript library and is very light weight.
Some tasks you can do using JQuery:
HTML element selections
HTML element manupulation
CSS manipulation
Java script effects and animations
HTML event functions etc.
Syntax to add JQuery library into a web page:
<script type="text/javascript" src="jquery.js"></script>

Also you can use the libraries hosted in Google or Microsoft servers.
Google Path:
<script type="text/javascript"
Microsoft Path:
<script type="text/javascript" src="
Syntax to select a HTML element and perform some action:
$(selector).action() -> Here $ meant for JQuery; selector meant for the HTML element and action meant for the action to be performed.
Example: $(this).hide() : it will hide the current HTML element.
$("p").hide() : Hide all the paragraph elements.
$("#cssid").hide() : Hide html element with id="cssid".
$(".cssclass").hide() : Hide html elements with class="cssclass".
Document ready function:
The document ready function will prevent you from loading any other jquery code before the document is finished loading.

JQuery Selectors:
jQuery selectors allow you to select HTML elements (or groups of elements) by element name, attribute name or by content.
Below are some examples to select html element:
$("p") selects all
$("p.classname") selects all
elements with class="classname".
$("p#idname") selects all
elements with id="idname".\
$("[href]") select all elements with an href attribute.
JQuery event function syntax:
$("button").click(function() {..some code... } )
More JQuery tutorials comming !!!