Head First jQuery

Book description

Want to add more interactivity and polish to your websites? Discover how jQuery can help you build complex scripting functionality in just a few lines of code. With Head First jQuery, you'll quickly get up to speed on this amazing JavaScript library by learning how to navigate HTML documents while handling events, effects, callbacks, and animations. By the time you've completed the book, you'll be incorporating Ajax apps, working seamlessly with HTML and CSS, and handling data with PHP, MySQL and JSON.

If you want to learn—and understand—how to create interactive web pages, unobtrusive script, and cool animations that don't kill your browser, this book is for you.

  • Use jQuery with DOM to overcome the limitations of HTML and CSS
  • Learn how jQuery selectors and actions work together
  • Write functions and wire them to interface elements
  • Use jQuery effects to create actions on the page
  • Make your pages come alive with animation
  • Build interactive web pages with jQuery and Ajax
  • Build forms in web applications

Publisher resources

View/Submit Errata

Table of contents

  1. Dedication
  2. A Note Regarding Supplemental Files
  3. Advance Praise for Head First jQuery
  4. Praise for other Head First books
  5.  
  6. How to use this book: Intro
    1. Who is this book for?
      1. Who should probably back away from this book?
    2. We know what you’re thinking
    3. And we know what your brain is thinking
    4. Metacognition: thinking about thinking
    5. Here’s what WE did
    6. Here’s what YOU can do to bend your brain into submission
    7. Read me
    8. Software requirements
    9. Download jQuery
    10. Folder setup
    11. The technical review team
    12. Acknowledgments
    13. Safari® Books Online
  7. 1. Getting Started with jQuery: Web Page Action
    1. You want web page power
    2. HTML and CSS are fine, but...
    3. ...you need the power of script
    4. Enter jQuery (and JavaScript)!
    5. Look into the browser
    6. The hidden structure of a web page
    7. jQuery makes the DOM less scary
    8. How does that work?
      1. Introducing the jQuery function (and shortcut)
    9. jQuery selects elements the same way CSS does
    10. Style, meet script
    11. jQuery selectors at your service
    12. jQuery in translation
    13. Your first jQuery gig
      1. Revisit your requirements
    14. Set up your HTML and CSS files
    15. Slide on in...
    16. May the fade be with you
    17. That’s it?
    18. You rescued the Furry Friends campaign
    19. Your jQuery Toolbox
  8. 2. Selectors and Methods: Grab and Go
    1. Jump for Joy needs your help
    2. What are the project requirements?
    3. Dig in with divs
    4. A click event up close
    5. Add the click method to your page
    6. Get more specific
    7. Classing up your elements
    8. ID-entifying elements
    9. Wire up your web page
    10. Meanwhile, back to our list
    11. Creating some storage space
    12. Mix things up with concatenation
    13. Meanwhile, back in the code...
    14. Insert your message with append
    15. Everything works great, but...
    16. Give me $(this) one
    17. Put $ (this) to work
    18. Good riddance with remove
    19. Dig down with descendant selectors
    20. Your turn to jump for joy
    21. Your jQuery Toolbox
  9. 3. jQuery Events and Functions: Making Things Happen on Your Page
    1. Your jQuery skillz are in demand again
    2. The money man has a point...
    3. Making your page eventful
    4. Behind the scenes of an event listener
    5. Binding an event
      1. Method 1
      2. Method 2
    6. Triggering events
    7. Removing an event
      1. To remove one event
      2. To remove all events
    8. Going through the motions elements
    9. Your project structure
    10. Making things function-al
    11. The nuts and bolts of a function
      1. Giving functions names
        1. Function declaration
        2. Function expression
    12. The anonymous function
    13. Named functions as event handlers
      1. Function declaration
      2. Function expression
    14. Passing a variable to a function
    15. Functions can return a value, too
    16. Use conditional logic to make decisions
    17. Jump for Joy needs even more help
    18. Methods can change the CSS
    19. Add a hover event
    20. You’re almost there...
    21. Your jQuery Toolbox
  10. 4. jQuery Web Page Manipulation: Mod the DOM
    1. The Webville Eatery wants an interactive menu
    2. Go vegetarian
    3. Class up your elements
    4. Button things up
    5. What’s next?
    6. Swinging through the DOM tree
    7. Traversal methods climb the DOM
    8. Chain methods to climb farther
    9. Variables can store elements, too
    10. There’s that dollar sign again...
    11. Expand your storage options with arrays
    12. Store elements in an array
    13. Change out elements with replaceWith
    14. How can replaceWith help?
    15. Think ahead before using replaceWith
    16. replaceWith doesn’t work for every situation
      1. One–to–many substitution
      2. Many–to–one substitution
    17. Insert HTML content into the DOM
    18. Use filter methods to narrow your selections (Part 1)
    19. Use filter methods to narrow your selections (Part 2)
    20. Bring the burger back
    21. Where’s the beef (er...meat)?
    22. A meaty array
    23. The each method loops through arrays
    24. That’s it...right?
    25. Your jQuery Toolbox
  11. 5. jQuery Effects and Animation: A Little Glide in Your Stride
    1. DoodleStuff needs a web app
    2. Do the Monster Mashup
    3. Monster Mashup needs layout and positioning
    4. A little more structure and style
    5. Make the interface click
    6. Make the lightning effect
    7. How does jQuery animate elements?
      1. hide, show, and toggle change the CSS display property
    8. Fade effects animate the CSS opacity property
    9. Sliding is all about height
    10. Put fade effects to work
    11. Combine effects with method chains
    12. Striking back with a timed function
    13. Add the lightning functions to your script
    14. DIY effects with animate
      1. Motion effects
      2. Scale effects
    15. What can and can’t be animated
      1. Text effects
    16. animate changes style over time
    17. From where to where exactly?
    18. Absolute vs. relative element movement
      1. Relative animation = move it this much each time
    19. Move stuff relatively with operator combinations
    20. Add the animate functions to your script
    21. Look, Ma, no Flash!
    22. Your jQuery Toolbox
  12. 6. jQuery and JavaScript: Luke jQuery, I Am Your Father!
    1. Spicing up the Head First Lounge
    2. Objects offer even smarter storage
    3. Build your own objects
      1. UML diagram of an object
    4. Create reusable objects with object constructors
    5. Interacting with objects
    6. Set up the page
    7. The return of arrays
    8. Accessing arrays
    9. Add and update items in arrays
    10. Perform an action over (and over, and over...)
    11. Looking for the needle in a haystack
    12. Decision making time...again!
    13. Comparison and logical operators
    14. Clearing things up with jQuery...
      1. ... is even easier in JavaScript
    15. Add some extra excitement
    16. Your jQuery/JavaScript Toolbox
  13. 7. Custom Functions for Custom Effects: What Have You Done for Me Lately?
    1. A storm is brewing
    2. We’ve created a monster...function
    3. Get control of timed effects with the window object
    4. Respond to browser events with onblur and onfocus
    5. Timer methods tell your functions when to run
    6. Write the stopLightning and goLightning functions
    7. Feature request for Monster Mashup
    8. Let’s get (more) random
    9. You already know the current position...
    10. ...and the getRandom function too
    11. Move relative to the current position
      1. Scenario 1: target > current
      2. Scenario 2: target < current
    12. Monster Mashup v2 is a hit!
    13. Your jQuery Toolbox
  14. 8. jQuery and Ajax: Please Pass the Data
    1. Bring the Bit to Byte race into this century
    2. Looking at last year’s page
      1. Configuring a plug-in
    3. Getting dynamic
    4. OLD web, meet the NEW web
      1. Enter Ajax
    5. Understanding Ajax
    6. The X factor
      1. XML doesn’t DO anything
    7. GETting data with the ajax method
    8. Parsing XML data
    9. Scheduling events on a page
    10. Self-referencing functions
    11. Getting more from your server
      1. Server-side languages to the rescue!
    12. What time is it?
    13. Turning off scheduled events on your page
    14. Your jQuery/Ajax Toolbox
  15. 9. Handling JSON Data: Client, Meet Server
    1. Webville MegaCorp’s Marketing Department doesn’t know XML
    2. XML errors break the page
    3. Collect data from a web page
    4. What to do with the data
    5. Format the data before you send it
    6. Send the data to the server
    7. Store your data in a MySQL database
    8. Create your database to store runner info
    9. Anatomy of an insert statement
    10. Use PHP to access the data
    11. Handle POST data on the server
    12. Connect to a database with PHP
    13. Use select to read data from a database
    14. Get data with PHP
    15. JSON to the rescue!
    16. jQuery + JSON = Awesome
    17. A few PHP rules...
      1. PHP basics
      2. Rules for variables
      3. Rules for loops
    18. A few (more) PHP rules...
      1. Rules for arrays
      2. Rules for conditionals
      3. Rules for writing to the screen
    19. Format the output using PHP
    20. Access data in the JSON object
    21. Data sanitization and validation in PHP
      1. Use the same PHP file for multiple purposes
    22. Your jQuery/Ajax/PHP/MySQL Toolbox
  16. 10. jQuery UI: Extreme Form Makeover
    1. Cryptozoologists.org needs a makeover
    2. Pimp your HTML form
    3. Save coding headaches (and time) with jQuery UI
    4. What’s inside the jQuery UI package
      1. Our project checklist
    5. Build a date picker into the sightings form
    6. jQuery UI behind the scenes
    7. Widgets have customizable options
      1. Customize the datepicker with options
      2. The datepicker works!
      3. Check it off
    8. Styling up your buttons
      1. Grouping button widgets
    9. Control numerical entries with a slider
      1. The HTML for a slider widget
      2. The jQuery script for a slider widget
    10. Computers mix color using red, green, and blue
      1. Your sliders need to do the same
    11. Build the refreshSwatch function
    12. One last little thing...
    13. Your jQuery Toolbox
  17. 11. jQuery and APIs: Objects, Objects Everywhere
    1. Where’s Waldo Sasquatch?
    2. The Google Maps API
    3. APIs use objects
    4. Include Google maps in your page
    5. Getting JSON data with SQL and PHP
    6. Points on a map are markers
    7. Multicreature checklist
    8. Listening for map events
    9. You did it!
    10. Your jQuery API Toolbox
    11. Leaving town...
    12. It’s been great having you in jQueryville!
  18. A. Leftovers: The Top Ten Things (We Didn’t Cover)
    1. #1. Every single thing in the jQuery library
      1. jQuery methods
      2. jQuery selectors
    2. #2. jQuery CDNs
    3. #3. The jQuery namespace: noConflict method
    4. #4. Debugging your jQuery code
    5. #5. Advanced animation: queues
    6. #6. Form validation
    7. #7. jQuery UI effects
    8. #8. Creating your own jQuery plug-ins
    9. #9. Advanced JavaScript: closures
    10. #10. Templates
  19. B. Set Up a Development Environment: Get Ready for the Big Times
    1. Create a PHP development environment
    2. Find out what you have
    3. Do you have a web server?
    4. Do you have PHP? Which version?
    5. Do you have MySQL? Which version?
    6. Start with the web server
    7. Apache installation...concluded
    8. PHP installation
    9. PHP installation steps
    10. PHP installation steps...concluded
    11. Installing MySQL
      1. Instructions and troubleshooting
    12. Steps to install MySQL on Windows
      1. Download your installer
      2. Pick a destination folder
    13. Enabling PHP on Mac OS X
    14. Steps to install MySQL on Mac OS X
      1. Download your installer
      2. Run the package installer
  20. Index
  21. About the Authors
  22. Copyright

Product information

  • Title: Head First jQuery
  • Author(s): Ryan Benedetti, Ronan Cranley
  • Release date: September 2011
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449393212