- Cover
- Title
- Copyright
- Dedication
- Contents at a Glance
- Contents
- About the Author
- About the Technical Reviewer
- Acknowledgments
- Chapter 1: Introduction
- Chapter 2: jQuery Fundamentals
- Chapter 3: jQuery Selectors
- 3-1. Examples
- 3-2. Selecting the HTML Element by its ID
- 3-3. Selecting All the HTML Elements on a Page
- 3-4. Selecting an HTML Element by ID to Highlight All Child Nodes
- 3-5. Selecting HTML Elements by Tag Name
- 3-6. Selecting HTML Elements by Tag Name to Highlight a Focused Field
- 3-7. Selecting HTML Elements by Class Name
- 3-8. Selecting HTML Elements that Match Any of the Specified Multiple Selectors
- 3-9. Selecting HTML Elements with an Attribute’s Value Starting with a Specified Value Followed by a Hyphen
- 3-10. Selecting HTML Elements with the Attribute’s Value Containing a Specified Value as a Word (Separated by Spaces)
- 3-11. Selecting HTML Elements that Have a Specified Attribute Regardless of its Value
- 3-12. Selecting the nth Item from the Selected HTML Elements
- 3-13. Selecting Even and Odd Numbered Items from the Matched HTML Elements
- 3-14. Selecting All Elements up to nth Element from the Matched HTML Elements
- 3-15. Selecting All Header HTML Elements
- 3-16. Selecting the First and/or Last Element from the Selected HTML Elements
- 3-17. Excluding Some Elements from the Matched HTML Elements
- 3-18. Selecting the First or nth Child Node of the Matched HTML Element’s Parent
- 3-19. Selecting All Elements that Contain the Specified Text
- 3-20. Selecting Elements that Have No Child Nodes (Including Text)
- 3-21. Selecting Elements that Have at Least One Child Node Matching the Specified Selector
- 3-22. Selecting Form Elements Based on Their Type and Attributes
- Summary
- Chapter 4: jQuery Selectors Filtering and Expansion
- 4-1. Narrowing the Set of Selected Elements by Using Selector/jQuery Object Filter
- 4-2. Narrowing the Set of Selected Elements by Using the Filter Function
- 4-3. Narrowing the Set of Selected Elements by Checking Their Descendant Nodes’ Attributes
- 4-4. Narrowing the Set of Selected Elements by Excluding Elements Using Selectors
- 4-5. Narrowing Down the Set of Selected Elements by Excluding Elements Using a Function
- 4-6. Narrowing Down the Set of Selected Elements by Selecting a Range of Elements by Index
- 4-7. Adding More Elements to the Set of Selected Elements
- 4-8. Checking if Common HTML Element(S) Exist in Two Sets of Selected HTML Elements
- 4-9. Iterating Over Each HTML Element in the jQuery Object to Perform an Action
- 4-10. Reverting to the Most Recent Expansion or Narrowing a Set of Selected Elements
- 4-11. Adding the Previous Set of Elements to the Current Set
- 4-12. Creating a New jQuery Object from an Existing jQuery Object Using a Function
- Summary
- Chapter 5: DOM Traversing
- 5-1. Getting the Child Nodes of Each Selected Element
- 5-2. Getting the Children Nodes of All Selected Elements, Including Text and Comments Nodes
- 5-3. Getting the Descendant Nodes of All Selected Elements Filtered by a Specified Selector, jQuery Object, or HTML Element
- 5-4. Getting the First Ancestor of Each Selected Element that Matches the Specified Selector
- 5-5. Getting the Parent of Each Selected Element
- 5-6. Getting the Ancestors of Each Selected Element
- 5-7. Getting the Ancestors of Each Selected Element Until a Node Is Reached
- 5-8. Getting the Immediately Preceding Sibling of Each Element of the Selected Elements
- 5-9. Getting the Immediately Following Sibling of Each Element from the Set
- 5-10. Getting All Siblings of Each Element of the Set
- Summary
- Chapter 6: DOM Manipulation
- 6-1. Adding CSS Class(es) to All Selected Elements
- 6-2. Checking if a CSS Class Is Associated with Any of the Selected Elements
- 6-3. Removing CSS Class(es) from Each Selected Element
- 6-4. Toggling CSS Class(es) for Each Element of the Selected Elements
- 6-5. Toggling CSS Class(es) for Selected Elements Based on the Return Value of a Function
- 6-6. Getting and Setting the CSS Property of the Selected Element(s)
- 6-7. Setting Multiple CSS Properties of All the Selected Elements
- 6-8. Setting a Single CSS Property of Each Element in the Set of Selected Elements Based on a Function
- 6-9. Getting the Attribute Value of the First Element in a Selection of Elements
- 6-10. Setting the Attribute Value(s) of All the Selected Elements
- 6-11. Setting the Attribute Value of All the Selected Elements Based on a Function
- 6-12. Getting the Property Value of the First Element of the Selected Elements
- 6-13. Setting the Property Value of All Selected Elements
- 6-14. Getting and Setting the Value Property of Selected Elements
- 6-15. Getting or Setting the Value of Each Element from the Set of Selected Elements Using a Function
- 6-16. Getting the HTML of the First Element of the Selected Elements
- 6-17. Replacing the HTML in All the Selected Elements
- 6-18. Getting the Combined Contents of Each of the Selected Elements
- 6-19. Inserting Content at the End of a Selection
- 6-20. Inserting Content at the Beginning of Each Element of the Selected Elements
- 6-21. Wrapping an HTML Structure Around Each Selected Element
- 6-22. Wrapping an HTML Structure Around the Content of Each Selected Element
- 6-23. Wrapping an HTML Structure Around All Selected Elements
- 6-24. Inserting Content After Each Selected Element
- 6-25. Copying All Selected Elements
- 6-26. Removing Selected Elements from the DOM
- 6-27. Removing the Child Nodes of All the Selected Elements from the DOM
- 6-28. Removing the Parent of Each Selected Element
- 6-29. Replacing Selected Items with New Items (Specified by HTMLString) in the DOM
- Summary
- Chapter 7: Event Handling
- 7-1. Performing an Action When an Event Occurs
- 7-2. Preventing a Default Event Handler
- 7-3. Binding Different Event Handlers to the Same Element
- 7-4. Getting an Event Object’s Properties
- 7-5. Passing Custom Data to the Event Handler
- 7-6. Event Propagation
- 7-7. Event Delegation
- 7-8. Triggering an Event Programmatically
- 7-9. Restricting Event Handler Execution
- 7-10. Removing the Event Handler
- Summary
- Chapter 8: jQuery Effects and Animation
- Options for Effects and Animations Methods
- 8-1. Showing and Hiding Elements
- 8-2. Toggling Between an Element’s Show and Hide States
- 8-3. Effects Methods for Hiding and Showing Elements
- 8-4. Applying Custom Animation to the CSS Properties of Selected Elements
- 8-5. Displaying Functions in the Effects Queue of Selected Elements
- 8-6. Replacing Functions in the Effects Queue of Selected Elements
- 8-7. Adding Custom Functions in the Effects Queue
- 8-8. Controlling the Animation by Pausing It
- 8-9. Removing All Remaining Effects and Animations Functions from the Effects Queue
- 8-10. Stopping the Currently Running Animation
- 8-11. Determining Global Settings for All the Animation Effects
- Summary
- Chapter 9: jQuery AJAX
- 9-1. Using jQuery AJAX API Calls to Get Plain Text Data from the Server
- 9-2. Using jQuery AJAX API Calls to Get HTML Text from the Server
- 9-3. Using jQuery AJAX API Calls to Get Data in XML Format from the Server
- 9-4. Using jQuery AJAX API Calls to Get Data in the JSON Format from the Server
- 9-5. Using jQuery AJAX API Calls to Get the Script from the Server
- 9-6. Sending Data to the Server Using a GET Request Method
- 9-7. Sending Form Data to the Server Using a POST Request Method
- 9-8. Using AJAX Events at the Request Level
- 9-9. Using AJAX Events at the Global Level
- 9-10. Order of AJAX Events at the Request and Global Levels
- Summary
- Chapter 10: jQuery UI
- Creating Widgets
- Downloading the jQuery UI Library and Themes
- 10-1. Using the CSS Framework and Icons
- 10-2. Creating the Autocomplete Widget
- 10-3. Creating the Spinner Widget
- 10-4. Creating the Slider Widget
- 10-5. Creating the Datepicker Widget
- 10-6. Creating the Tooltip Widget
- 10-7. Creating the Button Widget
- 10-8. Creating the Dialog Widget
- 10-9. Creating the Progress Bar Widget
- 10-10. Creating the Tabs Widget
- 10-11. Creating the Accordion Widget
- 10-12. Creating the Menu Widget
- 10-13. Creating a Data-Entry Form Using jQuery UI Widgets
- 10-14. Adding an Animation Effect Using addClass() or the animate() Method
- 10-15. Using jQuery UI Animation Effects on Selected Elements
- 10-16. Creating Draggable and Droppable Elements
- 10-17. Creating Drag-and-Drop Functionality in a Photo Album Application
- Summary
- Chapter 11: jQuery Mobile
- Downloading the jQuery Mobile Library
- 11-1. CSS Framework: CSS Classes, Themes, and Icons
- 11-2. Understanding Page Structure
- 11-3. Creating Buttons and Links
- 11-4. Creating Headers and Footers
- 11-5. Navigating Among Pages
- 11-6. Applying Transition Effects to Pages and Dialog Boxes
- 11-7. Using the Pagecontainer Widget
- 11-8. Creating a Dialog Box
- 11-9. Creating a Navigation Box
- 11-10. Creating a Panel
- 11-11. Creating a Popup
- 11-12. Creating Collapsibles
- 11-13. Creating a List View
- 11-14. Creating a Column Toggle Table
- 11-15. Creating a Reflow Table
- 11-16. Creating a Grid
- 11-17. Creating Form and Form Controls
- 11-18. Understanding the jQuery Mobile User-Initiated Events
- 11-19. Creating a Web Application Using jQuery Mobile Concepts
- Summary
- Chapter 12: jqWidgets Framework
- Downloading the jqWidgets Library
- Installing the jqWidgets Library
- The Code Template
- Testing Web Pages Using AJAX Calls
- 12-1. Using Themes and CSS
- 12-2. Data Binding
- 12-3. Data Entry and Validation of Forms
- 12-4. Using Other Data-Entry Widgets
- 12-5. Displaying Content Using the Expander Widget
- 12-6. Displaying a Collection of Nested Lists Using the Listmenu Widget
- 12-7. Displaying Content Using the Panel Widget
- 12-8. Displaying Content Using the Tabs Widget
- 12-9. Displaying Hierarchical Content Using the Tree Widget
- 12-10. Displaying Tabular Data Using the Grid Widget
- 12-11. Displaying Tabular Data Using the Data Table Widget
- 12-12. Displaying Hierarchical Data Using the Tree Grid Widget
- 12-13. Displaying HTML Elements Within a Window
- 12-14. Viewing Contents in Multiple Dockable Windows
- 12-15. Creating Charts
- 12-16. Creating a Calendar
- 12-17. Creating a Color Picker
- 12-18. Creating an Editor Widget
- 12-19. Creating a Menu
- 12-20. Creating a Navigation Bar
- Summary
- Appendix A: Basic HTML5 and CSS3
- Appendix B: Web Console
- Appendix C: Deploy Web Application
- C-1. Prerequisite: Downloading Java 7 JRE
- C-2. Downloading and Installing Apache Tomcat
- C-3. Starting and Stopping the Tomcat Server
- C-4. Deploying the Web Application on the Tomcat Server
- C-5. Installing IIS (Internet Information Services)
- C-6. Deploying the Web Application on the IIS Server
- C-7. Accessing a Deployed Web Application
- Appendix D: Logging, Error Handling, and Debugging
- Index
Web Console
B-1. Web Browsers
For all the chapter examples, I used the browsers listed in Table B-1 to test the code. Screen shots are taken from the Firefox browser. If there are significant differences in display or behavior in other browsers, I have mentioned this.
Table B-1. Web Browsers Used for Testing
B-2. Using the Web Console
In your JavaScript and jQuery code, you can the use console.log() statement to log messages in the web console. This is a better alternative to alert() because it doesn’t impact the developer or user experience and you have a choice to see or ignore logged messages. It is highly recommended that you remove informational console.log() statements before deploying to production to prevent any performance-related issues. I highly recommend you keep the web console active so that you can quickly identify any JavaScript syntax and runtime errors.
The following sections explain the ways to start the web console in different browsers.
B-2-1. Starting the Web Console in Firefox (Windows)
To start the web console in the Firefox browser, use the Ctrl-Shift-K shortcut key or follow the steps outlined in Figure B-1 (choose Firefox 
Web Developer Web Console).
Figure B-1. Starting the web console in the Firefox browser
B-2-2. Starting the Web Console in Chrome (Windows)
To start the web console in the Chrome browser, you can use the F12 (or Ctrl-Shift-I) shortcut key or follow the steps shown in Figure B-2 (choose the Customize and Control Google Chrome Icon at top-right corner Tools Developer Tools).
Figure B-2. Starting the web console in Google’s Chrome browser
After that, click on the Console tab.
B-2-3. Starting the Web Console in Internet Explorer (Windows)
To start the web console in the Internet Explorer browser, you can use the F12 shortcut key or follow the steps shown in Figure B-3 (choose Tools at the top-right corner F12 Developer Tools).
Figure B-3. Starting the web console in the Microsoft Internet Explorer browser
Then click on the Console button 
.
B-2-4. Starting the Web Console in Safari (Mac OS)
By default, the developer tools are not turned on in Safari, so make sure to turn them on from the Preferences menu. Choose the Advanced tab and then check the Show Desktop Menu in Menu Bar option. Figure B-4 shows how to enable the developer tools in Safari.
To start the web console in the Safari browser, you can use the Command-Option-C shortcut key or follow the steps outlined in Figure B-5.
Figure B-5. Starting the web console in Apple’s Safari browser
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.