3. 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">
4. 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.
5. 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.
7. Use of CSS SelectorS!
• jQuery Traversal functions take CSS
Selector
8. Use of CSS SelectorS!
• jQuery Traversal functions take CSS
Selector
• Often forgotten - use multiple selectors to
make up a CSS selector.
9. 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”);
10. 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.
21. Context
• If you’ve cached an element, you can add
this as context as the second parameter:
$(“myelem”, someCachedElement);
22. 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.
25. Context Continued
• Contextualised selectors should be in the
form:
$(selector, context)
• EG:
$(“myelem”, “#somediv”);
jQuery will only search inside #somediv for
“myelem”.
27. Context Continued
• When you do use the context, jQuery just
calls the find() method on that context:
$(selector, context) = $
(context).find(selector).
28. 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);
30. Clever Traversing
• jQuery provides so many traversing
functions that there is often a shortcut.
http://api.jquery.com/category/traversing/
31. 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/
32. 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/
37. 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
38. 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
40. Check if an Element
Exists
• Easy:
if($(“elem”).length) {
//element must exist
}
41. 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.
43. Run onLoad
• Run your Javascript once the DOM is
loaded like so (when using jQuery):
$(document).ready(function() {
//add code in now
}
44. 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
}
46. 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”);
47. 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.
49. 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”)
50. 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”);
52. Surrender the $
• jQuery.noConflict();
Now use jQuery instead of $:
jQuery(“myelem”).hide();
53. 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
54. Combine & Minify
• Once you’re done, combining your scripts
into one and then minifying them is a big
help.
55. Combine & Minify
• Once you’re done, combining your scripts
into one and then minifying them is a big
help.
http://www.scriptalizer.com/
Point out that it&#x2019;s mainly for the beginners/intermediate users. Feel free to throw in your own tips at the end.
Most jQuery functions take the form $(something).function(selector)
This selector can be any CSS one - including CSS3. Works in multiple browsers.
Most jQuery functions take the form $(something).function(selector)
This selector can be any CSS one - including CSS3. Works in multiple browsers.
Most jQuery functions take the form $(something).function(selector)
This selector can be any CSS one - including CSS3. Works in multiple browsers.
Most jQuery functions take the form $(something).function(selector)
This selector can be any CSS one - including CSS3. Works in multiple browsers.
Some people like to append the dollar sign to variables that have the jQuery object &#x201C;wrapped&#x201D; around them.
Some people like to append the dollar sign to variables that have the jQuery object &#x201C;wrapped&#x201D; around them.
If you&#x2019;re only performing multiple operations on one selector in one place, chaining is probably best.
However if you plan to reuse the selector much later then cache it.
If you&#x2019;re only performing multiple operations on one selector in one place, chaining is probably best.
However if you plan to reuse the selector much later then cache it.
Completely optional - your call
Completely optional - your call
Just continuing from caching
Just continuing from caching
End with however...
End with however...
You can use the $(selector,context) method or .find(), choice is yours. Again, there are so many different ways of achieving the same result with jQuery
You can use the $(selector,context) method or .find(), choice is yours. Again, there are so many different ways of achieving the same result with jQuery
Browse the traversing docs - URL there - so many functions.
Browse the traversing docs - URL there - so many functions.
Browse the traversing docs - URL there - so many functions.
find() will descend right through the DOM
children() only descends one level
find() will descend right through the DOM
children() only descends one level
getElementsByClassName does currently work in IE9 preview, but not in its predecessors.
getElementsByClassName does currently work in IE9 preview, but not in its predecessors.
Or, you can put all your jQuery at the bottom, just before the closing </body> tag and not have to use this code.
Or, you can put all your jQuery at the bottom, just before the closing </body> tag and not have to use this code.
Easy quick way to detect if javascript is on. (Most people do have it on)
Easy quick way to detect if javascript is on. (Most people do have it on)
Just an easy way to store things - seen people store things in alt tags, classes, etc, this is much easier.
Just an easy way to store things - seen people store things in alt tags, classes, etc, this is much easier.
For use with other libraries
For use with other libraries
A quick google search for tutorials finds you loads.