jQuery Recipes: Find Ready-Made Solutions to All Your jQuery Problems, 2nd Edition
- Length: 710 pages
- Edition: 2
- Language: English
- Publisher: Apress
- Publication Date: 2021-11-24
- ISBN-10: 1484273036
- ISBN-13: 9781484273036
- Sales Rank: #0 (See Top 100 Books)
Quickly discover solutions to common problems, best practices you can follow, and everything jQuery has to offer. Using a problem-solution approach, this book begins with small initial problems that developers typically face while working with jQuery, and gradually goes deeper to explore more complex problems. The solutions include illustrations and clear, concise explanations of the code.
You will learn to traverse and manipulate the DOM effectively, understand how to use arrays, iteration, the event model, and implement animation and visual effects. You’ll explore how to use plugins and CSS. Using this book and jQuery, your web sites will be more dynamic and lively. This fully updated second edition teaches you modern jQuery techniques including how to traverse and manipulate the DOM, understand the event model, implement animation, and use sliding effects.
jQuery Recipes, Second Edition shows you how to avoid wasting development time and solve problems you may face. It is an invaluable reference to keep by your side as you progress in your jQuery development. Start becoming a jQuery pro with jQuery Recipes today.
What You’ll Learn
- Understand the basics of jQuery and how this library works
- Learn how to traverse and manipulate the DOM to your own requirements
- Explore jQuery UI techniques including accordion, dialog, slider, date picker and autocomplete
- Work with popular plugins and CSS to customize and tailor your development
Who This Book Is For
Ideal for novice or intermediate developers wishing to learn jQuery and have a handy jQuery reference by their side during their development.
Table of Contents About the Author About the Technical Reviewer Acknowledgments Introduction Chapter 1: JQuery Basics What Is jQuery? Understanding the DOM Selectors Types of Selectors 1-1. Including the jQuery Library in a Web Page Problem Solution How It Works 1-2. Getting the Document Ready Before Processing Problem Solution How It Works 1-3. Applying a Style to a Wrapper Set Problem Solution How It Works 1-4. Applying a Style to Specific Paragraphs Problem Solution addClass() Method How It Works 1-5. Counting Paragraphs of a Specific Class and Applying Styles to Them Problem Solution How It Works 1-6. Returning to a Prior Selection Problem Solution How It Works 1-7. Removing a DOM and Prepending and Appending Elements Problem Solution remove() prepend() append() How It Works 1-8. Applying Chaining to Apply Styles on Selected List Elements Problem Solution find() How It Works 1-9. Using a for Loop to Display Elements of an Unordered List Problem Solution children() How It Works 1-10. Replacing a DOM Element Problem Solution replaceWith(new_content) How It Works 1-11. Replacing Text and HTML Problem Solution How It Works 1-12. Cloning a DOM Problem Solution How It Works 1-13. Displaying Siblings Problem Solution How It Works 1-14. Setting and Getting Attributes Problem Solution attr() How It Works 1-15. Counting the Number of Nodes in the DOM and Displaying Their Text Problem Solution How It Works each() text() parent() 1-16. Obtaining the HTML of an Element Problem Solution How It Works 1-17. Assigning the Same Class Name to Different HTML Elements and Applying Styles to Them Problem Solution How It Works 1-18. Summary Chapter 2: Arrays and Iteration 2-1. Sorting an Array Problem Solution sort() append() length Property How It Works reverse() 2-2. Splitting an Array into Two Problem Solution splice() join() How It Works 2-3. Searching and Displaying Desired Values from a Numerical Array Problem Solution grep() How It Works 2-4. Concatenating Two Arrays Problem Solution merge() concat() How It Works 2-5. Searching for Desired Information in a String Array Problem Solution indexOf() index() How It Works 2-6. Manipulating Array Elements Problem Solution Converting Names to Uppercase Using an Ordered List each() How It Works 2-7. Converting a Numerical Array into a String and Finding Its Substring Problem Solution How It Works 2-8. Creating an Array of Objects and Displaying the Content Problem Solution How It Works 2-9. Using Associative Arrays Problem Solution How It Works 2-10. Sorting an Array of Objects Problem Solution How It Works 2-11. Summary Chapter 3: Understanding the Event Model 3-1. Displaying a Message on Getting Focus and When Blurred Problem Solution on() focus() blur() trigger() How It Works 3-2. Finding Which Mouse Button Is Pressed Problem Solution mousedown() event.which How It Works 3-3. Changing the Style on a Mouse Entering and Leaving an HTML Element Problem Solution mouseenter() mouseleave() mouseover() mouseout() How It Works 3-4. Using a Mouse Hover Event to Change the Style on a Button Problem Solution hover() How It Works 3-5. Using Mouse Up and Down Events to Show and Hide an Image Problem Solution mouseup() fadeOut() fadeIn() How It Works 3-6. Making Two Buttons, One for Hiding and One for Displaying an Image Problem Solution slideDown() off() hide() How It Works 3-7. Zoom In and Out of an Image Using toggleClass Problem Solution toggleClass() How It Works 3-8. Avoiding Event Bubbling Problem Solution How It Works stopPropagation() 3-9. Knowing Which Key Is Down, Pressed, or Released Problem Solution keydown() keypress() keyup() How It Works 3-10. Applying a Fading Effect to an Image Problem Solution fadeTo() How It Works 3-11. Applying Animation on an Image Problem Solution animate() How It Works 3-12. Triggering Events Automatically Problem Solution How It Works trigger() 3-13. Disabling a Button After It Is Clicked Once Problem Solution How It Works 3-14. Finding the Screen Coordinates of a Mouse-Button Press Problem Solution How It Works 3-15. Highlighting Text Dynamically Problem Solution How It Works 3-16. Making an Image Bright or Blurred with Mouse Movements Problem Solution How It Works 3-17. Creating Image-Based Rollovers Problem Solution How It Works 3-18. Adding and Removing Text in Response to Events Problem Solution How It Works 3-19. Displaying Word Balloons Problem Solution How It Works 3-20. Creating “Return to Top” Links Problem Solution How It Works 3-21. Displaying Text with an Animation Effect Problem Solution How It Works Adding a Mouseover Event 3-22. Replacing Text with a Sliding Effect Problem Solution How It Works 3-23. Summary Chapter 4: Form Validation 4-1. Confirming a Required Field Is Not Left Blank Problem Solution How It Works 4-2. Validating a Numerical Field Problem Solution Allowing Only Numerical Values Allowing a Negative Value Also Allowing a Range of Values How It Works 4-3. Validating Phone Numbers Problem Solution How It Works 4-4. Validating a User Id Problem Solution How It Works 4-5. Validating a Date Problem Solution How It Works 4-6. Validating an Email Address Problem Solution How It Works 4-7. Checking Whether a Checkbox Is Checked or Not Problem Solution Checking with the length Method How It Works 4-8. Checking If a Radio Button Is Selected Problem Solution How It Works 4-9. Checking That an Option in a Select Element is Selected Problem Solution How It Works Multiple Select 4-10. Applying Styles to Options and a Form Button Problem Solution How It Works Styling a Form Button Creating an Image Submit Button 4-11. Checking and Unchecking All Checkboxes Together Problem Solution How It Works .attr() .is() 4-12. Validating Two Fields Problem Solution How It Works Adding a Submit Button 4-13. Matching the Password and Confirming Password Fields Problem Solution How It Works .next() 4-14. Disabling Certain Fields Problem Solution How It Works 4-15. Validating a Complete Form Problem Solution How It Works Highlighting the Input Fields and Grouping Common Form Elements 4-16. Summary Chapter 5: Page Navigation 5-1. Writing a Breadcrumb Menu Problem Solution How It Works 5-2. Adding a Hover Effect to Menu Items Problem Solution How It Works 5-3. Creating a Contextual Menu Problem Solution How It Works Meaning of the jQuery Code 5-4. Creating a Navigation Menu with Access Keys Problem Solution How It Works 5-5. Creating a Context Menu on Right Click Problem Solution How It Works 5-6. Creating Two Menus with Separate Menu Items Problem Solution How It Works 5-7. Creating Two Menus with Submenu Items Problem Solution How It Works :first 5-8. Making an Accordion Menu Problem Solution How It Works 5-9. Making a Dynamic Visual Menu Problem Solution How It Works 5-10. Summary Chapter 6: Implementing Animation 6-1. Animating an Image to the Right and Then the Left Problem Solution left Property position Property How It Works 6-2. Managing and Manipulating the jQuery Queue Problem Solution slideToggle() .queue() How It Works Popping the Last Function from the Queue 6-3. Showing Images One by One by Clicking the Next and Previous buttons Problem Solution padding Property overflow Property display Property float Property css() margin-left Property How It Works Displaying All Hidden Images One by One When Any Arrow Key Is Pressed Making the Images Slide Continuously 6-4. Zooming In on an Image When the Mouse Hovers Over It Problem Solution How It Works 6-5. Displaying Detailed Information on Clicking the “Read More” Link Problem Solution event.preventDefault() Method How It Works 6-6. Expanding and Collapsing a List Using Animation Problem Solution How It Works 6-7. Summary Chapter 7: Sliding and Visual Effects 7-1. Displaying Images, One at a Time Infinitely Problem Solution position Property slice() next() end() setInterval() appendTo() 7-2. Making a Ball Bounce Problem Solution 7-3. Making Images Scroll Vertically Upward Within a Box Problem Solution 7-4. Displaying Images Vertically, Each Replaced by the Next in Sequence Problem Solution scrollTop Property after() 7-5. Making a News Scroller Problem Solution stop() 7-6. Showing Images One After the Other on Hover Problem Solution How It Works Making a Slide Show 7-7. Showing Images Pagewise Problem Solution How It Works 7-8. Shuffling Images in Either Direction Problem Solution How It Works 7-9. Writing a Pendulum Scroller Problem Solution How It Works 7-10. Scrolling Images Using Arrays Problem Solution Scrolling an Image Over Other Images Scrolling Only the Image That Is Hovered Over Fading Out and Replacing an Image Scrolling One Image Left and One Image Right, and Fading Out the Middle 7-11. Summary Chapter 8: Dealing with Tables 8-1. Hovering Over Table Rows Problem Solution How It Works 8-2. Highlighting Alternate Columns Problem Solution How It Works :nth-child() Highlighting Alternate Rows Highlighting the Column That Is Hovered Over .index() Highlighting the Column Heading Also While Hovering Highlighting Individual Cells of the Table When Hovered Over 8-3. Filtering Rows Problem Solution How It Works Hiding the Selected Row 8-4. Hiding the Selected Column Problem Solution How It Works Filtering Out Columns How It Works :not() 8-5. Paginating the Table Problem Solution How It Works 8-6. Expanding and Collapsing List Items Problem Solution How It Works 8-7. Expanding and Collapsing Rows of the Table Problem Solution How It Works Rows with Plus and Minus Icons 8-8. Sorting List Items Problem Solution How It Works 8-9. Sorting a Table Problem Solution Determining Which Column Heading Is Clicked How It Works Sorting the Table on the Basis of a Selected Column (Only in Ascending Order) Outline Placeholder Sorting the Table on the Basis of a Selected Column in Ascending as Well as Descending Order How It Works 8-10. Filtering Rows from a Table Problem Solution How It Works 8-11. Summary Chapter 9: jQuery UI 9-1. Using Datepicker Problem Solution Configuring Properties of the Datepicker Widget Changing the Date Format Applying Styles to the Datepicker 9-2. Using the Autocomplete Widget Problem Solution Configuring the Autocomplete Widget 9-3. Using an Accordion Problem Solution Configuring an Accordion 9-4. Using Dialogs Problem Solution Options to Configure a Dialog Box 9-5. Using the Tabs Widget Problem Solution Options to Configure Tabs 9-6. Summary Chapter 10: AJAX 10-1. Returning a Single Line of Text from the Server Problem Solution ajax() 10-2. Returning Multiple Lines of Text from Server Problem Solution 10-3. Returning a Name/Value Pair Using JSON Problem Solution getJSON() each() arr.push() join() 10-4. Returning a JSON Object Problem Solution 10-5. Returning the JSON Object That Displays Images Problem Solution 10-6. Converting a String to Uppercase Using AJAX Problem Solution strtoupper() 10-7. Displaying the Price of the Selected Product Through an AJAX Request Problem Solution 10-8. Authenticating a User Using AJAX Problem Solution Create Database Show Databases Use Statement Create Table SHOW TABLES Statement SELECT Query INSERT INTO trim() mysqli_connect() die() mysqli_query() mysqli_num_rows () 10-9. Validating a User Name Problem Solution How It Works 10-10. Using Autocomplete Problem Solution Getting Names Generated from the Database How It Works 10-11. Importing HTML Problem Solution Importing Only Desired Elements How It Works 10-12. Getting XML Data Problem Solution Displaying Roll, First Name, and Marks from an XML File How It Works 10-13. Paginating Tables Problem Solution How It Works 10-14. Summary Chapter 11: Creating and Using jQuery Plugins Creating a Plugin 11-1. Creating a Plugin That Changes the Font Size, Font Style, and Foreground and Background Color of an Element Problem Solution 11-2. Making a Plugin Chainable 11-3. Enabling Passing Customization Options to a Plugin Problem Solution Modifying Content Using a Plugin Using Plugins 11-4. Displaying Images Slider Using a Magnific Popup Plugin Problem Solution 11-5. Displaying Dynamic Checkboxes and Radio Buttons Using an iCheck Plugin Problem Solution 11-6. Creating an Image Gallery and Carousel Using a blueimp Gallery Plugin Problem Solution Stretching Images Making an Image Carousel 11-7. Validating a Form Using a jQuery Validation Plugin Problem Solution 11-8. Summary Chapter 12: Using CSS 12-1. Distinguishing HTML Elements Problem Solution How It Works 12-2. Applying Styles to an Element Nested Inside Another Element Problem Solution How It Works 12-3. Indenting Paragraphs Problem Solution How It Works 12-4. Applying an Initial Cap to a Paragraph Problem Solution How It Works 12-5. Removing the Gap Between Heading and Paragraph Problem Solution How It Works 12-6. Applying Styles to Heading Text Problem Solution How It Works 12-7. Indenting the First Line Of Multiple Paragraphs Problem Solution How It Works 12-8. Creating Paragraphs with Hanging Indents Problem Solution How It Works 12-9. Creating a Bordered Pull Quote Problem Solution How It Works 12-10. Creating a Pull Quote with Images Problem Solution How It Works 12-11. Applying List Properties to List Items Problem Solution How It Works 12-12. Applying Styles to Only Selected List Items Problem Solution Applying Styles to the List Items Selected with Child Selector Applying Styles to List Items to Which a CSS Class Is Not Applied How It Works 12-13. Placing Dividers Between List Items Problem Solution How It Works 12-14. Applying Image Markers to the List Problem Solution How It Works 12-15. Creating Inline Lists Problem Solution How It Works 12-16. Applying Styles to Hyperlinks and mailto Problem Solution How It Works 12-17. Assigning Different Dimensions to HTML Elements Problem Solution How It Works 12-18. Placing HTML Elements Problem Solution Making a Two-Column Layout Reversing the Columns How It Works 12-19. Creating a Multicolumn Layout Problem Solution Applying Floats Increasing Gutters Size Between Columns How It Works 12-20. Wrapping Text Around Images Problem Solution How It Works 12-21. Placing a Drop Shadow Behind an Image Problem Solution How It Works 12-22. Changing the Cursor When the Mouse Moves Over a Link Problem Solution How It Works 12-23. Displaying a Long Piece of Text Within a Specific Area Problem Solution How It Works 12-24. Making a Rounded Corner Column Problem Solution How It Works 12-25. Applying Text Decorations Problem Solution How It Works 12-26. Scaling Images Problem Solution How It Works 12-27. Setting a Background Image Problem Solution How It Works 12-28. Centering a Background Image in the Browser Problem Solution How It Works 12-29. Making the Background Image Stationary Problem Solution How It Works 12-30. Summary Appendix A: Installing WampServer A-1. Downloading WampServer A-2. Installing WampServer Index
Donate to keep this site alive
How to download source code?
1. Go to: https://github.com/Apress
2. In the Find a repository… box, search the book title: jQuery Recipes: Find Ready-Made Solutions to All Your jQuery Problems, 2nd Edition
, sometime you may not get the results, please search the main title.
3. Click the book title in the search results.
3. Click Code to download.
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.