Bcblackpool jquery tips

Pimp my Ride jQuery
By @Jack_Franklin

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
jquery.min.js">
• Always load most recent version or you
can be more speciﬁc as you wish.

Load from Google
jquery.min.js">
• Always load most recent version or you
can be more speciﬁc as you wish.
• Chances are user may already have it
cached.

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

Selector
• Often forgotten - use multiple selectors to
make up a CSS selector.

Selector
• EG: $(elem).siblings(“h2,p,strong”);

Selector
• EG: $(elem).siblings(“h2,p,strong”);
• Be aware of the efﬁciency.

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

• $(“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

• 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
• 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
• When you do use the context, jQuery just
calls the ﬁnd() method on that context:
$(selector, context) = $
(context).ﬁnd(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.


Clever Traversing
• Rarely should you have to go back to
where you’ve gone:
$
("elem").ﬁnd("p").hide().parent().ﬁnd("h2").h
ide();


Clever Traversing
• Rarely should you have to go back to
where you’ve gone:
$
("elem").ﬁnd("p").hide().parent().ﬁnd("h2").h
ide();
• Can easily be made much nicer:

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 ﬁnd() and
children().

Avoid Class Selection

http://www.quirksmode.org/dom/w3c_core.html


• getElementById and
getElementsByTagName are preferred to
getElementsByClassName - supported in all
browsers bar IE6, 7 and 8 (surprise?).



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


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 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>
• The ﬁrst 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 ﬁrst 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 provides its own method for
storing data to be used later on.
$(“myelem”).data(“usefulstuff”,”value of
this data”)

Store info with
• 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 $
• jQuery.noConﬂict();
Now use jQuery instead of $:
jQuery(“myelem”).hide();

Surrender the $
• jQuery.noConﬂict();
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

• Ofﬁcial 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

Bcblackpool jquery tips

More Related Content

What's hot

Viewers also liked

Similar to Bcblackpool jquery tips

Recently uploaded

Bcblackpool jquery tips

Editor's Notes