digesting jquery
TRANSCRIPT
![Page 1: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/1.jpg)
Digesting jQuery...
Presenter: Subhranil Dalal
![Page 2: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/2.jpg)
Be Strong Enough
![Page 3: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/3.jpg)
Go for Latest
![Page 4: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/4.jpg)
All Modern Browser
Older IE
![Page 5: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/5.jpg)
CDN vs Local
![Page 6: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/6.jpg)
CDN?? Why??
![Page 7: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/7.jpg)
Choose your food smartly
![Page 8: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/8.jpg)
Bad selection
![Page 9: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/9.jpg)
Be Smart Use an ID if possible, $('#element');
Use tag selector next. Its the second fastest selector. $('div')
Avoid selecting by class only. Class selectors are the slowest selector. $('.myClass').
Only use class selector with context name. $('div.myClass')
Increase specificity from Left to Right.
$('p#intro em') vs. $('em', $('p#intro'))
![Page 10: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/10.jpg)
Find Me
![Page 11: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/11.jpg)
$.find()
Use find() instead of specifying an explicit context.
The key is to stray away from forcing jQuery to use Sizzle engine.
$('#someDiv p.someClass').hide()
$('#someDiv').find('p.someClass').hide()
http://jsfiddle.net/subhranild/y54Ljv14/
http://jsperf.com/subh-li-last
![Page 12: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/12.jpg)
Cage Me
![Page 13: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/13.jpg)
Cache the Selector
http://jsfiddle.net/subhranild/rbmu4ah1/http://jsperf.com/subh-cache-query
![Page 14: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/14.jpg)
Chain Me
![Page 16: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/16.jpg)
Group Me
![Page 18: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/18.jpg)
DOM isn't Database
![Page 19: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/19.jpg)
DOM insertion is costly
![Page 20: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/20.jpg)
No iterative DOM manipulation
http://jsperf.com/subh-select-dynamic-options/2
![Page 21: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/21.jpg)
detach() is the game changer
![Page 22: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/22.jpg)
Beware of .css() Iteration
![Page 24: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/24.jpg)
Incorrect approach
![Page 25: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/25.jpg)
Correct approach
![Page 26: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/26.jpg)
Best approach
http://jsperf.com/subh-css-vs-style-few
http://jsperf.com/subh-css-vs-style
![Page 27: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/27.jpg)
Event Delegation
![Page 28: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/28.jpg)
http://jsfiddle.net/subhranild/sawn1rv4/http://jsfiddle.net/subhranild/sawn1rv4/1/
![Page 29: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/29.jpg)
Event Propagation
Understanding how events propagate is an important factor in being able to leverage Event Delegation. Any time one of our anchor tags is clicked, a click event is fired for that anchor, and then bubbles up the DOM tree, triggering each of its parent click event handlers:
● <a>● <li>● <ul #list>● <div #container>● <body>● <html>● document root
This means that anytime you click one of our bound anchor tags, you are effectively clicking the entire document body! This is called event bubbling or event propagation.
http://jsfiddle.net/subhranild/1zcv45kf/http://jsfiddle.net/subhranild/1zcv45kf/1/
![Page 30: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/30.jpg)
bind() vs delegate() vs on()
![Page 31: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/31.jpg)
bind()
The .bind() method attaches the event handler directly to the DOMelement in question ( "#members li a" ). The .click() method isjust a shorthand way to write the .bind() method. $( "#members li a" ).bind( "click", function( e ) {} );$( "#members li a" ).click( function( e ) {} );
● For a simple ID selector, using .bind() not only wires-up quickly, but also when the event fires the event handler is invoked almost immediately.
● The method attaches the same event handler to every matched element in the selection.● It doesn't work for elements added dynamically that matches the same selector.● There are performance concerns when dealing with a large selection.● The attachment is done upfront which can have performance issues on page load.
![Page 32: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/32.jpg)
delegate()
The .delegate method attaches the event handler to the root level document along with the associated selector and event information. By registering this information on the document it allows one event handler to be used for all events that have bubbled (a.k.a. delegated, propagated) up to it. Once an event has bubbled up to the document jQuery looks at the selector/event metadata to determine which handler it should invoke, if any. This extra work has some impact on performance at the point of user interaction, but the initial register process is fairly speedy. $( "#members" ).delegate( "li a", "click", function( e ) {} );
● You have the option of choosing where to attach the selector/event information.● The selection isn't actually performed up front, but is only used to register onto the root element.● Chaining is supported correctly.● Since this technique uses event delegation, it can work with dynamically added elements to the DOM where the selectors match.
![Page 33: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/33.jpg)
on()
That the new .on() method is mostly syntax sugar that can mimic .bind(), .live(), or .delegate() depending on how you call it.
$( "#members li a" ).on( "click", function( e ) {} );$( document ).on( "click", "#members li a", function( e ) {} ); $( "#members" ).on( "click", "li a", function( e ) {} );
● Using the .bind() method is very costly as it attaches the same event handler to every item matched in your selector.● You should stop using the .live() method as it is deprecated and has a lot of problems with it.● The .delegate() method gives a lot of "bang for your buck" when dealing with performance and reacting to dynamically added elements.● That the new .on() method is mostly syntax sugar that can mimic .bind(), .live(), or .delegate() depending on how you call it.
http://jsperf.com/subh-bind-delegate-on
![Page 34: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/34.jpg)
Passing data to the handler
Multiple Event Handlers
![Page 35: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/35.jpg)
Cut the Wire
![Page 36: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/36.jpg)
Abort AJAX
https://jboyblogger.wordpress.com/2014/10/05/why-and-how-to-abort-an-ajax-call-in-jquery/
![Page 37: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/37.jpg)
Go Parallel
![Page 38: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/38.jpg)
Deferred AJAX
https://jboyblogger.wordpress.com/2014/11/25/call-ajax-in-parallel-instead-of-in-a-chain/
![Page 39: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/39.jpg)
Beauty of Loading
![Page 40: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/40.jpg)
.load()
http://plnkr.co/edit/a6dPRHJKdYmiNuRThlOc?p=preview
![Page 41: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/41.jpg)
Understanding Attribute and Property
![Page 42: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/42.jpg)
attr() vs. prop()The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
Concerning boolean attributes, consider a DOM element defined by the HTML markup <input type="checkbox" checked="checked" />, and assume it is in a JavaScript variable named elem:
![Page 43: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/43.jpg)
Hiding Face?? Not Good!!!
![Page 44: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/44.jpg)
Go for data()
![Page 45: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/45.jpg)
A bit of Closure
![Page 46: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/46.jpg)
Be careful while attaching event in loop
http://jsfiddle.net/subhranild/783dsfz2/
http://jsfiddle.net/subhranild/ywr5ka8u/
![Page 47: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/47.jpg)
migrate vs noConflict
![Page 48: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/48.jpg)
migrate
They say there are no second acts in software … well, there are always second acts in software. Especially when the first act bombs. With that in mind, version 1.2.1 of the jQuery Migrate plugin has arrived. It can be used with either jQuery 1.9 or jQuery 2.0.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script><script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
https://github.com/jquery/jquery-migrate#readme
![Page 49: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/49.jpg)
noConflict
Load two versions of jQuery . Then, restore jQuery's globally scoped variables to the first loaded jQuery.
<script src="http://code.jquery.com/jquery-1.9.0.js"></script><script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
http://plnkr.co/edit/9FTT11dy7NSSMywbOzTy?p=preview
![Page 50: Digesting jQuery](https://reader036.vdocuments.mx/reader036/viewer/2022081516/55a58cfe1a28ab51528b45ec/html5/thumbnails/50.jpg)