jQuery Tips, Tricks & Trivia

'Anil' RadhakrishnaBlog: Tech Tips, Tricks & Trivia - http://mvark.blogspot.com

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

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

 

    

 

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

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]')

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] ) 

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       

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...});

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 

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 -

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/

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

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.

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

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/

     

jQuery - The Write Less, Do More, JavaScript Library

  

Q & A