Head First jQuery: A Brain-Friendly Guide (Brain-Friendly Guides)

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 Table of Contents (Summary) 11 Table of Contents (The real thing) 11 Intro: How to Use This Book 25 Who is this book for? 26 Metacognition: thinking about thinking 29 Bend your brain into submission 31 Read me 32 Software requirements 33 Download jQuery 34 Folder setup 35 The technical review team 36 Acknowledgments 37 Safari® Books Online 38 Chapter 1: Getting Started with jQuery: Web page action 39 You want web page power 40 HTML and CSS are fine, but... 41 ...you need the power of script 42 Enter jQuery (and JavaScript)! 43 Look into the browser 45 The hidden structure of a web page 46 jQuery makes the DOM less scary 47 How does that work? 49 jQuery selects elements the same way CSS does 51 Style, meet script 52 jQuery selectors at your service 53 jQuery in translation 54 Your first jQuery gig 58 Set up your HTML and CSS files 62 Slide on in... 64 May the fade be with you 65 That’s it? 66 You rescued the Furry Friends campaign 68 Your jQuery Toolbox 71 Chapter 2: Selectors and Methods: Grab and go 73 Jump for Joy needs your help 74 What are the project requirements? 75 Dig in with divs 77 A click event up close 80 Add the click method to your page 83 Get more specific 85 Classing up your elements 86 ID-entifying elements 87 Wire up your web page 90 Meanwhile, back to our list 93 Creating some storage space 94 Mix things up with concatenation 95 Meanwhile, back in the code... 96 Insert your message with append 97 Everything works great, but... 99 Give me $(this) one 101 Put $(this) to work 102 Good riddance with remove 104 Dig down with descendant selectors 105 Your turn to jump for joy 111 Your jQuery Toolbox 112 Chapter 3: jQuery Events and Functions: Making things happen on your page 113 Your jQuery skillz are in demand again 114 The money man has a point... 115 Making your page eventful 117 Behind the scenes of an event listener 118 Binding an event 119 Triggering events 120 Removing an event 124 Going through the elements 128 Your project structure 134 Making things function-al 138 The nuts and bolts of a function 139 The anonymous function 140 Named functions as event handlers 141 Passing a variable to a function 144 Functions can return a value, too 145 Use conditional logic to make decisions 147 Jump for Joy needs even more help 151 Methods can change the CSS 153 Add a hover event 155 You’re almost there... 157 Your jQuery Toolbox 160 Chapter 4: jQuery Web Page Manipulation: Mod the DOM 161 The Webville Eatery wants an interactive menu 162 Go vegetarian 163 Class up your elements 168 Button things up 171 What’s next? 173 Swinging through the DOM tree 178 Traversal methods climb the DOM 179 Chain methods to climb farther 180 Variables can store elements, too 187 There’s that dollar sign again... 188 Expand your storage options with arrays 189 Store elements in an array 190 Change out elements with replaceWith 192 How can replaceWith help? 193 Think ahead before using replaceWith 195 replaceWith doesn’t work for every situation 196 Insert HTML content into the DOM 197 Use filter methods to narrow your selections (Part 1) 199 Use filter methods to narrow your selections (Part 2) 200 Bring the burger back 203 Where’s the beef (er...meat)? 204 A meaty array 205 The each method loops through arrays 206 That’s it...right? 209 Your jQuery Toolbox 212 Chapter 5: jQuery Effects and Animation: A little glide in your stride 213 DoodleStuff needs a web app 214 Do the Monster Mashup 215 Monster Mashup needs layout and positioning 216 A little more structure and style 219 Make the interface click 220 Make the lightning effect 225 How does jQuery animate elements? 226 Fade effects animate the CSS opacity property 227 Sliding is all about height 228 Put fade effects to work 230 Combine effects with method chains 231 Striking back with a timed function 232 Add the lightning functions to your script 235 DIY effects with animate 237 What can and can’t be animated 238 animate changes style over time 240 From where to where exactly? 243 Absolute vs. relative element movement 244 Move stuff relatively with operator combinations 245 Add the animate functions to your script 247 Look, Ma, no Flash! 250 Your jQuery Toolbox 252 Chapter 6: jQuery and jQuery, I am your father! 253 Spicing up the Head First Lounge 254 Objects offer even smarter storage 256 Build your own objects 257 Create reusable objects with object constructors 258 Interacting with objects 259 Set up the page 260 The return of arrays 263 Accessing arrays 264 Add and update items in arrays 265 Perform an action over (and over, and over...) 267 Looking for the needle in a haystack 270 Decision making time...again! 277 Comparison and logical operators 278 Clearing things up with jQuery... 284 Add some extra excitement 288 Your jQuery/JavaScript Toolbox 290 Chapter 7: Custom Functions for Custom Effects: What have you done for me lately? 291 A storm is brewing 292 We’ve created a monster...function 293 Get control of timed effects with the window object 294 Respond to browser events with onblur and onfocus 297 Timer methods tell your functions when to run 301 Write the stopLightning and goLightning functions 304 Feature request for Monster Mashup 312 Let’s get (more) random 313 You already know the current position... 314 ...and the getRandom function too 314 Move relative to the current position 318 Monster Mashup v2 is a hit! 327 Your jQuery Toolbox 328 Chapter 8: jQuery and Ajax: Please pass the data 329 Bring the Bit to Byte race into this century 330 Looking at last year’s page 331 Getting dynamic 334 OLD web, meet the NEW web 335 Understanding Ajax 336 What is Ajax? 336 The X factor 337 GETting data with the ajax method 342 Parsing XML data 344 Scheduling events on a page 348 Self-referencing functions 349 Getting more from your server 352 What time is it? 353 Turning off scheduled events on your page 358 Your jQuery/Ajax Toolbox 362 Chapter 9: Handling JSON data: Client, meet server 363 Webville MegaCorp’s Marketing Department doesn’t know XML 364 XML errors break the page 365 Collect data from a web page 366 What to do with the data 369 Format the data before you send it 370 Send the data to the server 371 Store your data in a MySQL database 373 Create your database to store runner info 374 Anatomy of an insert statement 376 Use PHP to access the data 379 Handle POST data on the server 380 Connect to a database with PHP 381 Use select to read data from a database 383 Get data with PHP 385 JSON to the rescue! 388 jQuery + JSON = Awesome 389 A few PHP rules... 390 A few (more) PHP rules... 391 Format the output using PHP 392 Access data in the JSON object 399 Data sanitization and validation in PHP 402 Your jQuery/Ajax/PHP/MySQL Toolbox 407 Chapter 10: jQuery UI: Extreme form makeover 409 Cryptozoologists.org needs a makeover 410 Pimp your HTML form 411 Save coding headaches (and time) with jQuery UI 414 What’s inside the jQuery UI package 418 Build a date picker into the sightings form 419 jQuery UI behind the scenes 420 Widgets have customizable options 421 Styling up your buttons 424 Control numerical entries with a slider 428 Computers mix color using red, green, and blue 437 Build the refreshSwatch function 440 One last little thing... 444 Your jQuery Toolbox 448 Chapter 11: jQuery and APIs: Objects, objects everywhere 449 Where’s Sasquatch? 450 The Google Maps API 452 APIs use objects 453 Include Google maps in your page 455 Getting JSON data with SQL and PHP 458 Points on a map are markers 462 Multicreature checklist 466 Listening for map events 476 You did it! 480 Your jQuery API Toolbox 483 Appendix i: Leftovers: The Top Ten Things(we didn’t cover) 485 #1. Every single thing in the jQuery library 486 #2. jQuery CDNs 489 #3. The jQuery namespace: noConflict method 490 #4. Debugging your jQuery code 491 #5. Advanced animation: queues 492 #6. Form validation 493 #7. jQuery UI effects 494 #8. Creating your own jQuery plug-ins 495 #9. Advanced closures 496 #10. Templates 497 Appendix ii: Set Up A Development Environment: Get ready for the big times 499 Create a PHP development environment 500 Find out what you have 500 Do you have a web server? 501 Do you have PHP? Which version? 501 Do you have MySQL? Which version? 502 Start with the web server 503 Apache installation...concluded 504 PHP installation 504 PHP installation steps 505 PHP installation steps...concluded 506 Installing MySQL 506 Steps to install MySQL on Windows 507 Enabling PHP on Mac OS X 512 Steps to install MySQL on Mac OS X 512 Index 521 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 CSSLearn how jQuery selectors and actions work togetherWrite functions and wire them to interface elementsUse jQuery effects to create actions on the pageMake your pages come alive with animationBuild interactive web pages with jQuery and AjaxBuild forms in web applications 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.