JQUERY ESSENTIALS

Course Overview

Anyone who is already proficient with JavaScript but who wishes to learn how to use jQuery, the most popular JavaScript library, in order to achieve the same outcomes while writing significantly less code.

Course Prerequisites

Solid JavaScript, web design knowledge and experience

Raising the Bar

1300 937 782

www.rtb.com.au

Falling in Love with jQuery

What’s so good about jQuery?

Cross-browser Compatibility
CSS3 Selectors
Helpful Utilities
jQuery UI
Plugins
Keeping Markup Clean
Widespread Adoption

What’s the downside?

Downloading and Including jQuery

Downloading jQuery
The Google CDN
Uncompressed or compressed?

Anatomy of a jQuery Script

The jQuery Alias
Dissecting a jQuery Statement

Bits of HTML—aka “The DOM”

Selecting, Decorating, and Enhancing

Making Sure the Page Is Ready

Selecting: The Core of jQuery

Simple Selecting
Narrowing Down Our Selection
Testing Our Selection
Filters
Selecting Multiple Elements
Becoming a Good Selector

Decorating: CSS with jQuery

Reading CSS Properties
Setting CSS Properties
Classes

Enhancing: Adding Effects with jQuery

Hiding and Revealing Elements
Progressive Enhancement
Adding New Elements
Removing Existing Elements
Modifying Content
Basic Animation: Hiding and Revealing with Flair
Callback Functions

A Few Tricks

Highlighting When Hovering
Spoiler Revealer

Animating, Scrolling, and Resizing

Animating

Animating CSS Properties
Color Animation
Easing
Advanced Easing
Bouncy Content Panes
The Animation Queue
Chaining Actions
Pausing the Chain
Animated Navigation
Animated Navigation, Take 2
The jQuery User Interface Library
Get Animated!

Scrolling

The scroll Event
Floating Navigation
Scrolling the Document

Resizing

The resize Event
Resizable Elements

Images and Slideshows

Lightboxes

Custom Lightbox
Troubleshooting with console.log
ColorBox: A Lightbox Plugin

Slideshows

Cross-fading Slideshows
Scrolling Slideshows
iPhoto-like Slideshow widget

Menus, Tabs, Tooltips, and Panels

Menus

Expandable/Collapsible Menus
Open/Closed Indicators
Drop-down Menus

Accordion Menus

A Simple Accordion
jQuery UI Accordion

Tabs

Basic Tabs
jQuery UI Tabs

Panels and Panes

Slide-down Login Form
Sliding Overlay

Construction, Ajax, and Interactivity

Construction and Best Practices

Cleaner jQuery

Ajax Crash Course

What Is Ajax?
Loading Remote HTML
Enhancing Hyperlinks with Hijax
Picking HTML with Selectors
Fetching Data with $.getJSON
A Client-side Twitter Searcher
The jQuery Ajax Workhorse
Common Ajax Settings
Loading External Scripts with $.getScript
GET and POST Requests
jQuery Ajax Events

Interactivity: Using Ajax

Ajax Image Gallery

Forms, Controls, and Dialogs

Forms

Simple Form Validation
Form Validation with the Validation Plugin
Maximum Length Indicator
Form Hints
Autocomplete

Controls

Date Picker

Lists, Trees, and Tables

Lists

jQuery UI Selectables
Sorting Lists
Manipulating Select Box Lists

Trees

Expandable Tree
Event Delegation

Tables

Repeating Header