JQUERY

is a new kind of JavaScript Library

jQuery : is a new kind of JavaScript Library

jQuery : is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript

Created by John Resig Open source

MIT and GPL license Cross-browser compatible

Internet Explorer 6+, Firefox 2+, Opera 9+, and Safari 2+

Current Release: V 1.6.1

Lightweight Footprint CSS3 Compliant

jQuery Overview

What jQuery Does

Access parts of a page. Modify the appearance of a page. Alter the content of a page. Respond to a user's interaction with a

page. Add animation to a page. Retrieve information from a server

without refreshing a page (AJAX). Simplify common JavaScript tasks.

Download jQuery

http://docs.jquery.com/Downloading_jQuery

jQuery API Reference

jQuery Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities jQuery UI

JQUERY & ASP.NET

ASP.NET Server-Side Pages are created on the server and

updated through postbacks ASP.NET AJAH

Pages created on the server and updated through AJAX requests for HTML

ASP.NET AJAX Pages are created on the client and updated

through Ajax requests for JSON

Different types of web applications

jQuery & ASP.NET

Microsoft AJAX Content Delivery Network Ajax Control Toolkit

JavaScript: The Good Parts

http://docs.jquery.com

http://encosia.com

Selectorshttp://docs.jquery.com/Selectors

$(“#firstName”) Selects element with Id firstName

$(”*") Select all elements.

$(“div,span”) Selects Div AND Span element

Basics:

Basic Filters:

$("tr:first") Finds the first table row.

$("input:not(:checked) + span") Finds all inputs that are not checked and

Select the next sibling span $("tr:even")

Finds even table rows

Other

Attribute Filters: $("div[id]") $("input[name='newsletter']")

Child Filters: $("div span:first-child")

Forms: $(":input");

Form Filters: $("input:enabled")

EFFECTS

http://docs.jquery.com/Effects

Basics:

show( speed, [callback] ) $("p").show("slow“)

hide( speed, [callback] ) $("p").hide("slow");

toggle( speed, [callback] ) $("p").toggle("slow");

Sliding:

slideDown( speed, [callback] ) $("div").slideDown("slow");

slideUp( speed, [callback] ) $("div").slideUp();

slideToggle( speed, [callback] ) $("p").slideToggle("slow");

Fading:

fadeIn( speed, [callback] ) $("div"). fadeIn("slow");

fadeOut( speed, [callback] ) $("div"). fadeOut();

fadeTo( speed, opacity, [callback] ) $(this).fadeTo("slow", 0.33);

Eventshttp://docs.jquery.com/Events

ready

ready( fn )$(document).ready(function () { $("p").text("The DOM is now loaded and can be

manipulated."); });

Event Handling:

bind( type, data, fn ) one( type, data, fn ) trigger( event, data ) triggerHandler( event, data ) unbind( type, fn )

Interaction Helpers:

hover( over, out ) toggle( fn, fn2, fn3,fn4,... )

Event Helpers:

blur( fn ) change( fn ) click( fn ) dblclick( fn ) focus( fn ) …………………

live( type, fn )

Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

This method works and behaves bind important distinction: When you

bind a "live" event it will bind to all current and future elements on the page

AJAX

jQuery.ajax( options )

Options: Success

function (data, textStatus) Complete

function (XMLHttpRequest, textStatus) Data

{foo:["bar1", "bar2"]} Error

function (XMLHttpRequest, textStatus, errorThrown)