jQuery Tips Tricks Trivia


Published on

The samples & links referenced in the presentation are at this link - http://www26.brinkster.com/mvark/jquery/

Published in: Technology, Design
1 Comment
1 Like
  • The samples & links referenced in the presentation are at this link - http://www26.brinkster.com/mvark/jquery/
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQuery Tips Tricks Trivia

  1. 1. jQuery Tips, Tricks & Trivia 'Anil' Radhakrishna Blog: Tech Tips, Tricks & Trivia - http:// mvark .blogspot.com
  2. 2. Popular JavaScript frameworks <ul><ul><li>jQuery </li></ul></ul><ul><ul><li>Ext JS </li></ul></ul><ul><ul><li>MooTools </li></ul></ul><ul><ul><li>Prototype & script.aculo.us </li></ul></ul><ul><ul><li>YUI </li></ul></ul><ul><ul><li>Google Web Toolkit </li></ul></ul><ul><ul><li>Dojo </li></ul></ul><ul><li>Selection factors - frequent releases, licensing, size, documentation & support, features, browser support </li></ul><ul><li>Comparison - http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks </li></ul>
  3. 3. Why should you use jQuery? <ul><ul><li>Cross-browser (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)  - jQuery abstracts away browser quirks. </li></ul></ul><ul><ul><li>Extensible - 4000+ plugins </li></ul></ul><ul><ul><li>Based on CSS Selectors </li></ul></ul><ul><ul><li>&quot;Write less, do more&quot; - Allows multiple actions in one line (Chaining), works with sets using implicit iteration </li></ul></ul><ul><ul><li>Improved performance - the Minified and Gzipped version of the jQuery library is just 24KB (jQuery v1.4.2)  </li></ul></ul><ul><ul><li>Simplified Event Handling </li></ul></ul><ul><ul><li>In September 2008, Microsoft and Nokia adopted jQuery as part of their official application development platform.  </li></ul></ul><ul><ul><li>jQuery is included in over 21% of the Alexa's top 10,000 web sites.   </li></ul></ul><ul><ul><li>Track popular sites using jQuery - http://twitter.com/jquerysites </li></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>
  4. 4. What jQuery can do <ul><ul><li>DOM selection & manipulation </li></ul></ul><ul><ul><li>Event-handling </li></ul></ul><ul><ul><li>Animation effects - show/hide, fading, sliding, custom </li></ul></ul><ul><ul><li>AJAX - get(), post(), load(), getJSON() </li></ul></ul><ul><ul><li>Simplify common JavaScript tasks </li></ul></ul><ul><li>  </li></ul><ul><li>Trivia: John Resig was 22 when he started jQuery in 2006 </li></ul>
  5. 5. jQuery Overview <ul><li>Selectors - </li></ul><ul><ul><li>pattern matching techniques to identify DOM elements in a webpage, pick & manipulate them </li></ul></ul><ul><ul><li>based on CSS Selector syntax </li></ul></ul><ul><ul><li>find by Id, Class, Element name, Position </li></ul></ul><ul><ul><li>ex - $('#some-id'), $('.some-class'), $('p') </li></ul></ul><ul><li>  </li></ul><ul><li>Attribute selectors - </li></ul><ul><ul><li>subset of CSS selectors </li></ul></ul><ul><ul><li>allow us to specify an element by one of its HTML properties </li></ul></ul><ul><ul><li>ex - $('img[alt]') </li></ul></ul><ul><li>  </li></ul><ul><li>XPath selectors - </li></ul><ul><ul><li>can be used alongside CSS selectors in jQuery </li></ul></ul><ul><ul><li>ex - $('a[@title]') </li></ul></ul>
  6. 6. jQuery Terminology (continued) <ul><li>Pseudo class -  </li></ul><ul><ul><li>used to add special effects to some selectors, as in CSS ( ex- a:visited ). </li></ul></ul><ul><ul><li>further refinement of selection </li></ul></ul><ul><ul><li>expressions that start with a colon </li></ul></ul><ul><ul><li>  ex - tr :last , </li></ul></ul><ul><li>  </li></ul><ul><li>Chaining - </li></ul><ul><ul><li>get multiple sets of elements and do multiple things with them, all within a single line of code.  </li></ul></ul><ul><ul><li>only works when result of a method is a jQuery object </li></ul></ul><ul><ul><li>Ex - $('td:contains(&quot;Henry&quot;)').next().addClass('highlight'); </li></ul></ul><ul><li>             OR also written as: </li></ul><ul><li>             $('td:contains(&quot;Henry&quot;)') </li></ul><ul><li>             .next() </li></ul><ul><li>             .addClass('highlight'); </li></ul><ul><li>Events - </li></ul><ul><ul><li>cleanly separated from the markup in jQuery </li></ul></ul><ul><ul><li>shorthand event methods exist for all standard DOM events Ex -  $('#button1').click( [fn] )  </li></ul></ul>
  7. 7. jQuery Terminology (continued) <ul><li>Compound event handlers - </li></ul><ul><li>intercept combinations of user actions, and respond to them using more than one function. </li></ul><ul><li>for convenience and cross-browser optimization. </li></ul><ul><li>Ex-  .ready(), .toggle() and .hover() event-handling methods </li></ul><ul><li>  </li></ul><ul><li>   </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>
  8. 8. Different ways of using .ready() method <ul><li>$(document).ready(function() {   // your code here... }); </li></ul><ul><li>$().ready(function() {  // your code here... }); </li></ul><ul><li>jQuery(function($){   // your code here... }); </li></ul><ul><li>$(function() {   // your code here... }); </li></ul>
  9. 9. Experiment interactively with Firebug Console & jQuerify Bookmarklet <ul><ul><li>Test jQuery statements with Firebug Console instead of going through the process of editing, saving, reloading  </li></ul></ul><ul><ul><li>Drag the jQuerify Bookmarklet to the Bookmarks toolbar or Favorites Bar in IE8 </li></ul></ul><ul><ul><li>jQuerify Bookmarklet - http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet </li></ul></ul><ul><ul><li>Use JS Bin (http://jsbin.com/) and JS Fiddle (http://jsfiddle.net/) for collaborative JavaScript coding  </li></ul></ul>
  10. 10. Take advantage of jQuery Intellisense in Visual Studio <ul><ul><li>Add the jQuery IntelliSense documentation file for the specific version you are working with </li></ul></ul><ul><ul><li>&quot;vsdoc&quot; file available from the jQuery site & Microsoft's Ajax CDN </li></ul></ul><ul><ul><li>If you're inside an ASPX page, add the following lines of code into the head of your page to trigger Intellisense: </li></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><ul><li>To trigger it inside a script - </li></ul></ul>
  11. 11. Use jQuery from a CDN <ul><ul><li>Use the jQuery Library from Microsoft or Google's Content Delivery Network to achieve  </li></ul></ul><ul><ul><ul><li>decreased latency </li></ul></ul></ul><ul><ul><ul><li>increased parallelism </li></ul></ul></ul><ul><ul><ul><li>better caching </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>Microsoft Ajax CDN hosts: </li></ul></ul><ul><ul><ul><li>jQuery (versions 1.3.2 to 1.4.2) </li></ul></ul></ul><ul><ul><ul><li>jQuery Validation library (versions 1.5.5 to 1.7) </li></ul></ul></ul><ul><ul><ul><li>File to reference looks like this - http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>Google CDN hosts: </li></ul></ul><ul><ul><ul><li>jQuery (versions 1.2.3 to 1.4.2) </li></ul></ul></ul><ul><ul><ul><li>jQuery UI (versions 1.5.2 to 1.8.1)  </li></ul></ul></ul><ul><ul><ul><li>File to reference looks like this - http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>More info: </li></ul></ul><ul><ul><ul><li>Microsoft Ajax CDN: http://www.asp.net/ajaxlibrary/cdn.ashx </li></ul></ul></ul><ul><ul><ul><li>Google CDN: http://code.google.com/apis/ajaxlibs/documentation/ </li></ul></ul></ul>
  12. 12. Leverage jQuery Plugins <ul><ul><li>Package re-usable jQuery code as a plugin </li></ul></ul><ul><ul><li>Make sure it appears after the main jQuery source file </li></ul></ul><ul><ul><li>Over 20 categories & 4000+ plugins listed on the official jQuery Plugins site </li></ul></ul><ul><ul><li>Lightbox - overlay detailed information on top of a page without the use of a popup window </li></ul></ul><ul><ul><li>jQuery UI is a whole library of plugins. </li></ul></ul><ul><ul><li>jQuery UI consists of a number of core interaction </li></ul></ul><ul><ul><li>components and full-fledged themeable widgets to help make the web experience more like that of a desktop application. </li></ul></ul><ul><ul><li>jQuery UI ThemeRoller - web-based interactive theme engine for UI widgets.  </li></ul></ul><ul><ul><li>jQuery UI widgets - </li></ul></ul><ul><ul><ul><li>Accordion </li></ul></ul></ul><ul><ul><ul><li>Autocomplete </li></ul></ul></ul><ul><ul><ul><li>Button </li></ul></ul></ul><ul><ul><ul><li>Datepicker </li></ul></ul></ul><ul><ul><ul><li>Dialog </li></ul></ul></ul><ul><ul><ul><li>Progressbar </li></ul></ul></ul><ul><ul><ul><li>Slider </li></ul></ul></ul><ul><ul><ul><li>Tabs </li></ul></ul></ul>
  13. 13. Screen scrape pages with jQuery, JSONP & YQL <ul><ul><li>JavaScript's &quot;same origin policy&quot; restricts interaction among pages from different domains. </li></ul></ul><ul><ul><li>JSONP is a cross-domain communication technique that bypasses the same-origin policy limitation. </li></ul></ul><ul><ul><li>JSONP (JSON with Padding) file format consists of a standard JSON fle that has been wrapped in parentheses and prepended with an arbitrary text string.  </li></ul></ul><ul><ul><li>YQL is a hosted web service that can scrape HTML for you. It also runs the HTML through HTML Tidy and caches it for you. </li></ul></ul><ul><ul><li>YQL (Yahoo! Query Language) can act as a facilitator by reaching out for web content and then re-packaging it as JSONP that can be injected into a web page. </li></ul></ul>
  14. 14. More tips <ul><ul><li>Write unobtrusive JavaScript. Even if JavaScript is disabled it should degrade gracefully </li></ul></ul><ul><ul><li>Use IDs instead of classes wherever possible </li></ul></ul><ul><ul><li>Don’t use jQuery unless there’s a good reason to </li></ul></ul><ul><ul><li>Place <link rel=&quot;stylesheet&quot;> tags prior to <script> tags within the document's <head> element. </li></ul></ul><ul><ul><li>Don’t overdo Chaining </li></ul></ul><ul><ul><li>Don't abuse plug-ins. Choose plug-ins which are supported and maintained. </li></ul></ul><ul><ul><li>Always use the latest jQuery version </li></ul></ul><ul><ul><li>Contribute to the jQuery community - report bugs, feedback </li></ul></ul><ul><ul><li>Follow jQuery on Twitter: @jquery,@jqueryui,@jeresig </li></ul></ul>
  15. 15. References <ul><li>  </li></ul><ul><li>Books : </li></ul><ul><ul><li>jQuery in Action (Manning) </li></ul></ul><ul><ul><li>Learning jQuery (Packt) </li></ul></ul><ul><li>  </li></ul><ul><li>Videos: </li></ul><ul><ul><li>jQuery for the ASP.NET Developer - http:// channel9 .msdn.com/posts/matthijs/jQuery-for-the-ASPNET-Developer-by-Scott-Allen/ </li></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>
  16. 16. jQuery - The Write Less, Do More, JavaScript Library <ul><li>  </li></ul><ul><li>  </li></ul><ul><li>Q & A </li></ul>