jQuery By :  Amit Kumar Singh Email :  [email_address]
What is   jQuery? <ul><li>New type of JavaScript library.   </li></ul><ul><li>jQuery is a fast, concise, JavaScript Librar...
Why  jQuery? <ul><ul><li>Everything works in IE6+, firefox, safari 2+, and opera 9+ </li></ul></ul><ul><ul><li>CSS 3 compl...
Other  Options <ul><li>Script.aculo.us </li></ul><ul><ul><li>provides you with easy-to-use, cross-browser user interface J...
quick demo:  EASE of   jQuery http://docs.jquery.com/Tutorials:How_to_Get_Anything_You_Want#Demo
DOM/Traversing / Selectors <ul><li>Supported </li></ul><ul><ul><li>jQuery selectors are a combination of CSS 1-3, XPath, p...
Attributes <ul><li>Access a property of matched element Eg $(‘img’).attr(‘src’) </li></ul><ul><ul><li>attr() </li></ul></u...
Manipulation <ul><li>after( content )  eg  $(&quot;p&quot;).after(&quot;<b>Hello</b>&quot;);   </li></ul><ul><li>append( c...
CSS <ul><li>css( name )  eg $(&quot;p&quot;).css(&quot;color&quot;);   </li></ul><ul><li>css( properties )  eg $(&quot;p&q...
Effects <ul><li>show( )   eg $(&quot;p&quot;).show()   </li></ul><ul><li>show( speed, [callback] )   eg  $(&quot;p&quot;)....
Utilities <ul><li>jQuery.trim( str ) </li></ul><ul><li>jQuery.browser   eg  $.browser.msie ;  </li></ul><ul><ul><li>if ($....
AJAX <ul><li>load(String,Object,Function)  eg  $(&quot;#feeds&quot;).load(&quot;feeds.html&quot;); </li></ul><ul><li>get(S...
More   info <ul><li>http://jquery.com </li></ul><ul><li>http://docs.jquery.com/ </li></ul><ul><li>http://jquery.com/discus...
Thank   You Comments/Questions are welcome
Upcoming SlideShare
Loading in …5
×

JQuery: Introduction

8,629 views

Published on

presentation gives an introduction to jquery library, common functions and a qucik demo

Published in: Technology
3 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
8,629
On SlideShare
0
From Embeds
0
Number of Embeds
1,944
Actions
Shares
0
Downloads
320
Comments
3
Likes
7
Embeds 0
No embeds

No notes for slide

JQuery: Introduction

  1. 1. jQuery By : Amit Kumar Singh Email : [email_address]
  2. 2. What is jQuery? <ul><li>New type of JavaScript library. </li></ul><ul><li>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 . </li></ul>
  3. 3. Why jQuery? <ul><ul><li>Everything works in IE6+, firefox, safari 2+, and opera 9+ </li></ul></ul><ul><ul><li>CSS 3 compliant </li></ul></ul><ul><ul><li>Small size(14kb, compressed) </li></ul></ul><ul><ul><li>100s of plugins </li></ul></ul><ul><ul><li>Fully documented </li></ul></ul><ul><ul><li>Great community </li></ul></ul><ul><ul><li>Use with other libraries .noConflict(); </li></ul></ul>
  4. 4. Other Options <ul><li>Script.aculo.us </li></ul><ul><ul><li>provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly </li></ul></ul><ul><li>Prototype </li></ul><ul><ul><li>Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. </li></ul></ul><ul><ul><li>Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around </li></ul></ul><ul><li>Google Web Toolkit (GWT) </li></ul><ul><ul><li>is an open source Java software development framework that makes writing AJAX applications </li></ul></ul><ul><li>Yahoo! User Interface Library </li></ul><ul><ul><li>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 . </li></ul></ul>
  5. 5. quick demo: EASE of jQuery http://docs.jquery.com/Tutorials:How_to_Get_Anything_You_Want#Demo
  6. 6. DOM/Traversing / Selectors <ul><li>Supported </li></ul><ul><ul><li>jQuery selectors are a combination of CSS 1-3, XPath, plus some custom code to glue it together. Eg E#myid </li></ul></ul><ul><li>Not supported </li></ul><ul><ul><li>jQuery only supports selectors that actually select DOM elements - everything else is ignored. Eg E:link </li></ul></ul>
  7. 7. Attributes <ul><li>Access a property of matched element Eg $(‘img’).attr(‘src’) </li></ul><ul><ul><li>attr() </li></ul></ul><ul><ul><li>addClass() </li></ul></ul><ul><ul><li>html() </li></ul></ul><ul><ul><li>text() </li></ul></ul><ul><ul><li>val() </li></ul></ul>
  8. 8. Manipulation <ul><li>after( content ) eg $(&quot;p&quot;).after(&quot;<b>Hello</b>&quot;); </li></ul><ul><li>append( content ) eg $(&quot;p&quot;).append(&quot;<b>Hello</b>&quot;); </li></ul><ul><li>before( content ) eg $(&quot;p&quot;).before(&quot;<b>Hello</b>&quot;); </li></ul><ul><li>clone( ) eg $(&quot;b&quot;).clone().prependTo(&quot;p&quot;); </li></ul><ul><li>empty( ) eg $(&quot;p&quot;).empty(); </li></ul><ul><li>remove( expr ) eg $(&quot;p&quot;).remove(); $(&quot;p&quot;).remove(&quot;.hello&quot;); </li></ul>
  9. 9. CSS <ul><li>css( name ) eg $(&quot;p&quot;).css(&quot;color&quot;); </li></ul><ul><li>css( properties ) eg $(&quot;p&quot;).css({ color: &quot;red&quot;, background: &quot;blue&quot; }); </li></ul><ul><li>css( name, value ) eg $(&quot;p&quot;).css(&quot;color&quot;,&quot;red&quot;); </li></ul><ul><li>height( ) eg $(&quot;p&quot;).height(); $(&quot;p&quot;).height(20); </li></ul><ul><li>width( ) eg $(&quot;p&quot;).width(); $(&quot;p&quot;).width(20); </li></ul>
  10. 10. Effects <ul><li>show( ) eg $(&quot;p&quot;).show() </li></ul><ul><li>show( speed, [callback] ) eg $(&quot;p&quot;).show(&quot;slow&quot;); </li></ul><ul><ul><li>$(&quot;p&quot;).show(&quot;fast&quot;,function(){ alert(&quot;Animation Done.&quot;); }); </li></ul></ul><ul><li>hide( ) </li></ul><ul><li>hide( speed, callback ) </li></ul><ul><li>toggle( ) </li></ul><ul><li>fadeIn( speed, callback ) ,fadeOut(speed, callback ) </li></ul><ul><li>fadeTo( speed, opacity, callback ) eg $(&quot;p&quot;).fadeTo(&quot;slow&quot;, 0.66); </li></ul>
  11. 11. Utilities <ul><li>jQuery.trim( str ) </li></ul><ul><li>jQuery.browser eg $.browser.msie ; </li></ul><ul><ul><li>if ($.browser.safari) { alert(&quot;this is safari!&quot;); } </li></ul></ul><ul><ul><li>Available flags are: </li></ul></ul><ul><ul><ul><li>safari </li></ul></ul></ul><ul><ul><ul><li>opera </li></ul></ul></ul><ul><ul><ul><li>msie </li></ul></ul></ul><ul><ul><ul><li>mozilla </li></ul></ul></ul><ul><li>jQuery.each( object, callback ) </li></ul><ul><ul><li>$.each( [0,1,2], function(i, n){ alert( &quot;Item #&quot; + i + &quot;: &quot; + n ); }); </li></ul></ul><ul><ul><li>$.each( { name: &quot;John&quot;, lang: &quot;JS&quot; }, function(i, n){ alert( &quot;Name: &quot; + i + &quot;, Value: &quot; + n ); }); </li></ul></ul>
  12. 12. AJAX <ul><li>load(String,Object,Function) eg $(&quot;#feeds&quot;).load(&quot;feeds.html&quot;); </li></ul><ul><li>get(String,Map,Function) eg $.get('manageftp.php',{mode:'mailS',result:‘some result'}); </li></ul><ul><li>post(String,Map,Function) eg $.post('manageftp.php',{mode:'ftp',ftp_server:'ftp.puneitlabs.com', function(data){ alert('Data Loaded: ' + data); }); </li></ul>
  13. 13. More info <ul><li>http://jquery.com </li></ul><ul><li>http://docs.jquery.com/ </li></ul><ul><li>http://jquery.com/discuss/ </li></ul><ul><li>http://visualjquery.com/ </li></ul><ul><li>http://ui.jquery.com/ </li></ul>
  14. 14. Thank You Comments/Questions are welcome

×