The document discusses best practices for using jQuery to enhance web development productivity, emphasizing the importance of efficient selectors, caching, and event delegation. It highlights tools like Firebug and Chrome Developer Tools, and offers performance tips, such as limiting DOM manipulation and optimizing code structure. Additionally, it promotes focusing on design architecture and understanding various JavaScript patterns for better code organization.

1. jQueryDoing it rightGirish Gangadharan@appoosagirish@giri.shhttp://giri.sh

2. Tools for the tradeProper tools = Enhanced productivity + Makes work fun Firebug is your best friend (Can’t believe it’s free!)

3. Chrome Developer Tools

4. IE Web Developer Toolbar

5. FiddlerSizzleSelector engine used by jQuery created by John Resig.Now spun off to its own project – http://SizzleJS.com Completely standalone (no library dependencies)

6. Only 4KB minified and gzipped

7. Highly extensible with easy-to-use APIWriting better selectorsSpeed up performance with better queries ID selector is the fastest

8. Use tag names in selectors

9. Be more specific on the right side query

10. Don’t overdo the selectorsIs the DOM ready?Well, should you wait?Not everything needs to be done in $(document).ready(). $(document).ready(function () { //Do stuff here that can be done only after the DOM is loaded }); $('#container a').click(function () { //Do other stuff here });

11. Cache is awesomeUse it as often and as much as you canLimited DOM traversal = Better performancevar $h2s = $('#container h2'); $h2s.css('border', '1px solid #666666'); $h2s.click( function() { $(this).next('div').slideToggle(); });

12. 'Context' is fast. 'Find' is faster.Try not to involve the Sizzle engine if you can $('child', $('#parent')); (internally calls) $('#parent').find('child');

13. ChainingLess code. Better readability.$('p#elementId').css('border', '3px dashed yellow').css('background-color', 'orange').fadeIn('slow');

14. Bind() Vs Live() Vs Delegate()Understand what each does. Use appropriately.$('#sometable').each(function(){ $('td', this).bind('hover', function(){ $(this).toggleClass('hover'); }); });$('#sometable').each(function(){ $('td', this).live('hover', function(){ $(this).toggleClass('hover'); }); });$('#sometable').delegate('td', 'hover', function(){ $(this).toggleClass('hover');});

15. Native calls Vs jQueryNative calls are always faster even if a tad bitFor example,$(this).attr('id'); // Fastthis.id; // Faster

16. Limit DOM manipulationCreate what you need in memory. Then update the DOM. BADvar $mylist = $('#mylist'); // <ul> for (vari = 0; i < 100; i++) { $mylist.append('<li>' + bestsellers[i] + '</li>'); }GOODvar $mylist = $('#mylist'); // <ul> varconcatenatedList = “”;for (vari = 0; i < 100; i++) {concatenatedList += ('<li>' + bestsellers[i] + '</li>'); }$mylist.append(concatenatedList);

17. Event delegationBind fewer events to the elements for better performance.BAD$('#myListli).bind('click', function() { // do stuff });GOOD$('#myList).bind('click', function(e){ var target = e.target;if (target.nodeName === 'LI') { // do stuff} });