jQuery Tips Tricks Trivia

jQuery Tips, Tricks & Trivia 'Anil' Radhakrishna Blog: 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 Overview
Selectors -
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
decreased latency
increased parallelism
better caching

Microsoft Ajax CDN hosts:
jQuery (versions 1.3.2 to 1.4.2)
jQuery Validation library (versions 1.5.5 to 1.7)
File to reference looks like this - http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js

Google CDN hosts:
jQuery (versions 1.2.3 to 1.4.2)
jQuery UI (versions 1.5.2 to 1.8.1)
File to reference looks like this - http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

More info:
Microsoft Ajax CDN: http://www.asp.net/ajaxlibrary/cdn.ashx
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 -
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
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

http://www.slideshare.net	38
http://webcache.googleusercontent.com	2
http://www.techgig.com	1

jQuery Tips Tricks Trivia

by AnilRK on May 16, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 41

Statistics

jQuery Tips Tricks Trivia — Presentation Transcript