BEAR BIBEAULT
YEHUDA KATZ
FOREWORD by John Resig
MANNING
Greenwich
(74° w. long.)
Greenwich
(74° w. long.)
 |
| jQuery in Action |
Have you ever been surprised, or even bemused, by the seemingly endless list
of names that scrolls up the screen during the ending credits of a motion picture?
Do you ever wonder if it really takes that many people to make a movie?
Similarly, the number of people involved in the writing of book would probably be a big surprise to most people. It takes a large collaborative effort on the part of many contributors with a variety of talents to bring the volume you are holding (or ebook that you are reading onscreen) to fruition.
The staff at Manning worked tirelessly with us to make sure that this book attained the level of quality that we hoped for, and we thank them for their efforts. Without them, this book would not have been possible. The “end credits” for this book include not only our publisher, Marjan Bace, and editor Mike
Stephens, but also the following contributors: Douglas Pudnick, Andrea
Kaucher, Karen Tegtmayer, Katie Tenant, Megan Yockey, Dottie Marsico, Mary
Piergies, Tiffany Taylor, Denis Dalinnik, Gabriel Dobrescu, and Ron Tomich.
Enough cannot be said to thank our peer reviewers who helped mold the final form of the book, from catching simple typos to correcting errors in terminology and code and even helping to organize the chapters within the book. Each pass through a review cycle ended up vastly improving the final product. For taking the time to help review the book, we’d like to thank
Jonathan Bloomer, Valentin Crettaz, Denis Kurilenko, Rama Krishna Vavilala,
Philip Hallstrom, Jay Blanchard, Jeff Cunningham, Eric Pascarello, Josh
Heyer, Gregg Bolinger, Andrew Siemer, John Tyler, and Ted Goddard.
Very special thanks go to Valentin Crettaz who served as the book’s technical editor. In addition to checking each and every sample of example code in multiple environments, he also offered invaluable contributions to the technical accuracy of the text.
BEAR BIBEAULT
For this, my third published tome, the cast of characters I’d like to thank has a
long list of “usual suspects,” including, once again, the membership and staff at
javaranch.com. Without my involvement in JavaRanch, I’d never have gotten the
opportunity to start writing in the first place, and so I sincerely thank Paul
Wheaton and Kathy Sierra for starting the whole thing, as well as fellow staffers
who gave me encouragement and support, including (but probably not limited
to) Eric Pascarello, Ben Souther, Ernest Friedman Hill, Mark Herschberg, and Max Habbibi.
Thanks go out to Valentin Crettaz—not only for serving as technical editor but
also for introducing me to jQuery in the first place—and to my coworker Daniel
Hedrick who volunteered the PHP examples for the latter part of the book.
My partner Jay, and dogs, Little Bear (well, we couldn’t have named him just
Bear, now could we?) and Cozmo, get the usual warm thanks for putting up with
the shadowy presence who shared their home but who rarely looked up from the
MacBook Pro keyboard for all the months it took to write this book.
And finally I’d like to thank my coauthor, Yehuda Katz, without whom this
project would not have been possible.
YEHUDA KATZ
To start, I’d like to thank Bear Bibeault, my coauthor, for the benefit of his extensive
writing experience. His talented writing and impressive abilities to navigate
the hurdles of professional publishing were a tremendous part of what made this book possible.
While speaking of making things possible, it’s necessary that I thank my
lovely wife Leah, who put up with the long nights and working weekends for far
longer than I would have felt comfortable asking. Her dedication to completing
this book rivaled even my own; and, as in all things, she made the most difficult
part of this project bearable. I love you, Leah.
Obviously, there would be no jQuery in Action without the jQuery library itself.
I’d like to thank John Resig, the creator of jQuery, for changing the face of
client-side development and easing the burden of web developers across theglobe (believe it or not, we have sizable user groups in China, Japan, France, and
many other countries). I also count him as a friend who, as a talented author
himself, helped me to prepare for this tremendous undertaking.
There would be no jQuery without the incredible community of users and
core team members, including Brandon Aaron and Jörn Zaefferer on the development
team; Rey Bango and Karl Swedberg on the evangelism team; Paul
Bakaus, who heads up jQuery UI; and Klaus Hartl and Mike Alsup, who work on
the plugins team with me. This great group of programmers helped propel the
jQuery framework from a tight, simple base of core operations to a world-class
JavaScript library, complete with user-contributed (and modular) support for virtually
any need you could have. I’m probably missing a great number of jQuery
contributors; there are a lot of you guys. Suffice it to say that I would not be here
without the unique community that has come up around this library, and I can’t thank you enough.
Lastly, I want to thank my family whom I don’t see nearly enough since my
recent move across the country. Growing up, my siblings and I shared a tight
sense of camaraderie, and the faith my family members have in me has always
made me imagine I can do just about anything. Mommy, Nikki, Abie, and Yaakov:
thank you, and I love you.
about the authors
The information provided in this eBook is to be used for educational purposes only. The eBook creator is in no way responsible for any misuse of the information provided. All of the information in this eBook is meant to help the reader develop a hacker defense attitude in order to prevent the attacks discussed. In no way should you use the information to cause any kind of damage directly or indirectly. The word “Hack” or “Hacking” in this eBook should be regarded as “Ethical Hack” or “Ethical hacking” respectively.
You implement the information given at your own risk.
He works and resides in Austin, Texas, a city he dearly loves except for the completely insane drivers.
YEHUDA KATZ has been involved in a number of open-source projects over the past several years. In
addition to being a core team member of the jQuery project, he is also a contributor to Merb, an alternative to Ruby on Rails (also written in Ruby).
Yehuda was born in Minnesota, grew up in New
York, and now lives in sunny Santa Barbara, California.
He has worked on websites for the New York Times,
Allure Magazine, Architectural Digest, Yoga Journal, and other similarly high-profile clients. He has programmed professionally in a number of languages including Java, Ruby, PHP, and JavaScript.
In his copious spare time, he maintains VisualjQuery.com and helps answer questions from new jQuery users in the IRC channel and on the official jQuery mailing list.
about this book
Do more with less. Plain and simple, that is the purpose of this book: to help you learn how to do more on your web application pages with less script. Your authors, one a jQuery contributor and evangelist and the other an avid and enthusiastic user, believe that jQuery is the best library available today to help you do just that. This book is aimed at getting you up and running with jQuery quickly and effectively and, hopefully, having some fun along the way. The entire core jQuery API is discussed, and each API method is presented in an easy-to-digest syntax block that describes the parameters and return values of the method. Small examples of using the APIs effectively are included; and, for those big
concepts, we provide what we call lab pages. These comprehensive and fun pages are an excellent way for you to see the nuances of the jQuery methods in action without the need to write a slew of code yourself. All example code and lab pages are available for download at http://www.manning.com/bibeault.
We could go on and on with some marketing jargon telling you how great this book is, but you don’t want to waste time reading that, do you? What you really want is to get your arms into the bits and bytes up to your elbows, isn’t it? What’s holding you back? Read on!
Audience
This book is aimed at novice to advanced web developers who want to take control of the JavaScript on their pages and produce great, interactive Rich Internet
Applications without the need to write all the client-side code necessary to achieve such applications from scratch. All web developers who yearn to create usable web applications that delight,
rather than annoy, their users by leveraging the power that jQuery brings to them will benefit from this book. Although novice web developers may find some sections a tad involved, this
should not deter them from diving into this book. We’ve included an appendix
on essential JavaScript concepts that help in using jQuery to its fullest potential,
and such readers will find that the jQuery library itself is novice-friendly once
they understand a few key concepts—all without sacrificing the power available to the more advanced web developers. Whether novices or veterans of web development, client-side programmers
will benefit greatly from adding jQuery to their repertoire of development tools.
We know that the lessons within this book will help add this knowledge to your toolbox quickly.
Roadmap
This book is organized to help you wrap your head around jQuery in the quickest
and most efficient manner possible. It starts with an introduction to the
design philosophies on which jQuery was founded and quickly progresses to fundamental
concepts that govern the jQuery API. We then take you through the
various areas in which jQuery can help you write fabulous client-side code, from
the handling of events all the way to making Ajax requests to the server. To top it
all off, we take a survey of some of the most popular jQuery extensions.
In chapter 1, we’ll learn about the philosophy behind jQuery and how it
adheres to modern principles such as Unobtrusive JavaScript. We examine why
we might want to adopt jQuery and run through an overview of how it works, as
well as the major concepts such as document-ready handlers, utility functions,
Document Object Model (DOM) element creation, and how jQuery extensions are created.
Chapter 2 introduces us to the concept of the jQuery wrapped set—the core
concept around which jQuery operates. We’ll learn how this wrapped set—a collection
of DOM elements that’s to be operated upon—can be created by selecting
elements from the page document using the rich and powerful collection of jQuery selectors. We’ll see how these selectors, while powerful, leverage knowledge
that we already possess by using standard CSS notation.
In chapter 3, we’ll learn how to use the jQuery wrapped set to manipulate the
page DOM. We cover changing the styling and attributes of elements, setting element
content, moving elements around, and dealing with form elements.
Chapter 4 shows us how we can use jQuery to vastly simplify the handling of
events on our pages. After all, handling user events is what makes Rich Internet
Applications possible, and anyone who’s had to deal with the intricacies of event
handler across the differing browser implementations will certainly appreciate
the simplicity that jQuery brings to this particular area.
The world of animations and effects is the subject of chapter 5. We’ll see
how jQuery makes creating animated effects not only painless but also efficient and fun.
In chapter 6, we’ll learn about the utility functions and flags that jQuery provides,
not only for page authors, but also for those who will write extensions and plugins for jQuery.
We present writing such extensions and plugins in chapter 7. We’ll see how
jQuery makes it extraordinarily easy for anyone to write such extensions without
intricate JavaScript or jQuery knowledge and why it makes sense to write any
reusable code as a jQuery extension.
Chapter 8 concerns itself with one of the most important areas in the development
of Rich Internet Applications: making Ajax requests.
We’ll see how jQuery makes it almost brain-dead simple to use Ajax on our pages and how it
shields us from all the pitfalls that can accompany the introduction of Ajax to our
pages, while vastly simplifying the most common types of Ajax interactions (such as returning JSON constructs).
Finally, in chapter 9 we’ll take a survey of the most popular and powerful of
the vast multitude of jQuery plugins and make sure that we know where we can
find information on even more such plugins.We examine plugins that enable us
to deal with forms and Ajax submissions with even more power than core jQuery
and those that let us employ drag-and-drop on our pages.
We provide an appendix highlighting key JavaScript concepts such as function
contexts and closures—essential to making the most effective use of jQuery on our
pages—for those who would like a refresher on these concepts.
Code conventions
All source code in listings or in the text is in a fixed-width font like this to separate
it from ordinary text. Method and function names, properties, XML elements,
and attributes in the text are also presented in this same font.
In some cases, the original source code has been reformatted to fit on the
pages. In general, the original code was written with page-width limitations in
mind, but sometimes you may find a slight formatting difference between the
code in the listings and that provided in the source download. In a few rare
cases, where long lines could not be reformatted without changing their meaning,
the book listings will contain line-continuation markers.
Code annotations accompany many of the listings, highlighting important
concepts. In many cases, numbered bullets link to explanations that follow in the text.
Code downloads
Source code for all the working examples in this book (along with some extras that
never made it into the text) is available for download from http://www.manning.com/jQueryinAction or http://www.manning.com/bibeault.
The code examples for each chapter are organized to be easily served by a
local web server. Unzip the downloaded code into a folder of your choice, and
make that folder the document root of the application. A launch page is set up at
the application root in the file index.html.
With the exception of the examples for chapter 8 and a handful from chapter
9, most of the examples don’t require the presence of a web server and can be
loaded directly into a browser for execution. Instructions for easily setting up
Tomcat to use as the web server for these examples is provided in file chapter8/tomcat.pdf.
All examples were tested in a variety of browsers that include Internet
Explorer 7, Firefox 2, Opera 9, Safari 2, and Camino 1.5. The examples will also
generally run in Internet Explorer 6 although some layout issues might be
encountered. Note that all jQuery code works flawlessly in IE6—it’s the CSS of
the examples that cause any layout anomalies. Because the target audience of this
book is professional web developers, it’s assumed that all readers will have a variety
of browsers available in which to execute the example code.
Author Online
The purchase of jQuery in Action includes free access to a private forum run by
Manning Publications where you can make comments about the book, ask technical
questions, and receive help from the authors and other users. To access
and subscribe to the forum, point your browser to http://www.manning.com/jQueryinAction or http://www.manning.com/bibeault. This page provides information
on how to get on the forum once you are registered, what kind of help is
available, and the rules of conduct in the forum. (Play nice!)
Manning’s commitment to our readers is to provide a venue where a meaningful
dialogue between individual readers and between readers and the authors
can take place. It’s not a commitment to any specific amount of participation on
the part of the authors, whose contribution to the book’s forum remains voluntary
(and unpaid). We suggest you try asking the authors some challenging questions,
lest their interest stray!
The Author Online forum and the archives of previous discussions will be
accessible from the publisher’s website as long as the book is in print.
about the title
By combining introductions, overviews, and how-to examples, the In Action
books are designed to help learning and remembering. According to research
in cognitive science, the things people remember are things they discover during
self-motivated exploration.
Although no one at Manning is a cognitive scientist, we are convinced that
for learning to become permanent it must pass through stages of exploration,
play, and, interestingly, re-telling of what is being learned. People understand
and remember new things, which is to say they master them, only after
actively exploring them. Humans learn in action. An essential part of an In
Action book is that it is example-driven. It encourages the reader to try things
out, to play with new code, and explore new ideas.
There is another, more mundane, reason for the title of this book: Our
readers are busy. They use books to do a job or solve a problem. They need
books that allow them to jump in and jump out easily and learn just what they
want just when they want it. They need books that aid them in action. The
books in this series are designed for such readers.
about the cover illustration
The figure on the cover of jQuery in Action is called “The Watchman.” The
illustration is taken from a French travel book, Encyclopedie des Voyages by J. G.
St. Saveur, published in 1796. Travel for pleasure was a relatively new phenomenon
at the time and travel guides such as this one were popular, introducing
both the tourist as well as the armchair traveler to the inhabitants of
other regions of the world, as well as to the regional costumes and uniforms
of French soldiers, civil servants, tradesmen, merchants, and peasants.
The diversity of the drawings in the Encyclopedie des Voyages speaks vividly of
the uniqueness and individuality of the world’s towns and provinces just 200
years ago. This was a time when the dress codes of two regions separated by a
few dozen miles identified people uniquely as belonging to one or the other.
The travel guide brings to life a sense of isolation and distance of that period
and of every other historic period except our own hyperkinetic present.
Dress codes have changed since then and the diversity by region, so rich at
the time, has faded away. It is now often hard to tell the inhabitant of one continent
from another. Perhaps, trying to view it optimistically, we have traded a
cultural and visual diversity for a more varied personal life. Or a more varied
and interesting intellectual and technical life.
We at Manning celebrate the inventiveness, the initiative, and the fun of the
computer business with book covers based on the rich diversity of regional life
two centuries ago brought back to life by the pictures from this travel guide.
Screenshot
Purchase Now !
Just with Paypal
Just with Paypal
Product details
Price
|
|
|---|---|
File Size
| 21,782 KB |
Pages
|
377 p |
File Type
|
PDF format |
ISBN
| 1-933988-35-5 |
Copyright
| 2008 by Manning Publications Co |
Table of Contents
foreword xi
preface xiii
acknowledgments xvi
about this book xix
about the authors xxiv
about the title xxvi
about the cover illustration xxvii
1 Introducing jQuery
1.1 Why jQuery? 2
1.2 Unobtrusive JavaScript 3
1.3 jQuery fundamentals 5
The jQuery wrapper 6 ■ Utility functions 8 ■ The document
ready handler 9 ■ Making DOM elements 11 ■ Extending
jQuery 12 ■ Using jQuery with other libraries 14
1.4 Summary
2 Creating the wrapped element set 16
2.1 Selecting elements for manipulation 17
Using basic CSS selectors 19 ■ Using child, container, and
attribute selectors 20 ■ Selecting by position 24
Using custom jQuery selectors
2.2 Generating new HTML 31
2.3 Managing the wrapped element set 32
Determining the size of the wrapped set 34 ■ Obtaining elements
from the wrapped set 34 ■ Slicing and dicing the wrapped
element set 36 ■ Getting wrapped sets using relationships 43
Even more ways to use a wrapped set 44 ■ Managing jQuery chains 46
2.4 Summary
3 Bringing pages to life with jQuery 48
3.1 Manipulating element properties and attributes 49
Manipulating element properties 51 ■ Fetching attribute
values 52 ■ Setting attribute values 54 ■ Removing
attributes 56 ■ Fun with attributes 56
3.2 Changing element styling 58
Adding and removing class names 58 ■ Getting and
setting styles 61 ■ More useful style-related commands 67
3.3 Setting element content
Replacing HTML or text content 68 ■ Moving and
copying elements 70 ■ Wrapping elements 75
Removing elements 76 ■ Cloning elements 78
3.4 Dealing with form element values
3.5 Summary 81
4 Events are where it happens! 82
4.1 Understanding the browser event models 84
The DOM Level 0 Event Model 85 ■ The DOM
Level 2 Event Model 91 ■ The Internet Explorer
Event Model 97
4.2 The jQuery Event Model 98
Binding event handlers using jQuery 98 ■ Removing event
handlers 103 ■ Inspecting the Event instance 104
Affecting the event propagation 106 ■ Triggering event
handlers 106 ■ Other event-related commands 107
4.3 Putting events (and more) to work
4.4 Summary 124
5 Sprucing up with animations and effects 126
5.1 Showing and hiding elements 127
Implementing a collapsible list 128 ■ Toggling the display
state of elements 134
5.2 Animating the display state of elements 135
Showing and hiding elements gradually 135 ■ Fading elements
into and out of existence 140 ■ Sliding elements up and
down 143 ■ Stopping animations 145
5.3 Creating custom animations 145
A custom scale animation 148 ■ A custom drop animation 148
A custom puff animation
5.4 Summary 152
6 jQuery utility functions 153
6.1 Using the jQuery flags 154
Detecting the user agent 155 ■ Determining the box model 161
Detecting the correct float style to use 163
6.2 Using other libraries with jQuery 163
6.3 Manipulating JavaScript objects and collections 167
Trimming strings 168 ■ Iterating through properties
and collections 169 ■ Filtering arrays 170
Translating arrays 172 ■ More fun with
JavaScript arrays 175 ■ Extending objects 176
6.4 Dynamically loading scripts
6.5 Summary 184
7 Extending jQuery with custom plugins 185
7.1 Why extend? 186
7.2 The jQuery plugin authoring guidelines 187
Naming files and functions 187 ■ Beware the $ 189
Taming complex parameter lists
7.3 Writing custom utility functions 192
Creating a data manipulation utility function
Writing a date formatter
7.4 Adding new wrapper methods 199
Applying multiple operations in a wrapper method 201
Retaining state within a wrapper method 206
7.5 Summary 216
8 Talk to the server with Ajax 217
8.1 Brushing up on Ajax 218
Creating an XHR instance 219 ■ Initiating the request 221
Keeping track of progress 222 ■ Getting the response 223
8.2 Loading content into elements 224
Loading content with jQuery 226 ■ Loading dynamic inventory data 229
8.3 Making GET and POST requests 233
Getting data with jQuery 234 ■ Getting JSON data 236
Making POST requests
8.4 Taking full control of an Ajax request 249
Making Ajax requests with all the trimmings
Setting request defaults 252 ■ Global functions 253
8.5 Putting it all together 258
Implementing the flyout behavior 259 ■ Using The
Termifier 262 ■ Room for improvement 264
8.6 Summary 266
9 Prominent, powerful, and practical plugins 268
9.1 The Form Plugin 269
Getting form control values 270 ■ Clearing and resetting
form controls 274 ■ Submitting forms through Ajax 276
Uploading files
9.2 The Dimensions Plugin 285
Extended width and height methods 285 ■ Getting scroll
dimensions 287 ■ Of offsets and positions 289
9.3 The Live Query Plugin 292
Establishing proactive event handlers 292 ■ Defining match and
mismatch listeners 294 ■ Forcing Live Query evaluation 294
Expiring Live Query listeners
9.4 Introduction to the UI Plugin 299
Mouse interactions 300 ■ UI widgets and visual effects 316
9.5 Summary 316
9.6 The end? 317
appendix JavaScript that you need to know but might not! 319
index 339
●▬▬▬▬▬❂❂❂▬▬▬▬▬●
●▬▬❂❂▬▬●
●▬❂▬●
●❂●
═════● ●═════
