jQuery For Dummies

Learn how jQuery can make your Web page or blog stand out from the crowd! jQuery is free, open source software that allows you to extend and customize Joomla!, Drupal, AJAX, and WordPress via plug-ins. Assuming no previous programming experience, Lynn Beighley takes you through the basics of jQuery from the very start. You'll discover how the jQuery library separates itself from other JavaScript libraries through its ease of use, compactness, and friendliness if you're a beginner programmer. Written in the easy-to-understand style of the For Dummies brand, this book demonstrates how you can add unique and exciting interactivity to a Web site or WordPress blog, including photo browsers, menus, tab-based navigation, sliding sidepanels, slideshows, transition effects, fade effects, Twitter feeds, and much, much more! Walks you through the capabilities of jQuery, the number one open source JavaScript library that enables you to provide interactivity on a Web site or blog Helps you understand DOM (Document Object Model) scripting, applying CSS classes via JQuery, and adding in special effects and jQuery plug-ins to your site Shows you how to create dazzling special effects on your site, including fades, slide shows, sliding panels, tabbed navigation, and more Explains how to add customized Twitter feeds, RSS feeds to aggregate content on your site, or add a photo browser to a site or blog Introduces ways to create jQuery plug-ins for WordPress, Drupal, and more If you have queries about how you can make your blog or Web site stand apart from the crowd, jQuery For Dummies is the book for you! jQuery For Dummies® 1 About the Author 7 Dedication 9 Author’s Acknowledgments 11 Contents at a Glance 13 Table of Contents 15 Introduction 23 About This Book 23 How to Use This Book 24 Foolish Assumptions 24 How This Book Is Organized 24 Icons Used in This Book 26 Where to Go from Here 26 Part I: Getting Started with jQuery 27 Chapter 1: Getting Up and Running with jQuery 29 Finding Out What jQuery Can Do for You 29 Installing jQuery 32 Creating Your First jQuery Code 37 Chapter 2: Accessing HTML Elements 43 Understanding Elements 43 Getting and Setting Element Values 46 Changing HTML Content 52 Changing Text Content 54 Chapter 3: Selecting HTML Elements, Attributes, and Positions 57 Using jQuery Selectors 57 Selecting from Forms 68 Selecting Attributes 69 Selecting Visibility 70 Selecting Parents and Children 70 Chapter 4: Managing Events 73 Using jQuery When the Page Loads 73 Handling Events 74 Working with Interaction Helpers 85 Part II: Affecting Elements with Effects 91 Chapter 5: Playing Hide-and-Seek with Web Page Elements 93 Hiding Elements with jQuery 93 Showing Elements with jQuery 101 Toggling Visibility with jQuery 105 Chapter 6: Sliding and Fading Web Page Elements 113 Sliding Elements with jQuery 113 Fading Elements with jQuery 122 Chapter 7: Animating Web Page Elements 129 Understanding How jQuery Animation Works 129 Animating Elements with jQuery 133 Controlling Animation Duration 141 Animating with Show, Hide, and Toggle 142 Disabling All jQuery Animation 143 Part III: Manipulating Your Web Page 145 Chapter 8: Making Web Page Content Dynamic 147 Getting and Setting Text Content 147 Getting and Setting HTML Content 150 Getting and Setting Form Values 153 Inserting Content Inside Elements 156 Inserting Content Outside an Element 160 Moving Elements Around 161 Wrapping Content Around an Element 163 Chapter 9: Replacing, Removing, and Copying Web Page Elements 165 Replacing Elements 165 Removing Elements 169 Cloning Elements 173 Part IV: Using Plug-ins and Widgets 177 Chapter 10: Understanding Plug-ins 179 How jQuery Plug-ins Work 179 Getting jQuery Plug-ins 180 Testing Your First jQuery Plug-ins 182 Chapter 11: Playing with Image Effects 191 Creating a Lightbox with Colorbox 191 Creating an Image Gallery 199 Chapter 12: Jazzing Up Forms 203 Displaying Default Values 203 Validating Form Fields 206 Creating a Date Picker 209 Chapter 13: Toying with Page Layout 213 Creating an Accordion Menu 213 Paginating Content 218 Creating a Floating 220 Element 220 Chapter 14: Incorporating a User Interface 225 Using the jQuery User Interface 225 Choosing Custom Download Options 227 Using jQuery UI Widgets 235 Part V: Building AJAX Applications 239 Chapter 15: Understanding How AJAX Works with jQuery 241 Understanding AJAX 241 Loading Data with AJAX 242 Sending Data with AJAX 247 Chapter 16: Using AJAX Plug-ins 253 How AJAX jQuery Plug-ins Work 253 Using AJAX File Uploader 254 Rotating Dynamic Content 256 Creating AJAX Pop-Up Windows 260 Part VI: Integrating jQuery with Content Management Systems 265 Chapter 17: Cool Image Effects with jQuery and Drupal 267 Investigating Drupal Modules 267 Creating Image Effects in Drupal 274 Integrating jQuery in Drupal 277 Chapter 18: Integrating jQuery and Joomla! 281 Understanding How jQuery Works with Joomla! 281 Finding jQuery Extensions for Joomla! 287 Using jQuery Extensions with Joomla! 287 Chapter 19: Building Better Blogs with jQuery and WordPress 295 Making jQuery Work with WordPress 295 Finding WordPress jQuery-Based Plug-ins 299 Using the Colorbox jQuery Plug-in with WordPress 303 Part VII: The Part of Tens 305 Chapter 20: Ten Don’t-Miss Plug-ins 307 uploadify 307 jCarousel 310 qTip 311 jQuery pager 312 jQuery Flash 313 toggleElements 314 Coda-Slider 2.0 315 pagination 316 Humanized Messages for jQuery 317 Single Drop Down Menu 318 Chapter 21: Ten Design and Code Tricks 319 Detecting Browser Types 319 Animating a Background Image 321 Resizing Text 321 Disabling the Right-Click Menu 322 Loading jQuery from Google 323 Creating a Simple Slide Panel 324 Creating a Disappearing Effect 325 Using a jQuery Cheat Sheet 326 Making Elements Clickable 327 Streamlining document. ready Code 328 Chapter 22: Ten jQuery Resources 329 jQuery Web site 329 jQuery on Wikipedia 330 jQuery for Absolute Beginners Video Series 331 Visual jQuery 332 Use jQuery 333 jQuery Plug-ins 335 Smashing Magazine 336 Speckyboy Design Magazine 337 Nettuts+ 337 Woorkup 338 Index 341 jQuery For Dummies®......Page 1 About the Author......Page 7 Dedication......Page 9 Author’s Acknowledgments......Page 11 Contents at a Glance......Page 13 Table of Contents......Page 15 About This Book......Page 23 How This Book Is Organized......Page 24 Where to Go from Here......Page 26 Part I: Getting Started with jQuery......Page 27 Finding Out What jQuery Can Do for You......Page 29 Installing jQuery......Page 32 Creating Your First jQuery Code......Page 37 Understanding Elements......Page 43 Getting and Setting Element Values......Page 46 Changing HTML Content......Page 52 Changing Text Content......Page 54 Using jQuery Selectors......Page 57 Selecting from Forms......Page 68 Selecting Attributes......Page 69 Selecting Parents and Children......Page 70 Using jQuery When the Page Loads......Page 73 Handling Events......Page 74 Working with Interaction Helpers......Page 85 Part II: Affecting Elements with Effects......Page 91 Hiding Elements with jQuery......Page 93 Showing Elements with jQuery......Page 101 Toggling Visibility with jQuery......Page 105 Sliding Elements with jQuery......Page 113 Fading Elements with jQuery......Page 122 Understanding How jQuery Animation Works......Page 129 Animating Elements with jQuery......Page 133 Controlling Animation Duration......Page 141 Animating with Show, Hide, and Toggle......Page 142 Disabling All jQuery Animation......Page 143 Part III: Manipulating Your Web Page......Page 145 Getting and Setting Text Content......Page 147 Getting and Setting HTML Content......Page 150 Getting and Setting Form Values......Page 153 Inserting Content Inside Elements......Page 156 Inserting Content Outside an Element......Page 160 Moving Elements Around......Page 161 Wrapping Content Around an Element......Page 163 Replacing Elements......Page 165 Removing Elements......Page 169 Cloning Elements......Page 173 Part IV: Using Plug-ins and Widgets......Page 177 How jQuery Plug-ins Work......Page 179 Getting jQuery Plug-ins......Page 180 Testing Your First jQuery Plug-ins......Page 182 Creating a Lightbox with Colorbox......Page 191 Creating an Image Gallery......Page 199 Displaying Default Values......Page 203 Validating Form Fields......Page 206 Creating a Date Picker......Page 209 Creating an Accordion Menu......Page 213 Paginating Content......Page 218 Element......Page 220 Using the jQuery User Interface......Page 225 Choosing Custom Download Options......Page 227 Using jQuery UI Widgets......Page 235 Part V: Building AJAX Applications......Page 239 Understanding AJAX......Page 241 Loading Data with AJAX......Page 242 Sending Data with AJAX......Page 247 How AJAX jQuery Plug-ins Work......Page 253 Using AJAX File Uploader......Page 254 Rotating Dynamic Content......Page 256 Creating AJAX Pop-Up Windows......Page 260 Part VI: Integrating jQuery with Content Management Systems......Page 265 Investigating Drupal Modules......Page 267 Creating Image Effects in Drupal......Page 274 Integrating jQuery in Drupal......Page 277 Understanding How jQuery Works with Joomla!......Page 281 Using jQuery Extensions with Joomla!......Page 287 Making jQuery Work with WordPress......Page 295 Finding WordPress jQuery-Based Plug-ins......Page 299 Using the Colorbox jQuery Plug-in with WordPress......Page 303 Part VII: The Part of Tens......Page 305 uploadify......Page 307 jCarousel......Page 310 qTip......Page 311 jQuery pager......Page 312 jQuery Flash......Page 313 toggleElements......Page 314 Coda-Slider 2.0......Page 315 pagination......Page 316 Humanized Messages for jQuery......Page 317 Single Drop Down Menu......Page 318 Detecting Browser Types......Page 319 Resizing Text......Page 321 Disabling the Right-Click Menu......Page 322 Loading jQuery from Google......Page 323 Creating a Simple Slide Panel......Page 324 Creating a Disappearing Effect......Page 325 Using a jQuery Cheat Sheet......Page 326 Making Elements Clickable......Page 327 Streamlining document. ready Code......Page 328 jQuery Web site......Page 329 jQuery on Wikipedia......Page 330 jQuery for Absolute Beginners Video Series......Page 331 Visual jQuery......Page 332 Use jQuery......Page 333 jQuery Plug-ins......Page 335 Smashing Magazine......Page 336 Nettuts+......Page 337 Woorkup......Page 338 Index......Page 341 You don't need to be a Web programmer to jazz up your Web site with jQuery! Learn simple but compelling jQuery effects and cool prebuilt plug-ins for your site. You can gain the essential jQuery know-how to achieve great effects fast