Jquery-fu: Part 1 – What is Jquery and how do I use it?
Originally this was going to be a single post about tips and tricks for people starting out with Jquery, however I quickly realised that this was going to be the mother-of-all-posts unless I separated it up a bit. Instead, I have decided to turn this into a blog mini-series called Jquery-fu over the next few weeks. This initial post just touches on what Jquery actually is, why you would use it, and how to set it up. Enjoy! :)
Ninjas always have GIANT computers. For kicking.
What is Jquery?
- It's lightweight
- It simplifies and reduces the lines of code required
- Cross-browser functionality (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome)
- The selector class (which retrieves one or multiple DOM elements) is based on the CSS selector class
- The ability to add multiple events of the same type (click, change etc) to the same element/s is a lot easier
The beauty of Jquery is that as well as the above, it also has hundreds of free plugins available. A full list can be found here, however this list is extensive, so it can also be worth looking at user-maintained lists like this one.
Setting up Jquery
To get the latest version of Jquery, visit the Jquery website and download the minified and uncondensed files. When using Jquery on a live site you will want to use the minified file, but the uncondensed file is great if you want to debug the script if something isn't working correctly with a program like Firebug for Firefox, which I would highly recommend installing. Once you have these files, you can reference them within the head tags of your html file by doing the following;
...change the file name to jquery-1.6.2.js if you want to debug, don't include both! ;) An alternate method is to link to the Jquery version you wrote your code with directly as shown below. The advantage to this is that many sites do this, and therefore users coming to your site may already have the file cached in their browser.