FEWD 29

jQuery May 7, 2014

Agenda

Starter Files

Traffic Light with jQuery (on Codepen)

We’ll look at this again to see a bit about how jQuery works.

Color Scheme Switcher with jQuery (download)

Using the jQuery library, we’ll redo Color Scheme Switcher yet again.

Further Reading

Please take some time to start looking at the jQuery documentation. Oscar Otero also has a really nice table of contents for the docs at his jQuery Cheatsheet.

jQuery allows us to manipulate the page using a much simpler syntax than what we’ve been using so far.

For example, we’ve been writing something like:

document.getElementById('thingy').onclick = doSomething;

function doSomething() {
    // make something happen here
}

In jQuery, this might look more like:

$('#thingy').click(doSomething);

function doSomething() {
    // make something happen here
}

We will certainly be discussing this in more detail, but in general jQuery lets us grab some element from the page ($('#thingy')), and do something with it ($('#thingy').click(doSomething);). In this case, we grabbed an element with the id thingy and used .click() to make a function run when the user clicks on #thingy.

For now, as you start to get used to this idea, I’d like you to look through the documentation above, and have a look at some of these things we can do to an element (or elements) using jQuery: