What is JQuery?

Tip

For those of you who have never used JQuery before, here is a little head start.  JQuery is one of the best Javacsript libraries out on the web today.  It can be used to transverse DOM elements (HTML), animations, event handling and many many more.

JQuery is being used by many well established websites such as: DELL, Bank of America, DIGG, Google, NBC, CBS, NETFLIX and even the White House (.gov).

How to use it

First you need to download JQuery.  Then include the JQuery library in the HEAD section of your HTML code like so.

<script type="text/javascript" src="jquery.js"></script> 

OR you can always use the latest version of JQuery right off google servers.

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

Secondly, you need to choose what type of element you would like to manipulate. For example:

<div id="error-message" style="background-color:#900; padding:15px; color:#FFF;">
        Error: You are retarded.
</div>

Now that we have our scenario, let’s see one example on how to use JQuery. When coding JQuery you will most often then not use the following template to wrap your JQuery code.

<script type="text/javascript">
   $(document).ready(function(){

   });
</script>

This ensures that your code will be run when the browser has finished loading the page. Inside the template you choose your error message using it’s ID. In JQuery you use $(‘#ID’) or $(‘.CLASS’) to access a DOM element.

<script type="text/javascript">
   $(document).ready(function(){
      $( '#error-message' ).click();
   });
</script>

The above code has accessed the click event handler for your DIV, now let’s make something happen.

<script type="text/javascript">

   $(document).ready(function(){

      $( '#error-message' ).click(function(){

         $( '#error-message' ).hide();

      });

   });

</script>

That’s all folks! Now when you click anywhere on your error message, your DIV will disappear right before your eyes. If you are really interested in getting your feet wet with JQuery. I would use this example and exchange “hide();” with different effects, such as sliding up/down, fading out effects (facebook), etc.

You can browse more JQuery effects here: http://docs.jquery.com/Effects
Soon enough I will be posting more mini-JQuery tutorials and simple things like CSS manipulation and AJAX calls.