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