Load from Google CDN
Google’s CDN (Content Delivery Network) hosts jQuery for you to include on your site. The advantage of this is two-fold: firstly, if the user has visited other sites that loaded jQuery from the CDN (of which there are a lot) then they will already have a version of jQuery cached, which means it will not be needed to load again. Secondly, you can specify a certain version to load. For example, this code would load version 1.4.2:
<script type="text/javascript" src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
However, if I wanted to load the most recent version, I could just do this:
<script type="text/javascript" src=http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
That will include the most recent version, up to version 1.9.9. However this is not recommended, as an upgrade to jQuery may well break your scripts. It’s generally suggested that you stay within a version, for example:
<script type="text/javascript" src=http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
jQuery takes CSS Selectors
Remember, jQuery functions will take any valid CSS selector. But a selector can contain multiple selections. For example, you might do this:
$(elem).siblings("h2").hide();
$(elem).siblings("p").hide();
But why not just do this?
$(elem).siblings("h2,p").hide();
Chain over lines
Remember, white space means nothing in Javascript, so whilst you might have this:
$("elem").hide().addClass("something").show().attr("alt","something else").fadeOut("slow");
If you struggle to read that, you can do this as well:
$("elem")
.hide()
.addClass("something")
.show()
//etc etc etc
There’s no bonus in either performance wise, it’s just down to readability. A lot of people don’t realise they can split it over multiple lines.
More Context
I know I discussed context in my last article, but I wanted to add a bit more. Last time we discussed adding a context like so:
$("#someElem", "div");
I know that’s a poor example, but bear with me! When you do this, all jQuery does is call the find() function on the div and search for “#someElem”. So the above code gets translated into this:
$("div").find("#someElem")
Which way you use is totally up to you. Personally I find the 2nd method (using .find()) to be much easier to understand when quickly scanning a document, but it’s up to you.
Check if an Element Exists
This is more a quick code snippet, but if you wish to check if an element exists, it’s so easy!
if($("elem").length) {
//the element exists
}
If it does not exist, jQuery will just degrade gracefully, no errors, nothing bad happens.
Run onLoad
This is pretty common knowledge, but to make sure jQuery only runs once the DOM is ready to be manipulated, you need to call jQuery’s .ready() function:
$(document).ready(function() {
//code in here
}
What is perhaps not as well known is that you can shorten this:
$(function() {
//code here
}
Or alternatively, you can add all your javascript just before the closing tag and not need to bother with the onLoad code:
....all your normal code here <!--then add your javascript here, firstly loading jQuery.js and then your code--> </body>
Add a JS Class to the Body
An easy way to detect if Javascript is on is to add a class to the body, so the first line of your Javascript would be:
$(body).addClass("javascripton");
Whilst this might seem pointless from a Javascript view (if Javascript isn’t on you wont be able to check via an if statement), this is useful for CSS. You might have some elements that might change style, so any CSS styles that might change via Javascript, just add “.javascripton” in front of the styles in your css file.
Store information with jQuery’s data method
jQuery provides its own method for storing data to be used later on. To save some data is pretty easy:
$("elem").data("someVariable", 39);
And to return it:
$("elem").data("someVariable") //returns 39
I’ve seen people use all sorts of tags to store information to be used with their Javascript code, title tags, alt tags, rel tags, etc. Use this. Note: I believe HTML 5 may well include some form of data attribute, but for now, stick with this.
Surrender $
If you are using another library that uses the “$” symbol, jQuery allows you to pass that on to be used by the other library and still use jQuery:
jQuery.noConflict();
//now instead of $, use jQuery
jquery("elem").hide();
You can also make use of a closure. Whilst explaining this is slightly out of the scope of this tutorial, this is how you use it:
(function($) {
//in here, $ relates to jQuery
$("elem").hide()
})(jQuery)
//out here, $ does not relate to jQuery
$("elem").hide() //WILL NOT WORK
jQuery("elem").hide() //works
And that’s it.
I hope you’ve found these tips useful and helpful. I’m planning a lot more similar posts in the future. If you have any suggestions the best place to get in touch with me is Twitter – @Jack_Franklin.
