What Is Jquery

Jquery is a javascript library that offers a range of functions for manipulating and working with the html document model client on the client side.  If you have ever seen things on websites such as animation, client side validation, ajax form processing or modal popups - chances are they may have been constructed using jquery libraries  There are 4 main items available for developers as part of the Jquery set of tools.

1. Jquery Core

1. Core is the basic framework and contains all the DOM manipulation, traversal and effect functions.

2. Jquery UI

1. UI contains functions for creating Tab Layouts, Accordions, Buttons and Date Pickers

3. Jquery UI Theme

1. The UI Theme adds a style to all UI elements

4. Jquery Mobile

1. For creating interactive pages for mobile devices for touch based UI.

How do I use Jquery In My Web Applications

To use JQuery you simply need to download the javascript files and reference them in your page.  Several large companies such as Google and Microsoft offer free content delivery for these libraries - providing you have an Internet connection this is probably the quickest way to get up and running.  In your website head section simple add the following code:

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Additionally if you would like to use the JQuery UI Themes - you can also reference a predefined (or customised theme if you like - using themeroller, more about that later) theme - also available on Googles CDN network.  Simply add the link element as follows into your html pages head section.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />

Next Step.  Adding The Document Ready Script

Jquery works on the basis that your code only should execute once the document has been fully loaded i.e. ready.  In your pages head section you need to add a script tag that defines a document ready function.  Once this function is in place you can then begin adding your Jquery code.

<script type="text/javascript">

$(document).ready(function(){   // Your javascript code here });

</script>

Final Step.  Perform Jquery actions

Now that your page is setup all that is left to do is add your code.  Here is a short example to change all of your pages anchor links into alert popups instead of actually clicking through to the next page.  In the real world this is probably not that useful but explains the basics of Jquery syntax.

  <script>     $(document).ready(function(){       $("a").click(function(e){         alert("Link was clicked");         e.preventDefault();       });     });   </script>

This e.preventDefault() turns off the default behaviour of the element in this case the anchor link.

Extending Jquery

Jquery also offers a rich framework for creating plug-ins.  These plug-ins can be designed to make repeatable code very easy to execute.  Some amazing plug-ins already exist on the web so its very easy to find plug ins that help perform tasks. Here are some really useful ones that I use regularly.

Why use Jquery

Jquery makes it very easy to build rich UI web-based interfaces that extend the usual user interaction that html offers.  Jquery can help add modern extensions to old web based applications and speed up web development particularly when used along side other technologies such as AJAX and CSS. Jquery is also receiving regular patches and feature additions.  For example Jquery UI 1.9 will support some new UI features such as Spinners, Menus, Menu bars and Tool tips.