jquery
DESCRIPTION
TRANSCRIPT
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)