Blog » Jquery-fu: Part 1 – What is Jquery and how do I use it?

0 comments
Comments RSS
25 Jul

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! :)

 

devninja

Ninjas always have GIANT computers. For kicking.

 

What is Jquery?

Jquery is a most honourable Javascript library that adds some useful functionality to your programming arsenal. Whether you have trained diligently in the art of Javascript or you are fairly new to both Javascript and Jquery, if you have any kind of background in HTML and CSS it should be fairly easy to pick up. There are a number of advantages to using Jquery over "traditional" Javascript (and other libraries!);

  • 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;

<pre>
<head>

<script type="text/javascript" src="http://yourdomain.com/yourpath/jquery-1.6.2.min.js"></script>

</head>

</pre>


...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.

    

<pre>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js?ver=1.6.2"></script>

</head>

</pre>


Now you will want to add your custom Javascript file to start using Jquery in. To do this, create a .js file and include the path to it in a similar fashion to the Jquery source code. It should look something like this;

    

<pre>

<head>

<script type="text/javascript" src="http://yourdomain.com/yourpath/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="http://yourdomain.com/yourpath/starting_jquery.js"></script>

</head>=

</pre>

 

It's probably worth noting that Javascript is read sequentially, so the Jquery source must be loaded before any other files that use Jquery, otherwise you will probably see some JS errors occurring. You should now be ready to start playing around with Jquery. In the next installment I plan on showing how to use Jquery on page load and how the Jquery selector class works. - Tom (more on this and subsequent instalments of Jquery fu at the devninja)

Posted By Tom Garner on 25 Jul 2011

Comments

No one has commented on this page yet.