
JQuery is a Javascript library that defines functions in order to facilitate working with javascript. I fixes the many browsers inconsistencies too. It has to developed into a very popular library today. It has a huge community of developers using it and supporting it.
JQuery
1. In order to use the Library you will have to include it in your documents as so:
<script type=”text/javascript” src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
2. Jquery defines a function that gets executed when the whole page has loaded called ready(). It works like this:
| Code: |
<script type="text/javascript"> $(document).ready( function(){ alert("the page has loaded"); } ); </script> |
1st you get a reference to the document and add the ready event to it. Once the document has loaded, the code inside the function gets executed.
Getting Reference to an HTML Element
Jquery has a function called $(). This function acts like the getElementById() function. The difference is that $() is more powerful. You can get reference of an element by its ID, Class, tag. If a button has an ID of ‘myButton’, you would get a reference like so: $(‘myButton’).
Jquery Effects
Jquery has many effects built in. Jquey has a Fade, sliding, basic. Check out all of the effects here: http://docs.jquery.com/Effects. Example:
| Code: |
<script type="text/javascript"> $(document).ready( function(){ $("#myContent").click( function(){ $("#myContent").slideDown("slow"); } ); } ); </script> |
JQuery is an all powerful tool. It can handle Ajax, Css styling and effects. Check out the whole documentation. It is very easy to use. Just remember use effects to enhance the user’s experience and don’t over do it.
Example:
http://jorge-portfolio.com/tutorials/jqueryexample.html