Digesting jQuery

Digesting jQuery...
Presenter: Subhranil Dalal

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'))

$.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

Cache the Selector
http://jsfiddle.net/subhranild/rbmu4ah1/
http://jsperf.com/subh-cache-query

Take advantage of jQuery Chaining
http://jsperf.com/subh-chaining

Group up Selectors
http://jsperf.com/subh-group-selector

No iterative DOM manipulation
http://jsperf.com/subh-select-dynamic-options/2

Incorrect approach
Correct approach
http://jsperf.com/subh-css

Best approach
http://jsperf.com/subh-css-vs-style-few
http://jsperf.com/subh-css-vs-style

http://jsfiddle.net/subhranild/sawn1rv4/
http://jsfiddle.net/subhranild/sawn1rv4/1/

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/

bind()
The .bind() method attaches the event handler directly to the DOM
element in question ( "#members li a" ). The .click() method is
just 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.

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.

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

Passing data to the handler
Multiple Event Handlers

Abort AJAX
https://jboyblogger.wordpress.com/2014/10/05/why-and-how-to-abort-an-ajax-call-in-jquery/

Deferred AJAX
https://jboyblogger.wordpress.com/2014/11/25/call-ajax-in-parallel-instead-of-in-a-chai

.load()
http://plnkr.co/edit/a6dPRHJKdYmiNuRThlOc?p=preview

Understanding Attribute and Property

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:

Be careful while attaching event in loop
http://jsfiddle.net/subhranild/783dsfz2/
http://jsfiddle.net/subhranild/ywr5ka8u/

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

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

Digesting jQuery

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Digesting jQuery

Similar to Digesting jQuery (20)

More from Mindfire Solutions

More from Mindfire Solutions (20)

Recently uploaded

Recently uploaded (20)

Digesting jQuery