Vishal Kumar<br />06131A1258<br />
Introduction<br />Why you’re going to love jQuery!<br />
Introduction<br />What we want to create?<br />Dynamic Live Websites<br />Effects filled <br />Fast, responsive sites<br /...
The Solution : jQuery<br />What is jQuery?<br />jQuery is a fast and concise JavaScript Library that simplifies HTML docum...
History of jQuery<br />Developed by John Resig<br />Released v1.0 on November 26th, 2006<br />Maintained as an Open Source...
Features of jQuery<br />DOM element selections using the cross-browser open source selector engine Sizzle<br />DOM travers...
A Few Examples<br />Forms<br />Chatboxes<br />Menus<br />Dropdowns<br />Sliders<br />Tabs<br />Slideshows<br />Games<br />
jQuery Enhanced Forms<br />
Menus and Dropdowns<br />
Sliders and Slideshows<br />
Technical Implementation<br />Because, after all, we are I.T. folks.<br />
jQuery Object<br />The jQuery Object<br />Contains a reference to the DOM element<br />Has properties of the DOM element, ...
Using jQuery<br />Download the .JS file (23KB otal, minified)<br />Use the jQuery file hosted on Google’s Code servers<br ...
jQuery Syntax<br />$(document).ready(function()<br />{ <br />	$(&quot;a&quot;).click(function(event)<br />	{ <br />		alert...
The  $ Symbol<br />$ is the Shortcut for the jQuery Global Class<br />Use it to access any part of the DOM<br />Search by ...
DOM Traversing<br />Document Object Model:<br />The way of representing the Elements of a Document as Objects<br />Way we ...
Chainable Functions<br />Chainable events: find this, do several things in succession<br />$(&apos;#message2&apos;).fadeIn...
jQuery Animations<br />Animations<br />Built in<br />fadeIn()<br />fadeOut()<br />hide()<br />show()<br />slideDown()<br /...
When is the DOM Ready?<br />When is DOM ready?<br />We can use the ready() function to find out<br />$(document).ready(fun...
CSS & Attribute Matching<br />Search with Tags and CSS:<br />$(&apos;p&apos;);<br />$(&apos;p.message&apos;);<br />$(&apos...
jQuery Events<br />Don&apos;t add &quot;onclick&quot; to your markup: use jQuery to find and assign events<br />$(&apos;#c...
jQuery with Other Frameworks<br />Mootools<br />Prototype, etc<br />Other frameworks also use the $ shortcut<br />Add code...
AHAH !?!<br />AHAH style (Asynchronous HTML and HTTP)<br />Easiest way of creating Asynchronous sites<br />$(&apos;#contro...
AJAX with jQuery<br />Asynchronous Javascript and XML<br />AJAX - Processing the feed<br />$(&apos;#demo5-1&apos;).click(f...
Live Examples<br />I can’t believe its not Flash!<br />
Links<br />Facebook Search: 	http://demos.9lessons.info/auto.htm<br />Photoslider:		http://css-tricks.com/examples/Anythin...
Conclusion<br />Impressed?<br />
Who’s using jQuery?<br />Google<br />Dell<br />Bank of America<br />Mozilla<br />Drupal<br />NetFlix<br />NBC<br />Digg<br />
How can I learn and use jQuery<br />Check out jQuery.com Documentation<br />Sites like www.jquerytutorials.com<br />Plugin...
Closing Remarks<br />Thank you for listening.<br />If you have any queries, please feel free to ask . <br />If you want to...
References<br />jQuery: www.jQuery.com<br />jQuery 1.4 Reference Guide(Jan 2010), Pack Publishing<br />www.noupe.com<br />...
Upcoming SlideShare
Loading in...5
×

J Query Presentation

5,993

Published on

A presentation on jQuery, how you can use it on your website, with links to live examples.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,993
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
165
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

J Query Presentation

  1. 1. Vishal Kumar<br />06131A1258<br />
  2. 2. Introduction<br />Why you’re going to love jQuery!<br />
  3. 3. Introduction<br />What we want to create?<br />Dynamic Live Websites<br />Effects filled <br />Fast, responsive sites<br />What do we have?<br />Flash<br />Java<br />Javascript<br />
  4. 4. The Solution : jQuery<br />What is jQuery?<br />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.<br />
  5. 5. History of jQuery<br />Developed by John Resig<br />Released v1.0 on November 26th, 2006<br />Maintained as an Open Source software (dual licensed under MIT and GNU GPL)<br />Microsoft planning to integrate into Microsoft Visual Web Developer<br />Nokia planning to integrate into Web Run-Time platform<br />Currently on Version 1.4, released<br />
  6. 6. Features of jQuery<br />DOM element selections using the cross-browser open source selector engine Sizzle<br />DOM traversal and modification<br />Events<br />CSS manipulation<br />Effects and animations<br />AJAX<br />Extensibility through plugins<br />Utilities - such as browser version and the each function.<br />
  7. 7. A Few Examples<br />Forms<br />Chatboxes<br />Menus<br />Dropdowns<br />Sliders<br />Tabs<br />Slideshows<br />Games<br />
  8. 8. jQuery Enhanced Forms<br />
  9. 9. Menus and Dropdowns<br />
  10. 10. Sliders and Slideshows<br />
  11. 11. Technical Implementation<br />Because, after all, we are I.T. folks.<br />
  12. 12. jQuery Object<br />The jQuery Object<br />Contains a reference to the DOM element<br />Has properties of the DOM element, like text, html, tags<br />Can be used to manipulate the DOM directly<br />Can be nested<br />Every jQuery Function Should return the same jQuery object<br />
  13. 13. Using jQuery<br />Download the .JS file (23KB otal, minified)<br />Use the jQuery file hosted on Google’s Code servers<br />&lt;html&gt; <br /> &lt;head&gt; <br /> &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt; &lt;/script&gt; <br /> &lt;script type=&quot;text/javascript&quot;&gt; &lt;/script&gt; <br /> &lt;/head&gt; <br /> &lt;body&gt; &lt;a href=&quot;http://jquery.com/&quot;&gt;jQuery&lt;/a&gt; &lt;/body&gt; <br />&lt;/html&gt;<br />
  14. 14. jQuery Syntax<br />$(document).ready(function()<br />{ <br /> $(&quot;a&quot;).click(function(event)<br /> { <br /> alert(&quot;Thanks for visiting!&quot;); <br /> });<br />});<br />
  15. 15. The $ Symbol<br />$ is the Shortcut for the jQuery Global Class<br />Use it to access any part of the DOM<br />Search by CSS to get the element.<br />Returns a jQuery object which can be futher manipulated<br />
  16. 16. DOM Traversing<br />Document Object Model:<br />The way of representing the Elements of a Document as Objects<br />Way we represent HTML, XML, XHTML<br />From BODY, P, DIV, SPAN, etc. Any element can be accessed from its DOM structure<br />
  17. 17. Chainable Functions<br />Chainable events: find this, do several things in succession<br />$(&apos;#message2&apos;).fadeIn(&apos;slow&apos;).addClass(&apos;alert&apos;).html(&apos;Validate your markup!&apos;);<br />Allows us to create complex yet easy to understand chains of actions<br />
  18. 18. jQuery Animations<br />Animations<br />Built in<br />fadeIn()<br />fadeOut()<br />hide()<br />show()<br />slideDown()<br />slideUp()<br />toggle()<br />slideToggle()<br />fadeTo()<br />animate()<br />See also:<br />Easing Plug-in<br />jQuery User Interface: http://ui.jquery.com<br />
  19. 19. When is the DOM Ready?<br />When is DOM ready?<br />We can use the ready() function to find out<br />$(document).ready(function() <br />{    // Write Code Here<br />});<br />
  20. 20. CSS & Attribute Matching<br />Search with Tags and CSS:<br />$(&apos;p&apos;);<br />$(&apos;p.message&apos;);<br />$(&apos;#message .text&apos;);<br />$(&apos;ul#menu &gt; li&apos;);<br />$(&apos;ul#menuul&apos;);<br />Attribute Matching:<br />$(&apos;img[@alt]&apos;);<br />$(&apos;a[@href*=google]&apos;);<br />
  21. 21. jQuery Events<br />Don&apos;t add &quot;onclick&quot; to your markup: use jQuery to find and assign events<br />$(&apos;#control&apos;).click(function() {    $(&apos;#message&apos;).show().addClass(&apos;alert&apos;);});<br />$(&apos;#control&apos;).toggle(function() {    $(&apos;#message&apos;).show().addClass(&apos;alert&apos;);}, function(){    $(&apos;#message&apos;).removeClass(&apos;alert&apos;).hide();});<br />
  22. 22. jQuery with Other Frameworks<br />Mootools<br />Prototype, etc<br />Other frameworks also use the $ shortcut<br />Add code like this before making any jQuery calls:<br />varfoo = jQuery.noConflict();<br />Then use it like this:<br />foo(&apos;#message&apos;).show();<br />
  23. 23. AHAH !?!<br />AHAH style (Asynchronous HTML and HTTP)<br />Easiest way of creating Asynchronous sites<br />$(&apos;#control&apos;).click(function() <br /> {    $(&apos;#message&apos;).load(&apos;current.php&apos;);});<br />
  24. 24. AJAX with jQuery<br />Asynchronous Javascript and XML<br />AJAX - Processing the feed<br />$(&apos;#demo5-1&apos;).click(function() { $(&apos;#headline-container&apos;).html(&apos;&apos;);    $.get(&apos;headlines.xml&apos;, function(rss){        $(rss).find(&apos;item title&apos;).each(function(index) {            $(&apos;#headline-container&apos;).append(&apos;&lt;p&gt;&apos; + $(this).text() + &apos;&lt;/p&gt;&apos;);        });    });});<br />
  25. 25. Live Examples<br />I can’t believe its not Flash!<br />
  26. 26. Links<br />Facebook Search: http://demos.9lessons.info/auto.htm<br />Photoslider: http://css-tricks.com/examples/AnythingSlider/#panel-5<br />Tabbed Manu: http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html<br />Flip: http://lab.smashup.it/flip/<br />Gallery: http://visuallightbox.com/photo-gallery-with-lightbox-simple-html-demo.html<br />Zoom image: http://www.hotajax.org/demo/jquery/zoomimage/zoomimage/index.html<br />Mac Dock: http://nettuts.s3.cdn.plus.org/358_jquery/example%20files/all-examples.html<br />Site with jQuery: http://pupunzi.com/#welcome.html<br />3d Sphere in jQuery: http://www.devirtuoso.com/Examples/3D-Engine/sphere.html<br />Chat Noir: www.vishalkumar.in/works/jscat<br />
  27. 27. Conclusion<br />Impressed?<br />
  28. 28. Who’s using jQuery?<br />Google<br />Dell<br />Bank of America<br />Mozilla<br />Drupal<br />NetFlix<br />NBC<br />Digg<br />
  29. 29. How can I learn and use jQuery<br />Check out jQuery.com Documentation<br />Sites like www.jquerytutorials.com<br />Plugins for many of the features<br />Apply it to any web based application<br />Change the way you develop websites, and bring life to the online experience!<br />
  30. 30. Closing Remarks<br />Thank you for listening.<br />If you have any queries, please feel free to ask . <br />If you want to know how you can use a particular module of technology for your project or application, contact me at<br />vishalkumar@gmail.com<br />+91 9985 463 469<br />
  31. 31. References<br />jQuery: www.jQuery.com<br />jQuery 1.4 Reference Guide(Jan 2010), Pack Publishing<br />www.noupe.com<br />www.jquerytutorials.com<br />http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/<br />www.google.com/images (search “jquery &lt;feature&gt;”)<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×