jQuery By : Amit Kumar Singh Email : [email_address]

What is jQuery? New type of JavaScript library. jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages . jQuery is designed to change the way that you write JavaScript .

New type of JavaScript library.

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages . jQuery is designed to change the way that you write JavaScript .

Why jQuery? Everything works in IE6+, firefox, safari 2+, and opera 9+ CSS 3 compliant Small size(14kb, compressed) 100s of plugins Fully documented Great community Use with other libraries .noConflict();

Everything works in IE6+, firefox, safari 2+, and opera 9+

CSS 3 compliant

Small size(14kb, compressed)

100s of plugins

Fully documented

Great community

Use with other libraries .noConflict();

Other Options Script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly Prototype Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX applications Yahoo! User Interface Library The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources .

Script.aculo.us

provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly

Prototype

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around

Google Web Toolkit (GWT)

is an open source Java software development framework that makes writing AJAX applications

Yahoo! User Interface Library

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources .

quick demo: EASE of jQuery http://docs.jquery.com/Tutorials:How_to_Get_Anything_You_Want#Demo

DOM/Traversing / Selectors Supported jQuery selectors are a combination of CSS 1-3, XPath, plus some custom code to glue it together. Eg E#myid Not supported jQuery only supports selectors that actually select DOM elements - everything else is ignored. Eg E:link

Supported

jQuery selectors are a combination of CSS 1-3, XPath, plus some custom code to glue it together. Eg E#myid

Not supported

jQuery only supports selectors that actually select DOM elements - everything else is ignored. Eg E:link

Attributes Access a property of matched element Eg $(‘img’).attr(‘src’) attr() addClass() html() text() val()

Access a property of matched element Eg $(‘img’).attr(‘src’)

attr()

addClass()

html()

text()

val()

Manipulation after( content ) eg $(&quot;p&quot;).after(&quot;<b>Hello</b>&quot;); append( content ) eg $(&quot;p&quot;).append(&quot;<b>Hello</b>&quot;); before( content ) eg $(&quot;p&quot;).before(&quot;<b>Hello</b>&quot;); clone( ) eg $(&quot;b&quot;).clone().prependTo(&quot;p&quot;); empty( ) eg $(&quot;p&quot;).empty(); remove( expr ) eg $(&quot;p&quot;).remove(); $(&quot;p&quot;).remove(&quot;.hello&quot;);

after( content ) eg $(&quot;p&quot;).after(&quot;<b>Hello</b>&quot;);

append( content ) eg $(&quot;p&quot;).append(&quot;<b>Hello</b>&quot;);

before( content ) eg $(&quot;p&quot;).before(&quot;<b>Hello</b>&quot;);

clone( ) eg $(&quot;b&quot;).clone().prependTo(&quot;p&quot;);

empty( ) eg $(&quot;p&quot;).empty();

remove( expr ) eg $(&quot;p&quot;).remove(); $(&quot;p&quot;).remove(&quot;.hello&quot;);

CSS css( name ) eg $(&quot;p&quot;).css(&quot;color&quot;); css( properties ) eg $(&quot;p&quot;).css({ color: &quot;red&quot;, background: &quot;blue&quot; }); css( name, value ) eg $(&quot;p&quot;).css(&quot;color&quot;,&quot;red&quot;); height( ) eg $(&quot;p&quot;).height(); $(&quot;p&quot;).height(20); width( ) eg $(&quot;p&quot;).width(); $(&quot;p&quot;).width(20);

css( name ) eg $(&quot;p&quot;).css(&quot;color&quot;);

css( properties ) eg $(&quot;p&quot;).css({ color: &quot;red&quot;, background: &quot;blue&quot; });

css( name, value ) eg $(&quot;p&quot;).css(&quot;color&quot;,&quot;red&quot;);

height( ) eg $(&quot;p&quot;).height(); $(&quot;p&quot;).height(20);

width( ) eg $(&quot;p&quot;).width(); $(&quot;p&quot;).width(20);

Effects show( ) eg $(&quot;p&quot;).show() show( speed, [callback] ) eg $(&quot;p&quot;).show(&quot;slow&quot;); $(&quot;p&quot;).show(&quot;fast&quot;,function(){ alert(&quot;Animation Done.&quot;); }); hide( ) hide( speed, callback ) toggle( ) fadeIn( speed, callback ) ,fadeOut(speed, callback ) fadeTo( speed, opacity, callback ) eg $(&quot;p&quot;).fadeTo(&quot;slow&quot;, 0.66);

show( ) eg $(&quot;p&quot;).show()

show( speed, [callback] ) eg $(&quot;p&quot;).show(&quot;slow&quot;);

$(&quot;p&quot;).show(&quot;fast&quot;,function(){ alert(&quot;Animation Done.&quot;); });

hide( )

hide( speed, callback )

toggle( )

fadeIn( speed, callback ) ,fadeOut(speed, callback )

fadeTo( speed, opacity, callback ) eg $(&quot;p&quot;).fadeTo(&quot;slow&quot;, 0.66);

Utilities jQuery.trim( str ) jQuery.browser eg $.browser.msie ; if ($.browser.safari) { alert(&quot;this is safari!&quot;); } Available flags are: safari opera msie mozilla jQuery.each( object, callback ) $.each( [0,1,2], function(i, n){ alert( &quot;Item #&quot; + i + &quot;: &quot; + n ); }); $.each( { name: &quot;John&quot;, lang: &quot;JS&quot; }, function(i, n){ alert( &quot;Name: &quot; + i + &quot;, Value: &quot; + n ); });

jQuery.trim( str )

jQuery.browser eg $.browser.msie ;

if ($.browser.safari) { alert(&quot;this is safari!&quot;); }

Available flags are:

safari

opera

msie

mozilla

jQuery.each( object, callback )

$.each( [0,1,2], function(i, n){ alert( &quot;Item #&quot; + i + &quot;: &quot; + n ); });

$.each( { name: &quot;John&quot;, lang: &quot;JS&quot; }, function(i, n){ alert( &quot;Name: &quot; + i + &quot;, Value: &quot; + n ); });

AJAX load(String,Object,Function) eg $(&quot;#feeds&quot;).load(&quot;feeds.html&quot;); get(String,Map,Function) eg $.get('manageftp.php',{mode:'mailS',result:‘some result'}); post(String,Map,Function) eg $.post('manageftp.php',{mode:'ftp',ftp_server:'ftp.puneitlabs.com', function(data){ alert('Data Loaded: ' + data); });

load(String,Object,Function) eg $(&quot;#feeds&quot;).load(&quot;feeds.html&quot;);

get(String,Map,Function) eg $.get('manageftp.php',{mode:'mailS',result:‘some result'});

post(String,Map,Function) eg $.post('manageftp.php',{mode:'ftp',ftp_server:'ftp.puneitlabs.com', function(data){ alert('Data Loaded: ' + data); });

More info http://jquery.com http://docs.jquery.com/ http://jquery.com/discuss/ http://visualjquery.com/ http://ui.jquery.com/

http://jquery.com

http://docs.jquery.com/

http://jquery.com/discuss/

http://visualjquery.com/

http://ui.jquery.com/

Thank You Comments/Questions are welcome