10 Time-Savers You (Maybe) Dont Know           Girish Gangadharan@appoosa        girish@giri.sh      http://giri.sh
Limit DOM traversalvar $items = $(„#products‟);$items.click(function() {          $(this).next(„div‟).slideToggle();});$it...
Less code. Better readability.var $userprofile = $(„#user-profile‟);$userprofile     .hover(function () {                 ...
Don‟t leave them hanging.    :first-child, :last-child, :even, :odd, :parent, :next, :prev, etc.Precede them with a tag na...
Understand what each does. Use appropriately.         $(#sometable).each(function(){                $(td, this).bind(hover...
Create in memory. Then update the DOM.var $mylist = $(#mylist); // <ul>for (var i = 0; i < 100; i++) {           $mylist.a...
Bind less.$(„#reports td‟).bind(„click‟, function() {      //do something})$(„#reports‟).bind(„click‟, function(e) {     v...
Choose your event carefully.$(document).ready(function() {     //Fires as soon as the DOM is ready     //Doesn‟t wait for ...
Think right-to-left (except for IDs) $(#user-profiles > li > input:disabled);$(#user-profiles‟).find(„li > input:disabled);
Sizzle engine is highly optimized but…var $someElement = $(„#elementId‟);                 Vs.var someElement = document.ge...
Will this improve page performance by x times?                        Probably, not.(especially if you don‟t have a comple...
Essential JavaScript Design Patterns: (Free!)http://addyosmani.com/blog/essentialjsdesignpatternsupdate1jQuery: Novice to ...
10 Time-Savers You (Maybe) Dont Know           Girish Gangadharan@appoosa        girish@giri.sh      http://giri.sh
jQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't Know
Upcoming SlideShare
Loading in...5
×

jQuery - 10 Time-Savers You (Maybe) Don't Know

2,919

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,919
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

jQuery - 10 Time-Savers You (Maybe) Don't Know

  1. 1. 10 Time-Savers You (Maybe) Dont Know Girish Gangadharan@appoosa girish@giri.sh http://giri.sh
  2. 2. Limit DOM traversalvar $items = $(„#products‟);$items.click(function() { $(this).next(„div‟).slideToggle();});$items.addClass(„active‟);$items.closest(„p#category‟).animate({ height:100px });
  3. 3. Less code. Better readability.var $userprofile = $(„#user-profile‟);$userprofile .hover(function () { $(this).addClass(“highlight"); }, function () { $(this).removeClass(“highlight"); }) .click(function() { //do something }) .fadeIn(„slow‟);
  4. 4. Don‟t leave them hanging. :first-child, :last-child, :even, :odd, :parent, :next, :prev, etc.Precede them with a tag name or some selector; else the universal selector is implied. $(:focus) = $(*:focus)
  5. 5. 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); });
  6. 6. Create in memory. Then update the DOM.var $mylist = $(#mylist); // <ul>for (var i = 0; i < 100; i++) { $mylist.append(<li> + bestsellers[i] + </li>);}var $mylist = $(#mylist); // <ul>var concatenatedList = “”;for (var i = 0; i < 100; i++) { concatenatedList += (<li> + bestsellers[i] + </li>);}$mylist.append(concatenatedList);
  7. 7. Bind less.$(„#reports td‟).bind(„click‟, function() { //do something})$(„#reports‟).bind(„click‟, function(e) { var target = e.target; if (target.nodeName === „td) { // do something }})
  8. 8. Choose your event carefully.$(document).ready(function() { //Fires as soon as the DOM is ready //Doesn‟t wait for images, style sheets etc.})$(window).load(function() { //Fires after all the content is loaded //Includes images, style sheets, etc.})
  9. 9. Think right-to-left (except for IDs) $(#user-profiles > li > input:disabled);$(#user-profiles‟).find(„li > input:disabled);
  10. 10. Sizzle engine is highly optimized but…var $someElement = $(„#elementId‟); Vs.var someElement = document.getElementById(„elementId‟); $(„#elementId‟).css(„display‟, „block‟); Vs. document.getElementById(„elementId‟).style.display = „block‟; Do you really need a whole library to accomplish your tasks?
  11. 11. Will this improve page performance by x times? Probably, not.(especially if you don‟t have a complex multi-nested DOM) For example, how to better structure your code. • Module Pattern • Revealing Module Pattern • Constructional Pattern • Creational Pattern • Factory Pattern • etc.
  12. 12. Essential JavaScript Design Patterns: (Free!)http://addyosmani.com/blog/essentialjsdesignpatternsupdate1jQuery: Novice to Ninjahttp://www.amazon.com/jQuery-Novice-Ninja-Earle-Castledine/dp/0980576857 jQuery API http://api.jquery.com JavaScript Performance Testing http://jsperf.com/browse
  13. 13. 10 Time-Savers You (Maybe) Dont Know Girish Gangadharan@appoosa girish@giri.sh http://giri.sh

×