FEWD 19 @ GA

jQuery Nov. 4, 2013

Agenda

Starter Files

Color Scheme Switcher with jQuery (on Codepen)

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

Divided Times (download) (preview)

We’ll get started building a fairly basic drop-down style navigation system.

Before Class

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 let’s 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: