Your SlideShare is downloading. ×
JQuery: Introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

JQuery: Introduction

8,211
views

Published on

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

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

Published in: Technology

3 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,211
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
316
Comments
3
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery By : Amit Kumar Singh Email : [email_address]
  • 2. 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 .
  • 3. 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();
  • 4. 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 .
  • 5. quick demo: EASE of jQuery http://docs.jquery.com/Tutorials:How_to_Get_Anything_You_Want#Demo
  • 6. 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
  • 7. Attributes
    • Access a property of matched element Eg $(‘img’).attr(‘src’)
      • attr()
      • addClass()
      • html()
      • text()
      • val()
  • 8. 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;);
  • 9. 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);
  • 10. 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);
  • 11. 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 ); });
  • 12. 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); });
  • 13. More info
    • http://jquery.com
    • http://docs.jquery.com/
    • http://jquery.com/discuss/
    • http://visualjquery.com/
    • http://ui.jquery.com/
  • 14. Thank You Comments/Questions are welcome