jQuery Cookbook - Cdn.oreilly.com - O'Reilly

More documents

Recommendations

Info

What You’ll Learn We’ll start out by covering the basics and general best practices—including jQuery in your page, making selections, and traversing and manipulation. Even frequent jQuery users are likely to pick up a tip or two. From there, we move on to real-world use cases, walking you through tried-and-true (and tested) solutions to frequent problems involving events, effects, dimensions, forms, and user interface elements (with and without the help of jQuery UI). At the end, we’ll take a look at testing your jQuery applications and integrating jQuery into complex sites. Along the way, you’ll learn strategies for leveraging jQuery to solve problems that go far beyond the basics. We’ll explore how to make the most of jQuery’s event management system, including custom events and custom event data; how to progressively enhance forms; how to position and reposition elements on the page; how to create user interface elements such as tabs, accordions, and modals from scratch; how to craft your code for readability and maintainability; how to optimize your code to ease testing, eliminate bottlenecks, and ensure peak performance; and more. Because this is a cookbook and not a manual, you’re of course welcome to cherry-pick the recipes you read; the individual recipes alone are worth the price of admission. As a whole, though, the book provides a rare glimpse into the problem-solving approaches of some of the best and brightest in the jQuery community. With that in mind, we encourage you to at least skim it from front to back—you never know which line of code will provide the “Aha!” moment you need to take your skills to the next level. jQuery Style and Conventions jQuery places a heavy emphasis on chaining—calling methods on element selections in sequence, confident in the knowledge that each method will give you back a selection of elements you can continue to work with. This pattern is explained in depth in Chapter 1—if you’re new to the library, you’ll want to understand this concept, because it is used heavily in subsequent chapters. jQuery’s features are organized into a handful of simple categories: core functionality, selecting, manipulating, traversing, CSS, attributes, events, effects, Ajax, and utilities. Learning these categories, and how methods fit into them, will greatly enhance your understanding of the material in this book. One of the best practices this book will cover is the concept of storing element selections in a variable, rather than making the same selection repeatedly. When a selection is stored in a variable, it is commonplace for that variable to begin with the $ character, indicating that it is a jQuery object. This can make code easier to read and maintain, but it should be understood that starting the variable name with the $ character is merely a convention; it carries no special meaning, unlike in other languages such as PHP. xviii | Preface
In general, the code examples in this book strive for clarity and readability over compactness, so the examples may be more verbose than is strictly necessary. If you see an opportunity for optimization, you should not hesitate to take it. At the same time, you’ll do well to strive for clarity and readability in your own code and use minification tools to prepare your code for production use. Other Options If you’re looking for other jQuery resources, here are some we recommend: • Learning jQuery 1.3, by Jonathan Chaffer, Karl Swedberg, and John Resig (Packt) • jQuery in Action, by Bear Bibeault, Yehuda Katz, and John Resig (Manning) • jQuery UI 1.6: The User Interface Library for jQuery, by Dan Wellman (Packt) If You Have Problems Making Examples Work Before you check anything else, ensure that you are loading the jQuery library on the page—you’d be surprised how many times this is the solution to the “It’s not working!” problem. If you are using jQuery with another JavaScript library, you may need to use jQuery.noConflict() to make it play well with others. If you’re loading scripts that require the presence of jQuery, make sure you are loading them after you’ve loaded the jQuery library. Much of the code in this book requires the document to be “ready” before JavaScript can interact with it. If you’ve included code in the head of the document, make sure your code is enclosed in $(document).ready(function() { ... }); so that it knows to wait until the document is ready for interaction. Some of the features discussed in this book are available only in jQuery 1.3 and later. If you are upgrading from an older version of jQuery, make sure you’ve upgraded any plugins you’re using as well—outdated plugins can lead to unpredictable behavior. If you’re having difficulty getting an example to work in an existing application, make sure you can get the example working on its own before trying to integrate it with your existing code. If that works, tools such as Firebug for the Firefox browser can be useful in identifying the source of the problem. If you’re including a minified version of jQuery and running into errors that point to the jQuery library itself, you may want to consider switching to the full version of jQuery while you are debugging the issue. You’ll have a much easier time locating the line that is causing you trouble, which will often lead you in the direction of a solution. If you’re still stuck, consider posting your question to the jQuery Google group. Many of this book’s authors are regular participants in the group, and more often than not, someone in the group will be able to offer useful advice. The #jquery IRC channel on Freenode is another valuable resource for troubleshooting issues. Preface | xix
Page 1 and 2: Solutions & Examples for jQuery Dev
Page 3: jQuery Cookbook
Page 6 and 7: jQuery Cookbook by jQuery Community
Page 8 and 9: 2.3 Selecting Elements by Index Ord
Page 10 and 11: 8.5 Passing Dynamic Data to Event H
Page 12 and 13: 16.5 Using HTML Fragments and jQuer
Page 14 and 15: This is largely what makes somethin
Page 16 and 17: on client-side optimization techniq
Page 18 and 19: Tech Editors Karl Swedberg, after h
Page 22 and 23: If none of this works, it’s possi
Page 24 and 25: 800-998-9938 (in the United States
Page 26 and 27: traversing and manipulation, browse
Page 28 and 29: • Using the jQuery wrapper and im
Page 30 and 31: The jQuery wrapper set A good major
Page 32 and 33: — Attr — Class — HTML — Tex
Page 34 and 35: alert('jQuery ' + jQuery.fn.jquery)
Page 36 and 37: alert(jQuery('p').text()); }); T
Page 38 and 39: You should be aware that the first
Page 40 and 41: "4 inputs" alert('selected' + jQuer
Page 42 and 43: 1.6 Finding Descendant Elements Wit
Page 44 and 45: .end().end().length); //alerts 3
Page 46 and 47: Now, let’s select the second ele
Page 48 and 49: jQuery('jQuery').find('a').attr('hr
Page 50 and 51: • While the elements selected are
Page 52 and 53: Discussion The cloning method is ac
Page 54 and 55: method by passing the method the at
Page 56 and 57: jQuery('p').text('Hello World,
Page 59 and 60: 2.0 Introduction CHAPTER 2 Selectin
Page 61 and 62: It’s worth noting that combinator
Page 63 and 64: all siblings that follow, not just
Page 65 and 66: Discussion As mentioned, an element
Page 67 and 68: 2.6 Selecting Elements by What They
Page 69 and 70: The preceding selector would select
Page 71 and 72:
These filters can also be used with
Page 73 and 74:
Solution As well as passing a selec
Page 75:
The purpose of the selector would b
Page 78 and 79:
alert(urls.join(",")); We were able
Page 80 and 81:
Even though this may be the most ob
Page 82 and 83:
Figure 3-2. Code output As you can
Page 84 and 85:
Chapter 3 - Recipe 3 - Converting a
Page 86 and 87:
Figure 3-4. Code output 3.4 Getting
Page 88 and 89:
Discussion The core method index()
Page 90 and 91:
Figure 3-6. Code output In the prec
Page 92 and 93:
ligula. Aenean mattis pulvinar est
Page 94 and 95:
Solution Let’s say you inherit a
Page 96 and 97:
If you use this technique, you will
Page 98 and 99:
available on the Web. jQuery hosts
Page 100 and 101:
Discussion In the preceding example
Page 102 and 103:
.click(function() { // Special clic
Page 104 and 105:
}); })(jQuery); 4.3 Filtering Array
Page 106 and 107:
Discussion In this example, we have
Page 108 and 109:
}); }); })(jQuery); Discussion Upon
Page 110 and 111:
Discussion In this recipe, we use t
Page 112 and 113:
Solution The if/else statement and
Page 114 and 115:
var foo = new Foo( 'bar' ); foo.ale
Page 116 and 117:
} $('#province').toggle( value == '
Page 118 and 119:
Did jQuery invent chaining? No. jQu
Page 120 and 121:
Whether the idea comes from elsewhe
Page 122 and 123:
}; return object; That could also b
Page 124 and 125:
null or undefined, remove the attri
Page 126 and 127:
The +new Date in this code is just
Page 128 and 129:
(function() { var log = [], index =
Page 130 and 131:
The page also contains a large numb
Page 132 and 133:
you could use this: $('.clientX') /
Page 134 and 135:
And you have this HTML code in your
Page 136 and 137:
when you discover the slow parts, y
Page 138 and 139:
A Warning About for..in Loops Never
Page 140 and 141:
Other code here calls maxMagnitude
Page 142 and 143:
matter, but in performance-critical
Page 144 and 145:
console.log( $foo ); $foo.css({ fon
Page 146 and 147:
Solution 1 You’re using the minif
Page 148 and 149:
After the page loads, you are down
Page 150 and 151:
5.19 Writing Unobtrusive JavaScript
Page 152 and 153:
Documentation Tutorials We’ve
Page 154 and 155:
Beware that you don’t make the us
Page 156 and 157:
+ $(document).scrollLeft() }) .show
Page 158:
Want to read more? You can find thi
show all

jQuery Cookbook - Cdn.oreilly.com - O'Reilly

Create successful ePaper yourself

Delete template?

Save as template?