• Save
jQuery - 10 Time-Savers You (Maybe) Don't Know
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,246 views

 

Statistics

Views

Total Views
2,246
Views on SlideShare
1,710
Embed Views
536

Actions

Likes
2
Downloads
0
Comments
0

2 Embeds 536

http://giri.sh 535
http://www.google.co.in 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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();});$items.addClass(„active‟);$items.closest(„p#category‟).animate({ height:100px });
  • Less code. Better readability.var $userprofile = $(„#user-profile‟);$userprofile .hover(function () { $(this).addClass(“highlight"); }, function () { $(this).removeClass(“highlight"); }) .click(function() { //do something }) .fadeIn(„slow‟);
  • 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)
  • 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); });
  • 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);
  • Bind less.$(„#reports td‟).bind(„click‟, function() { //do something})$(„#reports‟).bind(„click‟, function(e) { var target = e.target; if (target.nodeName === „td) { // do something }})
  • 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.})
  • 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.getElementById(„elementId‟); $(„#elementId‟).css(„display‟, „block‟); Vs. document.getElementById(„elementId‟).style.display = „block‟; Do you really need a whole library to accomplish your tasks?
  • 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.
  • 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
  • 10 Time-Savers You (Maybe) Dont Know Girish Gangadharan@appoosa girish@giri.sh http://giri.sh