Who Should Read This Book
If you’re a front-end web designer looking to add a dash of cool interactivity to your sites, and you’ve heard all the buzz surrounding jQuery and want to find out what the fuss is about, this book will put you on the right track. If you’ve dabbled with
JavaScript, but have been frustrated by the complexity of many seemingly simple tasks, we’ll show you how jQuery can help out. Even if you’re familiar with the basics of jQuery, but want to take your skills to the next level, you’ll find a wealth of good coding advice and in-depth knowledge.
You should already have intermediate to advanced HTML and CSS skills, as jQuery uses CSS-style selectors to zero in on page elements. Some rudimentary programming knowledge will be helpful to have, as jQuery—despite its clever abstractions—is
still based on JavaScript. That said, we’ve tried to explain any JavaScript concepts as we use them, so with a little willingness to learn you’ll do fine.
What’s in This Book
By the end of this book, you’ll be able to take your static HTML and CSS web pages and bring them to life with a bit of jQuery magic. You’ll learn how to select elements on the page, move them around, remove them entirely, add new ones with Ajax,
animate them … in short, you’ll be able to bend HTML and CSS to your will! We also cover the powerful functionality of the jQuery UI library and investigate the recently released jQuery Mobile framework.
This book comprises the following nine chapters and three appendices. Read them in order from beginning to end to gain a complete understanding of the subject, or skip around if you only need a refresher on a particular topic.
Chapter 1: Falling in Love with jQuery
Before we dive into learning all the ins and outs of jQuery, we’ll have a quick look at why you’d want to use it in the first place: why it’s better than writing your own JavaScript, and why it’s better than the other JavaScript libraries out there. We’ll brush up on some CSS concepts that are key to understanding jQuery, and briefly touch on the basic syntax required to call jQuery into action.
Chapter 2: Selecting, Decorating, and Enhancing
Ostensibly, jQuery’s most significant advantage over plain JavaScript is the ease with which it lets you select elements on the page to play with. We’ll start off this chapter by teaching you how to use jQuery’s selectors to zero in on your target elements, and then we’ll look at how you can use jQuery to alter those
elements’ CSS properties.
Chapter 3: Animating, Scrolling, and Resizing
jQuery excels at animation: whether you’d like to gently slide open a menu or send a dialog whizzing across the screen, jQuery can help you out. In this chapter, we’ll explore jQuery’s wide range of animation helpers, and put them into practice by enhancing a few simple user interface components. We’ll also
have a quick look at some animation-like helpers for scrolling the page and making elements resizable.
Chapter 4: Images and Slideshows
With the basics well and truly under our belts, we’ll turn to build some of the most common jQuery widgets out there: image galleries and slideshows. We’ll learn how to build lightbox displays, scrolling thumbnail galleries, and cross-fading galleries, and even take a stab at an iPhoto-style flip-book.
Chapter 5: Menus, Tabs, Tooltips, and Panels
Now that we’re comfortable with building cool UI widgets with jQuery, we’ll dive into some slightly more sophisticated controls: drop-down and accordion-style menus, tabbed interfaces, tooltips, and various types of content panels. We’re really on a roll now: our sites are looking less and less like the brochurestyle pages of the 1990s, and more and more like the Rich Internet Applications of the 21st century!
Chapter 6: Construction, Ajax, and Interactivity
This is the one you’ve all been waiting for: Ajax! In order to make truly desktopstyle applications on the Web, you need to be able to pass data back and forth to and from the server without any of those pesky refreshes clearing your interface from the screen—and that’s what Ajax is all about. jQuery includes a raft
of convenient methods for handling Ajax requests in a simple, cross-browser manner, letting you leave work with a smile on your face. But before we get too carried away, our code is growing more complex, so we’d better take a look at some best practices for organizing it.
Chapter 7: Forms, Controls, and Dialogs
The bane of every designer, forms are nonetheless the cornerstone of any web application. In this chapter, we’ll learn what jQuery has to offer us in terms of simplifying our form-related scripting. We’ll learn how to validate forms on the fly, offer assistance to our users, and manipulate checkboxes, radio buttons, and select lists with ease. Then we’ll have a look at some less conventional ways of allowing a site’s users to interact with it: a variety of advanced controls like date pickers, sliders, and drag and drop. We’ll round it off with a look at modal dialogs in the post-popup world, as well as a few original nonmodal notification styles. What a chapter!
Chapter 8: Lists, Trees, and Tables
No matter how “Web 2.0” your application may be, chances are you’ll still need to fall back on the everyday list, the humdrum tree, or even theoft-derided table to present information to your users. This chapter will show how jQuery can make even the boring stuff fun, as we’ll learn how to transform lists into dynamic, sortable data, and tables into data grids with sophisticated functionality.
Chapter 9: Plugins, Themes, and Advanced Topics
jQueryis more than just cool DOM manipulation, easy Ajax requests, and funky UI components. It has a wealth of functionality aimed at the more ninja-level developer: a fantastic plugin architecture, a highly extensible and flexible core, customizable events, and a whole lot more. In this chapter, we’ll cover the jQuery UI theme system, which lets you easily tailor the appearance of jQuery UI widgets to suit your site, and even make your own plugins skinnable with themes. We’ll also take a look at using the brand new jQuery Mobile framework so that you can deploy your ninja skills on handheld devices.
Appendix A: Reference Material
jQuery is a library that aims for flexibility, with many options for usage across a range of applications. Whether it’s mastering Ajax, underpinning broad browser support, or handling all kinds of events, there’s a range of core functions and plugins to suit any developer’s needs.
Appendix B: JavaScript Tidbits
Okay, so we know jQuery is really just JavaScript underneath the hood, and here’s where you’ll get a crash course in vanilla JavaScript. It pays to know the mechanics of the jQuery library, and here we’ll cover the basics. Feel free to go off on your own JavaScript tangent after reading this appendix.
Appendix C: Plugin Helpers
When it comes to developing your own plugin, there’s an arsenal of actions and properties that will make building your project simpler and more fun. From the jQuery stack to minifying your files, we’ll take a quick look at them here.
Take the jQuery Quiz
Now that you’ve reached the end of the book, put your jQuery ninja skills to the test with our simple online quiz. We’ve created a series of multiple choice questions based on the book’s content that you can use to assess your learning. The quiz is on the SitePoint website at http://www.sitepoint.com/quiz-jquery.
You can also get this PDF by using our Android Mobile App directly: 
