Other Pages

jQuery

Goals

  • Include jQuery in your page

  • Write a few lines of jQuery code

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:

Explanation

What We Did With jQuery

We just used jQuery to handle a click event and follow instructions to change that element's style when it's clicked. We wrapped all of that code in a $(document).ready(function(){ ... }); call to make sure it only runs when the browser has read our document and is ready to act on it.

When you work with your HTML document in jQuery, you're actually doing something called DOM manipulation. The DOM is the Document Object Model — it's a representation of your HTML that lives in the JavaScript layer. When people say that JavaScript is hard, they frequently mean that DOM manipulation is hard — you're forced to think about your document with three totally different models in mind all at once (one for HTML, one for CSS, one for JavaScript). jQuery gives developers an easier, more succinct interface for working with the DOM than native JavaScript does.

Why jQuery

jQuery is a library of code written in JavaScript. Anything you can do with jQuery, you could also write in straight JavaScript without jQuery, but there are some advantages:

  • jQuery allows you to write code that will run in lots of browsers without modification. Although this is improving as years go by, there are currently differences between how you'd write JavaScript for one popular browser (like Chrome) versus another (like Internet Explorer 8). jQuery lets you write your functions one way, and then when your code is loaded in the user's browser, jQuery does the work of translating it into the right format for the browser it's currently running in.

  • jQuery allows you to select elements using the same syntax as CSS. Since many web developers are great at selecting elements with CSS, you can carry this same knowledge over to JavaScript.

  • jQuery is designed to make life easier for web developers, so it has lots of shorthand functions for doing common things like animations and showing and hiding elements.

jQuery is not the only choice for a JavaScript framework, it's just a very popular one. You can also check out other libraries like Dojo, Zepto, or YUI.

Next Step: