Steps

Step 1

First, let's go back to our index.html file. Now include the jQuery code so we can start working with it. Google and Microsoft both host public copies of jQuery that you can link to, so you don't even need to download it. (The browser can download files from other sites, if you include links to them.) Add this line inside the head of your document:

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

Make sure you add the above line before any of your javascript that uses jQuery or you will get an error because jQuery hasn't yet loaded.

Save and refresh your browser window. Your page should look the same, but now you've included jQuery in the page.

Step 2

jQuery is a JavaScript library that is designed to make it easy to interact with the contents of your HTML document. When you're writing jQuery, you're writing JavaScript — you're just using objects and functions that jQuery has already defined.

When you're interacting with your document, you'll want to wait to run your code it's until safe to do so: when your document is ready and loaded. If you don't wait for that you might get errors. For example: your code may try and interact with things that aren't there yet.

jQuery has a built-in method called ready that checks for this, and runs your code after. Let's add this to your javascript.js file.

$(document).ready(function() {
  /* Add code from the next steps here */
});

Step 3

Let's use jQuery to interact with the page. You'll usually write jQuery by giving it a selector to work with (jQuery can use the same selector syntax as CSS) and then using a jQuery method to handle actions on elements that match that selector. You'll see lots of lines of jQuery that are structured like this:

$("selector").click(function(){ /* do something */ });

Let's put in a real selector and have our function do something:

$("#copyright").click(function(){
  $(this).css('color','purple');
});

When you click on the copyright line at the bottom of the page, you should see a result like this: