JQuery is a collection of javascript libraries that do every day stuff for you in a more compact way.

Basically, in any HTML page, you must create a script tag that references any of the JQuery libraries you are using, like:

<script src="jquery-1.9.1.min.js"></script>

Naturally, this path is relative to wherever you store the scripts for your site.

The basic JQuery syntax uses either ‘Jquery’ or ‘$’ (as a shorthand, which means the same thing) to start off any statement. A ‘Selector’ is just an HTML element. The idea is that you choose a selector (id/css class, HTML tag surrounded by double quotes) and ‘Do’ something with it (some kind of action) :


If you use an HTML tag as the selector or a css class name (prefaced by a period), whatever action you use will affect all the tags on the page that match your selector.


If you use an id attribute, since it can only be used once on each page, it will only affect that one instance of your selector. You preface this selector with “#”:


One of the biggest problems with JavaScript was the problem of when JavaScript would run. If you put it in a script at the top of the page, it would run first. That might not be what you’d need, so you would possibly move the script to the bottom of that page.

With JQuery, you have what is called a ‘Document Ready’ function which you can put anywhere in your page. Everything inside that script tag will run ONLY once the HTML document itself is fully loaded. You may not understand the implications of this just yet, but let me tell you that this is huge. There are 2 formats you can use. The first one is the full syntax, while the other more or less provides a kind of a ‘shortcut':

$(document).ready(function () {
 //all your code and other functions go here

$(function () {
 //short-hand version - all your code and other functions go here

Remember, this is just to get you started. There’s a whole world of JQuery stuff to explore, including a whole lot of JQuery-UI stuff:(http://jqueryui.com/)