book

Head First jQuery

by Ryan Benedetti, Ronan Cranley

September 2011

Beginner to intermediate

536 pages

11h 46m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Who is this book for?Who should probably back away from this book?We know what you’re thinkingAnd we know what your brain is thinkingMetacognition: thinking about thinkingHere’s what WE didHere’s what YOU can do to bend your brain into submissionRead meSoftware requirementsDownload jQueryFolder setupThe technical review teamAcknowledgmentsSafari® Books Online
You want web page powerHTML and CSS are fine, but......you need the power of scriptEnter jQuery (and JavaScript)!Look into the browserThe hidden structure of a web pagejQuery makes the DOM less scaryHow does that work?Introducing the jQuery function (and shortcut)jQuery selects elements the same way CSS doesStyle, meet scriptjQuery selectors at your servicejQuery in translationYour first jQuery gigRevisit your requirementsSet up your HTML and CSS filesSlide on in...May the fade be with youThat’s it?You rescued the Furry Friends campaignYour jQuery Toolbox
Jump for Joy needs your helpWhat are the project requirements?Dig in with divsA click event up closeAdd the click method to your pageGet more specificClassing up your elementsID-entifying elementsWire up your web pageMeanwhile, back to our listCreating some storage spaceMix things up with concatenationMeanwhile, back in the code...Insert your message with appendEverything works great, but...Give me $(this) onePut $ (this) to workGood riddance with removeDig down with descendant selectorsYour turn to jump for joyYour jQuery Toolbox
Your jQuery skillz are in demand againThe money man has a point...Making your page eventfulBehind the scenes of an event listenerBinding an eventMethod 1Method 2Triggering eventsRemoving an eventTo remove one eventTo remove all eventsGoing through the motions elementsYour project structureMaking things function-alThe nuts and bolts of a functionGiving functions namesFunction declarationFunction expressionThe anonymous functionNamed functions as event handlersFunction declarationFunction expressionPassing a variable to a functionFunctions can return a value, tooUse conditional logic to make decisionsJump for Joy needs even more helpMethods can change the CSSAdd a hover eventYou’re almost there...Your jQuery Toolbox
The Webville Eatery wants an interactive menuGo vegetarianClass up your elementsButton things upWhat’s next?Swinging through the DOM treeTraversal methods climb the DOMChain methods to climb fartherVariables can store elements, tooThere’s that dollar sign again...Expand your storage options with arraysStore elements in an arrayChange out elements with replaceWithHow can replaceWith help?Think ahead before using replaceWithreplaceWith doesn’t work for every situationOne–to–many substitutionMany–to–one substitutionInsert HTML content into the DOMUse filter methods to narrow your selections (Part 1)Use filter methods to narrow your selections (Part 2)Bring the burger backWhere’s the beef (er...meat)?A meaty arrayThe each method loops through arraysThat’s it...right?Your jQuery Toolbox

DoodleStuff needs a web appDo the Monster MashupMonster Mashup needs layout and positioningA little more structure and styleMake the interface clickMake the lightning effectHow does jQuery animate elements?hide, show, and toggle change the CSS display propertyFade effects animate the CSS opacity propertySliding is all about heightPut fade effects to workCombine effects with method chainsStriking back with a timed functionAdd the lightning functions to your scriptDIY effects with animateMotion effectsScale effectsWhat can and can’t be animatedText effectsanimate changes style over timeFrom where to where exactly?Absolute vs. relative element movementRelative animation = move it this much each timeMove stuff relatively with operator combinationsAdd the animate functions to your scriptLook, Ma, no Flash!Your jQuery Toolbox
Spicing up the Head First LoungeObjects offer even smarter storageBuild your own objectsUML diagram of an objectCreate reusable objects with object constructorsInteracting with objectsSet up the pageThe return of arraysAccessing arraysAdd and update items in arraysPerform an action over (and over, and over...)Looking for the needle in a haystackDecision making time...again!Comparison and logical operatorsClearing things up with jQuery...... is even easier in JavaScriptAdd some extra excitementYour jQuery/JavaScript Toolbox
A storm is brewingWe’ve created a monster...functionGet control of timed effects with the window objectRespond to browser events with onblur and onfocusTimer methods tell your functions when to runWrite the stopLightning and goLightning functionsFeature request for Monster MashupLet’s get (more) randomYou already know the current position......and the getRandom function tooMove relative to the current positionScenario 1: target > currentScenario 2: target < currentMonster Mashup v2 is a hit!Your jQuery Toolbox
Bring the Bit to Byte race into this centuryLooking at last year’s pageConfiguring a plug-inGetting dynamicOLD web, meet the NEW webEnter AjaxUnderstanding AjaxThe X factorXML doesn’t DO anythingGETting data with the ajax methodParsing XML dataScheduling events on a pageSelf-referencing functionsGetting more from your serverServer-side languages to the rescue!What time is it?Turning off scheduled events on your pageYour jQuery/Ajax Toolbox
Webville MegaCorp’s Marketing Department doesn’t know XMLXML errors break the pageCollect data from a web pageWhat to do with the dataFormat the data before you send itSend the data to the serverStore your data in a MySQL databaseCreate your database to store runner infoAnatomy of an insert statementUse PHP to access the dataHandle POST data on the serverConnect to a database with PHPUse select to read data from a databaseGet data with PHPJSON to the rescue!jQuery + JSON = AwesomeA few PHP rules...PHP basicsRules for variablesRules for loopsA few (more) PHP rules...Rules for arraysRules for conditionalsRules for writing to the screenFormat the output using PHPAccess data in the JSON objectData sanitization and validation in PHPUse the same PHP file for multiple purposesYour jQuery/Ajax/PHP/MySQL Toolbox
Cryptozoologists.org needs a makeoverPimp your HTML formSave coding headaches (and time) with jQuery UIWhat’s inside the jQuery UI packageOur project checklistBuild a date picker into the sightings formjQuery UI behind the scenesWidgets have customizable optionsCustomize the datepicker with optionsThe datepicker works!Check it offStyling up your buttonsGrouping button widgetsControl numerical entries with a sliderThe HTML for a slider widgetThe jQuery script for a slider widgetComputers mix color using red, green, and blueYour sliders need to do the sameBuild the refreshSwatch functionOne last little thing...Your jQuery Toolbox
Where’s Waldo Sasquatch?The Google Maps APIAPIs use objectsInclude Google maps in your pageGetting JSON data with SQL and PHPPoints on a map are markersMulticreature checklistListening for map eventsYou did it!Your jQuery API ToolboxLeaving town...It’s been great having you in jQueryville!
#1. Every single thing in the jQuery libraryjQuery methodsjQuery 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
Create a PHP development environmentFind out what you haveDo you have a web server?Do you have PHP? Which version?Do you have MySQL? Which version?Start with the web serverApache installation...concludedPHP installationPHP installation stepsPHP installation steps...concludedInstalling MySQLInstructions and troubleshootingSteps to install MySQL on WindowsDownload your installerPick a destination folderEnabling PHP on Mac OS XSteps to install MySQL on Mac OS XDownload your installerRun the package installer

Overview

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.