What is jQuery?

jQuery is a library of JavaScript programs that are pre-written for certain JavaScript functionality.  You don't have to be a master programmer to have some fancy stuff going on with your website, you just need to use jQuery, you normally just have to set up a few parameters and meet certain HTML requirements as far as naming <div> tags, etc, and off you go. jQuery library files are often used for things such as drop-down menus, slideshows, accordions, progress bars, tabs and other fun stuff.  jQuery is open-source and free.  It has been used on million of websites, so you can be pretty sure that if you set it up correctly, it will work for you.  It is cross-browser tested. And there is a community of web developer that support it.  If you are having an issue with a certain application, chances are you can post a question on the Internet and find solutions for your issue.

Other JavaScript libraries include MooTools, Prototype, Dojo and YUI.

Visit jquery.com  or jqueryui.com to get more information. Visit api.jquery.com for a list of standard jQuery API functions.

Installing jQuery files on your site

Keep in mind that if you are using jQuery library files, you will need to add the main jquery file and the specific jquery file(s) that you are refering to in this folder and refer to both of them in your <head> tag as well.  See the example below.

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.dropdownplain.js"></script>

Remember that you must have a separate <script> call for each file.

Which jQuery file should I use on my site?

jQuery comes in two flavors.  The production version and the development version.  The production version is minified, which means that it is tightly packed.  It is pretty much unreadable for most humans, but it will download to the users computer more quickly.  Unless you want to dig around in the code to see something (you shouldn't change the code in the maid jQuery file), just use the production version.  It will have min in the file name when you download it from the jquery.com web site. The development version reads like a regular .js file with nicly grouped functions and individual lines of code.  It is meant for developers that need to reference all that code.

When you get the code from jquery.com  and you click on the DOWNLOAD button.  You may be taken to a web page with all the code.  Just hit cntl-a to select it all, cntl-c to copy i all, then paste it into a blank page in your favorite text editor like Notepad++.  Save it with the same name and version as on the jquery web site i.e. jquery-1.8.3.min.js and place it in a js folder on your site.  You can rename it to just plain jquery.js if you wish.  You can always see what version it is by opening the file and looking at the first few lines.

jQuery and CMS sytems

Because the Cheat Sheet site is built in Joomla, demonstrating numerous jQuery files is a bit different that if the site was built from scratch.  For demos of each jQuery library file, I am going to go out of the boundaries of this site and create the demos at jquery.zemplate.com.

CMS systems can an do use jQuery functionality, but it is often written into third party software that can be applied to your Wordpress, Drupal or Joomla site.  Often these third party administration menus streamline the interface so that you don't have to do any coding whatsoever.  If you do understand the backend of you CMS system, you can apply jQuery library programs, but you do need to be careful that conflicts don't arise with the built in javascript on the site.

The base jQuery file

There is a main jQuery file that is all compact and ready to install.  It is necessary for it to be installed for the jQuery widget to work. You can download this file from jquery.com  and place it into a folder on your site and call it from there or you can link to one at developers.google.com and call it as in the example below.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

You can also reference the jQuery site for your jQuery javascript files.  Here is a snippet with the jQuery UI files and CSS files included.  JQuery UI include a host of specialized functionality for jQuery libraries.

<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" ></script>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

There are a few things that you need to know about the base jQuery file.  

It is constantly being updated, so there are many, many versions out there. You can choose to use the file and keep the version name attached as I did in the example at the beginning of this article.  You can rename it to simple jquery.js and include it that way.  Be aware that some widgets may work OK with one version of jquery.js but have conflicts with another version.  If you have your widgets set to work with the current version of jquery - you may want to think twice before updating it - be sure to test all of your site's JavaScript functionality if you do update the jQuery file.

jQuery UI

In addition to the base jQuery file, there are some applications that require the jQuery UI files to function.  Jquery user interface uses the base jQuery library file, but then adds it's own code for specified functionality.

Visit jqueryui.com to download these files and find out more about this extended interface.

You can download the UI core files at jqueryui.com/download/.  These include UI Core, Interactions, Widgets and Efects.  Each file introduces its own set of functionality.

$(document).ready(function()

To call your jQuery library function, you want the browser to finish downloading all of the content, including the images. Why?  Because often the images and or content in necessary for the jQuery to function properly.  You don't want your slideshow to kick on until the images are ready!  Use that following example to call your jQuery function.

<script type="text/javascript">
     $(document).ready(function(){ 
          //put your code in here
     });
</script>