JQuery 101

or How the $#*@! do i start using this?

When first starting to work with JQuery… or any new programming language for that matter there are a few things i, as your friend and instructor would like for you to keep in mind:

1. Dont Freak Out:

   it can be a little intimidating to start, but be patent with yourself. You can learn this

2. Pay Attention to Syntax:

   although freaky and weird the commands follow the same simple stucture: What are you calling to; What is the trigger; What are you changing, moving, or effecting; THEN the action itself;

3. Write Your Own or Plug-In:

   you can often find lots of prewritten plug-ins to do what you want to do that people write and give away for free. just google it… Keep in mind you will still need to know a little JQuery to make the plug-in work, though.

With that out of the way let's move on. Remember before you start any coding with Jquery you need to make sure the JQuery Library is loaded (must be included in EACH page that has JQuery code in it). Remember how to do that? No? Alright here's the code

         	
Example: Include JQuery Library from jquery.com
        	 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        

This can be included anywhere in your html document but i recommend placing it (and all your JQuery code) near the bottom of the page just above the closing </body> tag. All the JQuery code that you write must come after this in your page otherwise it will not work

The next thing you will need to do is tell the javascript (JQuery is an easier form of javascript) not to execute until the entire page has loaded… it's commonly referred to as the "On Document Ready" command and ALL THE REST of your JQuery code will be contained inside of it. It looks like this:

         	
Example: The onDocument Ready block
        	<script language="javascript" type="text/javascript">
        	
			$(document).ready( function(){
            
			          // the rest of your code goes here
                      
			 });//end on document ready
			
			 
			</script>
        

OK! At this point we can begin writing our JQuery code, but before we do i'd like to spend some time breaking down this code block, just so you understand what we did.

        	
Example: Breaking Down the onDocument Ready block
        	
        

I generally want to forget about this particular block of code so i hit a bunch of carriage returns to create enough space so i dont have to look at it anymore. NOW we can place in the jQuery code that will really be sexy! Consider this example:

         	
Example: JQuery that does something sexy
        	<script language="javascript" type="text/javascript">
        	
			$(document).ready( function(){
			          
			          
			          
			          
			          
			          
			          
			         $("#cool).click( function(){
			          		
			          		alert('you clicked the element with the id = cool');
			          
			          }
			          
			          
			          
			          
			          
			          
			          
			          
			 });//end on document ready
			
			 
			</script>
        

What this added piece of JQuery is saying isAssuming that you have an element