In these exercise files, you will see a script tag above that's setup to write in the functions to complete the exercises. I am including the wrapper function $(function(){ ... }) for simplicity. Any javascript you put inside this will not be executed until the whole document is loaded.

Lets's get started with some exercises. We will start simple.

First, we will bind a function to a link. Let's add an alert to the link below, we'll make it say "Hello World". The link has an id="alert_box". I'll outline the steps for this one

click for alert box

  • First, to get started we'll need to select the link. Since this link has the id alert_box, we'll use the string '#alert_box', meaning select something with the ID of 'alert_box'. So to send this information to jQuery we start with $('#alert_box'). This gets us a jQuery "object" that we can then work with
  • So we've selected the link, now we want to "bind" a click action. We do this by calling the click function on the selected object. We call a method using the dot syntax - like this: Object.function( argument1, argument2 ).
  • In jQuery, these arguments are often functions! So to make an alert box come up, we need to wrap it in a function, like this:
    function(){ 
      alert("hello world");
    }
    


  • 
    $('#alert_box').click( 
        function(){ 
            alert("hello world");
        }
    );
    
    

  • Remember to add "return false;" at the end if we don't want the link to do it's normal behavior

For the second part, let's take the link below, with id="red_text" and use it to make all the paragraph text red

Click here to make text red