Getting Started with jQuery

Step 01: Add reference to the jquery.js document in between your opening and closing head tags of a basic html5 document. Best to save it in a folder that you call js (which should rest at the same layer as your .html page).

Your html5 page would basically resemble the below:

<!DOCTYPE html>

<html>

  <head>
  	<title>Learning Jquery</title>
  	<meta charset="utf=8" />
  	<link rel="stylesheet" type="text/css" href="css/style.css">

  	<!--You should reference jQuery as an external source-->
  	<script src="js/jquery.js" type="text/javascript"></script>

  </head>

  <body>

  	<div id="container">

  	</div>

  </body>

</html>

So your file directory could look something like this:

Getting Started with jQuery (provided by Doris Yee)

Step 02: Now you can write an external script that uses jQuery arguments and syntax. Make sure after you’ve reference jquery, you also add a reference to your own external script. The additional code in the head element would look similar:


<!--You should reference your own scripts as an external source-->
    <script src="js/example.js" type="text/javascript"></script>

Step 03: You should really become comfortable with $(document).ready(). This is basically necessary if you want an event to work on your page. Place the below snippet inside of your example.js file. If you wanted to run something as soon as the window finished loading, the code would be set up like below:

Read more about $(document).ready() from a previous post.

Step 04: There’s a lot of playful things we can now use with jQuery. One functionality that is fairly common with it is .show(), .hide(), and .toggle(). Take a stab with the below short script embedded in an html document.What we are going to is play with the visibility of content. The best way to learn and memorize this stuff is to code.

IN YOUR HTML BODY ELEMENT


<h5>.hide()</h5>
 <p><a href="#" id="hideMyDiv">Hide Content</a></p>

 <h5>.show()</h5>
 <p><a href="#" id="showMyDiv">Show Content</a></p>

 <h5>.toggle()</h5>
 <p><a href="#" id="toggleMyDiv">Toggle Content</a></p>

 <div><p>This is an example piece of content that I will be showing, hiding, or toggling.</p></div>

IN YOUR EXTERNAL .JS

$(document).ready(function() {
     // Show and Hide Effects
     $('#hideMyDiv').click( function() {
     $('div.MyDiv').hide();
     return false;
     });

     $('#showMyDiv').click( function() {
     $('div.MyDiv').show();
     return false;
     });

     $('#toggleMyDiv').click( function() {
     $('div.MyDiv').toggle();
     return false;
     });
});

What you should be seeing is basically three links that interact with a div you have identified with a class called MyDiv. Each hyperlink – which is specified by an ID – you have attached an effect. Look at the below video (note that within the arguments…or within the parenthesis…you can specify a speed):

<iframe src=”http://player.vimeo.com/video/16927695?title=0&amp;byline=0&amp;portrait=0&amp;color=666666″ width=”660″ height=”434″ frameborder=”0″></iframe>

To specify speed of the effect, the JS code could look like this:

$(document).ready(function() {
     // Show and Hide Effects
     $('#hideMyDiv').click( function() {
     $('div.MyDiv').hide('slow');
     return false;
     });

     $('#showMyDiv').click( function() {
     $('div.MyDiv').show('fast');
     return false;
     });

     $('#toggleMyDiv').click( function() {
     $('div.MyDiv').toggle('400');
     return false;
     });
});



© 2011. All Rights Reserved

TopTop