[Head First Series 01] • Head First jQuery by Benedetti, Ryan -- Read -- Imperial Library of Trantor

Index

Head First jQuery Dedication A Note Regarding Supplemental Files Advance Praise for Head First jQuery Praise for other Head First books How to use this book: Intro

Who is this book for?

Who should probably back away from this book?

We know what you’re thinking And we know what your brain is thinking Metacognition: thinking about thinking Here’s what WE did Here’s what YOU can do to bend your brain into submission Read me Software requirements Download jQuery Folder setup The technical review team Acknowledgments Safari® Books Online

1. Getting Started with jQuery: Web Page Action

You want web page power HTML and CSS are fine, but... ...you need the power of script Enter jQuery (and JavaScript)! Look into the browser The hidden structure of a web page jQuery makes the DOM less scary How does that work?

Introducing the jQuery function (and shortcut)

jQuery selects elements the same way CSS does Style, meet script jQuery selectors at your service jQuery in translation Your first jQuery gig

Revisit your requirements

Set up your HTML and CSS files Slide on in... May the fade be with you That’s it? You rescued the Furry Friends campaign Your jQuery Toolbox

2. Selectors and Methods: Grab and Go

Jump for Joy needs your help What are the project requirements? Dig in with divs A click event up close Add the click method to your page Get more specific Classing up your elements ID-entifying elements Wire up your web page Meanwhile, back to our list Creating some storage space Mix things up with concatenation Meanwhile, back in the code... Insert your message with append Everything works great, but... Give me $(this) one Put $ (this) to work Good riddance with remove Dig down with descendant selectors Your turn to jump for joy Your jQuery Toolbox

3. jQuery Events and Functions: Making Things Happen on Your Page

Your jQuery skillz are in demand again The money man has a point... Making your page eventful Behind the scenes of an event listener Binding an event

Method 1 Method 2

Triggering events Removing an event

To remove one event To remove all events

Going through the motions elements Your project structure Making things function-al The nuts and bolts of a function

Giving functions names

Function declaration Function expression

The anonymous function Named functions as event handlers

Function declaration Function expression

Passing a variable to a function Functions can return a value, too Use conditional logic to make decisions Jump for Joy needs even more help Methods can change the CSS Add a hover event You’re almost there... Your jQuery Toolbox

4. jQuery Web Page Manipulation: Mod the DOM

The Webville Eatery wants an interactive menu Go vegetarian Class up your elements Button things up What’s next? Swinging through the DOM tree Traversal methods climb the DOM Chain methods to climb farther Variables can store elements, too There’s that dollar sign again... Expand your storage options with arrays Store elements in an array Change out elements with replaceWith How can replaceWith help? Think ahead before using replaceWith replaceWith doesn’t work for every situation

One–to–many substitution Many–to–one substitution

Insert HTML content into the DOM Use filter methods to narrow your selections (Part 1) Use filter methods to narrow your selections (Part 2) Bring the burger back Where’s the beef (er...meat)? A meaty array The each method loops through arrays That’s it...right? Your jQuery Toolbox

5. jQuery Effects and Animation: A Little Glide in Your Stride

DoodleStuff needs a web app Do the Monster Mashup Monster Mashup needs layout and positioning A little more structure and style Make the interface click Make the lightning effect How does jQuery animate elements?

hide, show, and toggle change the CSS display property

Fade effects animate the CSS opacity property Sliding is all about height Put fade effects to work Combine effects with method chains Striking back with a timed function Add the lightning functions to your script DIY effects with animate

Motion effects Scale effects

What can and can’t be animated

Text effects

animate changes style over time From where to where exactly? Absolute vs. relative element movement

Relative animation = move it this much each time

Move stuff relatively with operator combinations Add the animate functions to your script Look, Ma, no Flash! Your jQuery Toolbox

6. jQuery and JavaScript: Luke jQuery, I Am Your Father!

Spicing up the Head First Lounge Objects offer even smarter storage Build your own objects

UML diagram of an object

Create reusable objects with object constructors Interacting with objects Set up the page The return of arrays Accessing arrays Add and update items in arrays Perform an action over (and over, and over...) Looking for the needle in a haystack Decision making time...again! Comparison and logical operators Clearing things up with jQuery...

... is even easier in JavaScript

Add some extra excitement Your jQuery/JavaScript Toolbox

7. Custom Functions for Custom Effects: What Have You Done for Me Lately?

A storm is brewing We’ve created a monster...function Get control of timed effects with the window object Respond to browser events with onblur and onfocus Timer methods tell your functions when to run Write the stopLightning and goLightning functions Feature request for Monster Mashup Let’s get (more) random You already know the current position... ...and the getRandom function too Move relative to the current position

Scenario 1: target > current Scenario 2: target < current

Monster Mashup v2 is a hit! Your jQuery Toolbox

8. jQuery and Ajax: Please Pass the Data

Bring the Bit to Byte race into this century Looking at last year’s page

Configuring a plug-in

Getting dynamic OLD web, meet the NEW web

Enter Ajax

Understanding Ajax The X factor

XML doesn’t DO anything

GETting data with the ajax method Parsing XML data Scheduling events on a page Self-referencing functions Getting more from your server

Server-side languages to the rescue!

What time is it? Turning off scheduled events on your page Your jQuery/Ajax Toolbox

9. Handling JSON Data: Client, Meet Server

Webville MegaCorp’s Marketing Department doesn’t know XML XML errors break the page Collect data from a web page What to do with the data Format the data before you send it Send the data to the server Store your data in a MySQL database Create your database to store runner info Anatomy of an insert statement Use PHP to access the data Handle POST data on the server Connect to a database with PHP Use select to read data from a database Get data with PHP JSON to the rescue! jQuery + JSON = Awesome A few PHP rules...

PHP basics Rules for variables Rules for loops

A few (more) PHP rules...

Rules for arrays Rules for conditionals Rules for writing to the screen

Format the output using PHP Access data in the JSON object Data sanitization and validation in PHP

Use the same PHP file for multiple purposes

Your jQuery/Ajax/PHP/MySQL Toolbox

10. jQuery UI: Extreme Form Makeover

Cryptozoologists.org needs a makeover Pimp your HTML form Save coding headaches (and time) with jQuery UI What’s inside the jQuery UI package

Our project checklist

Build a date picker into the sightings form jQuery UI behind the scenes Widgets have customizable options

Customize the datepicker with options The datepicker works! Check it off

Styling up your buttons

Grouping button widgets

Control numerical entries with a slider

The HTML for a slider widget The jQuery script for a slider widget

Computers mix color using red, green, and blue

Your sliders need to do the same

Build the refreshSwatch function One last little thing... Your jQuery Toolbox

11. jQuery and APIs: Objects, Objects Everywhere

Where’s Waldo Sasquatch? The Google Maps API APIs use objects Include Google maps in your page Getting JSON data with SQL and PHP Points on a map are markers Multicreature checklist Listening for map events You did it! Your jQuery API Toolbox Leaving town... It’s been great having you in jQueryville!

A. Leftovers: The Top Ten Things (We Didn’t Cover)

#1. Every single thing in the jQuery library

jQuery methods jQuery selectors

#2. jQuery CDNs #3. The jQuery namespace: noConflict method #4. Debugging your jQuery code #5. Advanced animation: queues #6. Form validation #7. jQuery UI effects #8. Creating your own jQuery plug-ins #9. Advanced JavaScript: closures #10. Templates

B. Set Up a Development Environment: Get Ready for the Big Times

Create a PHP development environment Find out what you have Do you have a web server? Do you have PHP? Which version? Do you have MySQL? Which version? Start with the web server Apache installation...concluded PHP installation PHP installation steps PHP installation steps...concluded Installing MySQL

Instructions and troubleshooting

Steps to install MySQL on Windows

Download your installer Pick a destination folder

Enabling PHP on Mac OS X Steps to install MySQL on Mac OS X

Download your installer Run the package installer

Index About the Authors Copyright

← Prev
Back
Next →

← Prev
Back
Next →