jQuery Beginners

This small group of files is for students who have just started learning jQuery (in a course for journalism students). It follows their out-of-class use of Code School's free Try jQuery course, parts 1-3 of 5 parts. So the code does not include anything other than what is taught in those first three modules. Students should download the complete repo here and use the files on their own computer.

These exercises go along with a PowerPoint, Beginning jQuery, in which I go over some background about jQuery and also review the concepts from the three Code School modules.

The file scripts/template.js is not used in the exercises; it's just there so that students can copy it if they want to.

Basic instructions

Instructions for five of the exercises are in the file scripts/myjquery.js (as comments). Since Code School does not have us using real files, the purpose of the exercises is to have students apply what they learned to actual files:

• index.html
• styles/main.css
• scripts/myjquery.js

Students can open those three files and complete each exercise in scripts/myjquery.js.

A photo gallery of sorts

The last exercise (6) uses a different HTML file, but the same CSS and JS files:

• photos.html
• styles/main.css
• scripts/myjquery.js

This represents a photo gallery that can be built using only the information from parts 1-3 in the Try jQuery course. The students will need some encouragement to deconstruct the code and figure out how it works.

This basic (and flawed) photo gallery is enhanced in the repo jQuery Photo Gallery, which is viewable here.

Adding things to the DOM

These files demonstrate how we use some common jQuery functions for adding new elements to a page:

• adding_things.html - .prepend() .append() .before() .after()
• adding_things2.html - .prependTo() .appendTo() .insertBefore() insertAfter()
• styles/adding_things.css
• scripts/adding_things.js

A sortable tables example

These files are taken from a JavaScript book and provide a simple, clear example of using tablesorter.js, a jQuery plugin, to make a table both beautiful and interactive. (This goes way beyond the Code School tutorials 1-3, but it's a great example of why learning jQuery is so worth it.)

• script05.html
• styles/script04.css
• scripts/jquery.tablesorter.js
• scripts/script05.js

A link to the book's website can be found near the top of each file.