There are several answers already, each of them work great but all of them depend on making sure jQuery is downloaded synchronously before any dependencies try to use it. This approach is very safe, but it can also present an inefficiency in that no other resources can be downloaded/run while the jQuery library script is being downloaded and parsed. If you put jQuery in the head using an embedded tag, the users browser will be sitting idle while downloading and processing jQuery when it could be doing other things like downloading images, downloading other scripts, etc.
If you are looking for speedy responsiveness on startup, every millisecond counts.
A huge help to me over the last year or so has been Steve Souders, first when he was at Yahoo, and now at Google. If you have time, check out his slides for Even Faster Web Sites and High Performance Web Sites. Excellent. For a huge paraphrase, continue here.
When attaching javascript files to the DOM, it has been found that putting an inline <script> tag in the <head> of the document causes most browsers to block while that file is being downloaded and parsed. IE8 and Chrome are exceptions. To get around this, you can create a “script” element via document.createElement, set the appropriate attributes, and then attach it to the document head. This approach does not block in any major browser.
<script type="text/javascript">
// Attaching jQuery the non-blocking way.
var elmScript = document.createElement('script');
elmScript.src="https://stackoverflow.com/questions/1116983/jQuery.js"; // change file to your jQuery library
elmScript.type="text/javascript";
document.getElementsByTagName('head')[0].appendChild( elmScript );
</script>
This ensures that jQuery, while downloading and parsing, is not blocking the downloading and parsing of any other images or javascript files. But this could present a problem if you have a script that depends on jQuery finishes its download before jQuery does. jQuery won’t be there and you will get an error saying $ or jQuery is undefined.
So, to ensure that your code will run, you have to do some dependency checking. If your dependencies are not met, wait for a little while and try again.
<script type="text/javascript">
runScript();
function runScript() {
// Script that does something and depends on jQuery being there.
if( window.$ ) {
// do your action that depends on jQuery.
} else {
// wait 50 milliseconds and try again.
window.setTimeout( runScript, 50 );
}
}
</script>
Like I said earlier, there are no problems with the approaches shown before, they are all valid and all work. But this method will ensure that you are not blocking the download of other items on the page while waiting for jQuery.
This approach will work for any file, so if you have to include 10 js files, you can attach each of them using this method. You just have to make sure your check function checks for every dependency before running.