JQuery: Introduction

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

4 comments

Comments 1 - 4 of 4 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

5 Favorites

JQuery: Introduction - Presentation 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

+ teamphpteamphp, 3 years ago

custom

5412 views, 5 favs, 9 embeds more stats

presentation gives an introduction to jquery librar more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 5412
    • 3316 on SlideShare
    • 2096 from embeds
  • Comments 4
  • Favorites 5
  • Downloads 208
Most viewed embeds
  • 1885 views on http://amiworks.co.in
  • 92 views on http://www.bp.ma
  • 80 views on http://bp.ma
  • 32 views on http://www.mohamedelmahdy.com
  • 3 views on http://static.slideshare.net

more

All embeds
  • 1885 views on http://amiworks.co.in
  • 92 views on http://www.bp.ma
  • 80 views on http://bp.ma
  • 32 views on http://www.mohamedelmahdy.com
  • 3 views on http://static.slideshare.net
  • 1 views on http://66.102.9.104
  • 1 views on http://admin.ap-virt.devel.lmc.cz
  • 1 views on https://s3.amazonaws.com
  • 1 views on http://209.85.227.132

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories