Java Script
ptg11524036 ptg11524036 jQuery and JavaScript PHRASEBOOK ptg11524036 This page intentionally left blank ptg11524036 Brad Dayley jQuery and JavaScript PHRASEBOOK Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Cape Town • Sydney • Tokyo • Singapore • Mexico City ptg11524036 Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and the publisher was aware of a trademark claim, the designations have been print- ed with initial capital letters or in all capitals. The author and publisher have taken care in the preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein. For information about buying this title in bulk quantities, or for special sales opportunities (which may include electronic versions; custom cover designs; and content particular to your business, training goals, marketing focus, or branding interests), please contact our corporate sales department at corpsales@pearsoned.com or (800) 382-3419. For government sales inquiries, please contact governmentsales@pearsoned.com. For questions about sales outside the U.S., please contact international@pearsoned.com. Visit us on the Web: informit.com/aw Library of Congress Control Number: 2013950281 Copyright © 2014 Pearson Education, Inc. All rights reserved. Printed in the United States of America. This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise. To obtain permission to use material from this work, please submit a written request to Pearson Education, Inc., Permissions Department, One Lake Street, Upper Saddle River, New Jersey 07458, or you may fax your request to (201) 236-3290. ISBN-13: 978-0-321-91896-3 ISBN-10: 0-321-91896-7 First printing: December 2013 Acquisitions Editor Mark Taber Managing Editor Kristy Hart Project Editor Katie Matejka Copy Editor Karen Gill Indexer Publishing Services, WordWise, Larry Sweazy Proofreader Kathy Ruiz Technical Reviewer Phil Ballard Editorial Assistant Vanessa Evans Cover Designer Chuti Prasertsith Senior Compositor Gloria Schurick ptg11524036 Dedication For D! A & F ptg11524036 Contents 1 Jumping into jQuery, JavaScript, and the World of Dynamic Web Development 1 Understanding JavaScript 2 Introducing jQuery 4 Introducing jQuery UI 7 Introducing jQuery Mobile 9 Configuring Browser Development Tools 12 2 Using the JavaScript Language 15 JavaScript Syntax 15 Defining and Accessing Data 16 Defining Functions 20 Manipulating Strings 21 Manipulating Arrays 25 Applying Logic 29 Math Operations 31 Working with Dates 36 3 Interacting with the Browser 43 Writing to the JavaScript Console 43 Reloading the Web Page 44 Redirecting the Web Page 44 Getting the Screen Size 45 Getting Current Location Details 45 Accessing the Browser 47 Using the Browser History to Go Forward and Backward Pages 49 Creating Popup Windows 50 Manipulating Cookies 52 Adding Timers 55 ptg11524036 viiContents 4 Accessing HTML Elements 59 Finding HTML Elements in JavaScript 59 Using the jQuery Selector to Find HTML Elements 61 Chaining jQuery Object Operations 75 Navigating jQuery Objects to Select Elements 76 5 Manipulating the jQuery Object Set 83 Getting DOM Objects from a jQuery Object Set 84 Converting DOM Objects into jQuery Objects 84 Iterating Through the jQuery Object Set Using .each() 85 Using .map() 87 Assigning Data Values to Objects 89 Adding DOM Elements to the jQuery Object Set 91 Removing Objects from the jQuery Object Set 91 Filtering the jQuery Object Results 92 6 Capturing and Using Browser and User Events 95 Understanding Events 96 Adding Event Handlers 99 Controlling Events 107 Using Event Objects 111 Handling Mouse Events 115 Handling Keyboard Events 118 Form Events 122 7 Manipulating Web Page Elements Dynamically 125 Getting and Setting DOM Element Attributes and Properties 126 ptg11524036 Getting and Setting CSS Properties 130 Getting and Manipulating Element Content 139 8 Manipulating Web Page Layout Dynamically 143 Hiding and Showing Elements 143 Adjusting Opacity 146 Resizing Elements 149 Repositioning Elements 152 Stacking Elements 156 9 Dynamically Working with Form Elements 159 Getting and Setting Text Input Values 160 Checking and Changing Check Box State 161 Getting and Setting the Selected Option in a Radio Group 162 Getting and Setting Select Values 164 Getting and Setting Hidden Form Attributes 166 Disabling Form Elements 167 Showing/Hiding Form Elements 170 Forcing Focus to and Away from Form Elements 172 Controlling Form Submission 175 10 Building Web Page Content Dynamically 177 Creating HTML Elements Using jQuery 178 Adding Elements to the Other Elements 179 Removing Elements from the Page 184 Dynamically Creating a Select Form Element 186 Appending Rows to a Table 189 Inserting Items into a List 191 Creating a Dynamic Image Gallery 193 Adding HTML5 Canvas Graphics 196 viii Contents ptg11524036 11 Adding jQuery UI Elements 201 Adding the jQuery UI Library 201 Implementing an Autocomplete Input 203 Implementing Drag and Drop 205 Adding Datepicker Element 212 Using Sliders to Manipulate Elements 215 Creating a Menu 219 Adding Tooltips 223 12 Animation and Other Special Effects 227 Understanding jQuery Animation 228 Animating Visibility 234 Making an Element Slide Back to Disappear 238 Animating Show and Hide 242 Animating Resizing an Image 246 Animating Moving an Element 248 13 Using AJAX to Communicate with Web Servers and Web Services 251 Understanding AJAX 251 AJAX from JavaScript 261 AJAX from jQuery 267 Handling jQuery AJAX Responses 282 Using Advanced jQuery AJAX 285 14 Implementing Mobile Web Sites with jQuery 291 Getting Started with jQuery Mobile 291 Building Mobile Pages 302 Implementing Mobile Sites with Multiple Pages 306 Creating a Navbar 314 Applying a Grid Layout 316 Implementing Listviews 320 ixContents [...]... dynamic web programming and getting set up to use JavaScript and jQuery in your web pages 2 CHAPTER 1 Jumping into jQuery, JavaScript, and the World of Dynamic Web Development Understanding JavaScript JavaScript is a programming language much like any other.What separates JavaScript from other programming languages is that the browser has a built-in interpreter that can parse and execute the language.That... left blank 1 Jumping into jQuery, JavaScript, and the World of Dynamic Web Development J avaScript and its amped-up counterpart jQuery have completely changed the game when it comes to creating rich interactive web pages and web-based applications JavaScript has long been a critical component for creating dynamic web pages Now, with the advancements in the jQuery, jQuery UI, and jQuery Mobile libraries,... the jQuery Mobile css file as well using a tag For example, the following code loads the jQuery library first because it is required by jQuery Mobile and then loads the jQuery Mobile JS and CSS files: ➥ 12 CHAPTER 1 Jumping into jQuery, JavaScript, and the World of Dynamic Web Development Similar to what you did for jQuery UI, you need to load jQuery before loading jQuery Mobile Once jQuery is loaded, you can load the jQuery Mobile js file from an external CDN source or a... src="local /jquery- 2.0.3.min.js"> or for CDN Introducing jQuery Mobile To load jQuery. .. the Download button at the bottom.This downloads the jQuery UI files 7 8 CHAPTER 1 Jumping into jQuery, JavaScript, and the World of Dynamic Web Development When you download the jQuery UI library, you get a zip file Inside that file are three main folders that you need to understand.They are n js—This is the folder that contains the jQuery UI and jQuery libraries files.You need to deploy these files... using JavaScript code to dynamically populate a element with children Figure 1.1 JavaScript runs in the browser and can change the HTML elements on the web page without needing to retrieve additional pages from the web server Understanding JavaScript Adding JavaScript to an HTML Document alert( "JavaScript is Enabled!"); You can add JavaScript. .. Development n Building on JavaScript and jQuery provides a common and well developed platform that is based on proven concepts n Developing a mobile web apps is simple to do and does not require any installation of the user’s part That is why they are becoming more and more popular Getting the jQuery Mobile Library To get started with jQuery Mobile, you need to download the library and add it to your web... the jQuery library from http://jquerymobile.com/download/.You can also download jQuery Mobile from http://jquerymobile.com/download-builder/ by selecting the version and options that you would like to include and clicking on the Download button at the bottom.This downloads a zip file containing the jQuery Mobile library Watch out! The css files and the images folder that are included with the jQuery. .. will be jquery. mobile.###.css, jquery. mobile.###.structure.css, and jquery. mobile.###.theme.css files as well as their minified forms.This is all the styling code and should be placed in the same location as the jquery. moble.###.js file n images folder—This folder contains the images and icons used by jQuery Mobile to style the elements.This should also be placed in the same location as the jquery. moble.###.js . ptg11524036 ptg11524036 jQuery and JavaScript PHRASEBOOK ptg11524036 This page intentionally left blank ptg11524036 Brad Dayley jQuery and JavaScript PHRASEBOOK Upper Saddle River, NJ. F ptg11524036 Contents 1 Jumping into jQuery, JavaScript, and the World of Dynamic Web Development 1 Understanding JavaScript 2 Introducing jQuery 4 Introducing jQuery UI 7 Introducing jQuery Mobile 9 Configuring. programming and getting set up to use JavaScript and jQuery in your web pages. ptg11524036 Understanding JavaScript JavaScript is a programming language much like any other.What separates JavaScript