Pimp my Ride jQuery
By @Jack_Franklin

Load from Google

Load from Google
• Google’s CDN allows you to load jQuery:
<script type="text/javascript" src=http://
ajax.googleapis.com/ajax/libs/jquery/1/
jquery.min.js">

Load from Google
• Google’s CDN allows you to load jQuery:
<script type="text/javascript" src=http://
ajax.googleapis.com/ajax/libs/jquery/1/
jquery.min.js">
• Always load most recent version or you
can be more specific as you wish.

Load from Google
• Google’s CDN allows you to load jQuery:
<script type="text/javascript" src=http://
ajax.googleapis.com/ajax/libs/jquery/1/
jquery.min.js">
• Always load most recent version or you
can be more specific as you wish.
• Chances are user may already have it
cached.

Use of CSS SelectorS!

Use of CSS SelectorS!
• jQuery Traversal functions take CSS
Selector

Use of CSS SelectorS!
• jQuery Traversal functions take CSS
Selector
• Often forgotten - use multiple selectors to
make up a CSS selector.

Use of CSS SelectorS!
• jQuery Traversal functions take CSS
Selector
• Often forgotten - use multiple selectors to
make up a CSS selector.
• EG: $(elem).siblings(“h2,p,strong”);

Use of CSS SelectorS!
• jQuery Traversal functions take CSS
Selector
• Often forgotten - use multiple selectors to
make up a CSS selector.
• EG: $(elem).siblings(“h2,p,strong”);
• Be aware of the efficiency.

Save Selectors

Save Selectors
• Urrgh:!
$(“myelem”).hide();
$(“myelem”).css(“width”, ”200”);
$(“myelem”).show();

Save Selectors
• Urrgh:!
$(“myelem”).hide();
$(“myelem”).css(“width”, ”200”);
$(“myelem”).show();
• Nicer:
var elem = $(“myelem”);
elem.hide();
elem.css(“width”, “200”);
elem.show();

Or Chain

Or Chain
• $(“myelem”).hide().css(“width”,
“200”).show();

Or Chain
• $(“myelem”).hide().css(“width”,
“200”).show();
• Either use this or caching to variables -
whichever suits you and/or the situation
best.

Chain over Multiple
Lines

Chain over Multiple
Lines
• $(“elem”).hide().addClass().show().attr();

Chain over Multiple
Lines
• $(“elem”).hide().addClass().show().attr();
• $(“elem”)
.hide()
.addClass()
//etc

Context

Context
• If you’ve cached an element, you can add
this as context as the second parameter:
$(“myelem”, someCachedElement);

Context
• If you’ve cached an element, you can add
this as context as the second parameter:
$(“myelem”, someCachedElement);
• This looks for “myelem” within
someCachedElement.

Context Continued

Context Continued
• Contextualised selectors should be in the
form:
$(selector, context)

Context Continued
• Contextualised selectors should be in the
form:
$(selector, context)
• EG:
$(“myelem”, “#somediv”);
jQuery will only search inside #somediv for
“myelem”.

Context Continued

Context Continued
• When you do use the context, jQuery just
calls the find() method on that context:
$(selector, context) = $
(context).find(selector).

Context Continued
• When you do use the context, jQuery just
calls the find() method on that context:
$(selector, context) = $
(context).find(selector).
• So the best way is to skip that step and just
do:
$(context).find(selector);

Clever Traversing
http://api.jquery.com/category/traversing/

Clever Traversing
• jQuery provides so many traversing
functions that there is often a shortcut.
http://api.jquery.com/category/traversing/

Clever Traversing
• jQuery provides so many traversing
functions that there is often a shortcut.
• Rarely should you have to go back to
where you’ve gone:
$
("elem").find("p").hide().parent().find("h2").h
ide();
http://api.jquery.com/category/traversing/

Clever Traversing
• jQuery provides so many traversing
functions that there is often a shortcut.
• Rarely should you have to go back to
where you’ve gone:
$
("elem").find("p").hide().parent().find("h2").h
ide();
• Can easily be made much nicer:
http://api.jquery.com/category/traversing/

Clever Traversing

Clever Traversing
• Be sensible - be sure to use the right
function for the right job.

Clever Traversing
• Be sensible - be sure to use the right
function for the right job.
• For example - the functions find() and
children().

Avoid Class Selection
http://www.quirksmode.org/dom/w3c_core.html

Avoid Class Selection
• getElementById and
getElementsByTagName are preferred to
getElementsByClassName - supported in all
browsers bar IE6, 7 and 8 (surprise?).
http://www.quirksmode.org/dom/w3c_core.html

Avoid Class Selection
• getElementById and
getElementsByTagName are preferred to
getElementsByClassName - supported in all
browsers bar IE6, 7 and 8 (surprise?).
• As jQuery can rely on getElementById &
getElementsByTagName select by ID or Tag
if you possibly can.
http://www.quirksmode.org/dom/w3c_core.html

Check if an Element
Exists

Check if an Element
Exists
• Easy:
if($(“elem”).length) {
//element must exist
}

Check if an Element
Exists
• Easy:
if($(“elem”).length) {
//element must exist
}
• jQuery gracefully degrades - if it does not
exist no errors thrown and nothing breaks.

Run onLoad

Run onLoad
• Run your Javascript once the DOM is
loaded like so (when using jQuery):
$(document).ready(function() {
//add code in now
}

Run onLoad
• Run your Javascript once the DOM is
loaded like so (when using jQuery):
$(document).ready(function() {
//add code in now
}
• Shorten this to:
$(function() {
//code here
}

Apply a Class to
<body>

Apply a Class to
<body>
• The first line of your code can add a class
to the body to inform you if Javascript is
on:
$(body).addClass(“javascripton”);

Apply a Class to
<body>
• The first line of your code can add a class
to the body to inform you if Javascript is
on:
$(body).addClass(“javascripton”);
• On a similar note, if you can make CSS do
the heavy work, do so. Javascript should do
the bare minimum.

Store info with
jQuery’s data method

Store info with
jQuery’s data method
• jQuery provides its own method for
storing data to be used later on.
$(“myelem”).data(“usefulstuff”,”value of
this data”)

Store info with
jQuery’s data method
• jQuery provides its own method for
storing data to be used later on.
$(“myelem”).data(“usefulstuff”,”value of
this data”)
• And it can be retrieved like so:
$(“myelem”).data(“usefulstuff”);

Surrender the $

Surrender the $
• jQuery.noConflict();
Now use jQuery instead of $:
jQuery(“myelem”).hide();

Surrender the $
• jQuery.noConflict();
Now use jQuery instead of $:
jQuery(“myelem”).hide();
• (function($) {
//use $ as normal here for jQuery
})(jQuery);
//out here $ is not relating to jQuery

Combine & Minify
• Once you’re done, combining your scripts
into one and then minifying them is a big
help.

Combine & Minify
• Once you’re done, combining your scripts
into one and then minifying them is a big
help.
http://www.scriptalizer.com/

Links & Resources
• Official site: www.jquery.com
• jQuery Docs: docs.jquery.com
• www.learningjquery.com
• net.tutsplus.com (hit and miss)

Thanks!
@Jack_Franklin
www.jackfranklin.co.uk