Introduction
jQuery is a free JavaScript library that simplifies writing JavaScript code. In this tutorial I demonstrate how to set up your Joomla! Web site to use jQuery. Please note that this is not a tutorial on how to use jQuery itself. For that try the excellent jQuery Tutorial at the W3Schools Web site.
For this tutorial we will be using a version of the jQuery library hosted by Microsoft. The file is free and available for anyone to use.
This tutorial assumes that you are familiar with the Administrator Back-end of your Joomla! site and that you are comfortable working with some of the code of your site. If you aren't comfortable working in the Administrator Back-end or playing around with code, don't do anything as you could damage your site.
Instructions
- In the Joomla! Administrator Back-end, select Template Manager from the Extensions drop down menu. Once in Template Manager, choose the template you are using for your Joomla! site. When the template window opens, click the Edit HTML button in the menu near the top of the page. The Template HTML Editor will open up, revealing the underlying code of your Joomla! site. Be careful here. If you accidentally alter any of this code you could ruin your site!
- Copy the snippet of code below and paste it into the <head> section in the Template HTML Editor. It doesn't matter where it goes here, just as long as it's somewhere in the head section, that is, between the opening <head> and closing </head> tags. The snippet contains a reference to the jQuery library hosted by Microsoft.
- Click the Save button to save your work. You're now ready to start adding jQuery code to your site. See the next section.
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
Next Steps
To start adding jQuery code you need to open one of the JavaScript files that Joomla! uses for your site. Joomla! uses several JavaScript files for each template. JavaScript files have a .js extension and can be found in the directory that contains JavaScript files. This directory could be named JavaScript or perhaps js.
As far as I know you can't access JavaScript files from the Administrator Back-end of Joomla!, but you can use an FTP program to download JavaScript files from the server where your Joomla! site is hosted. Once on your computer you can edit JavaScript files in a text editor like Notepad. After you make your edits you just upload the JavaScript file back to the JavaScript directory on the server where your Joomla! site is hosted. I use the JA Purity template for this Joomla! site and I put my jQuery code in the ja.script.js JavaScript file. The path to this file for my template is /Joomla!/templates/ja_purity/js/ja.script.js. The path to the JavaScript directory for your site will be similar, though the names of some of the directories will be different, unless you are using the JA Purity template.
NOTE: If you do use jQuery on your Joomla! site you won't be able to use the dollar ($) sign to begin statements. This is because Joomla! uses another JavaScript library called MooTools and MooTools also uses the dollar sign to begin statements. To avoid a conflict, use the name jQuery instead to begin your statements. This is important.
Conclusion
With a little effort and some knowledge of the Joomla! Administrator Back-end, jQuery can easily be added to your Joomla! site. jQuery greatly simplifies writing JavaScript and is a blessing to Web developers. 
