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