|
| 1 | +--- |
| 2 | +chapter : "jqfundamentals" |
| 3 | +section : "3" |
| 4 | +title : "Working with Selections" |
| 5 | +--- |
| 6 | +## Working with Selections |
| 7 | + |
| 8 | +Once you have a selection, you can call methods on the selection. |
| 9 | +Methods generally come in two different flavors: getters and setters. |
| 10 | +Getters return a property of the first selected element; setters set a property on all selected elements. |
| 11 | + |
| 12 | +### Chaining |
| 13 | + |
| 14 | +If you call a method on a selection and that method returns a jQuery object, |
| 15 | +you can continue to call jQuery methods on the object without pausing for a semicolon. |
| 16 | + |
| 17 | +<div class="example" markdown="1"> |
| 18 | +Chaining |
| 19 | + |
| 20 | + $('#content').find('h3').eq(2).html('new text for the third h3!'); |
| 21 | +</div> |
| 22 | + |
| 23 | +If you are writing a chain that includes several steps, you (and the person who comes after you) may find your code more readable if you break the chain over several lines. |
| 24 | + |
| 25 | +<div class="example" markdown="1"> |
| 26 | +Formatting chained code |
| 27 | + |
| 28 | + $('#content') |
| 29 | + .find('h3') |
| 30 | + .eq(2) |
| 31 | + .html('new text for the third h3!'); |
| 32 | +</div> |
| 33 | + |
| 34 | +If you change your selection in the midst of a chain, jQuery provides the $.fn.end method to get you back to your original selection. |
| 35 | + |
| 36 | +<div class="example" markdown="1"> |
| 37 | +Restoring your original selection using $.fn.end |
| 38 | + |
| 39 | + $('#content') |
| 40 | + .find('h3') |
| 41 | + .eq(2) |
| 42 | + .html('new text for the third h3!') |
| 43 | + .end() // restores the selection to all h3's in #content |
| 44 | + .eq(0) |
| 45 | + .html('new text for the first h3!'); |
| 46 | +</div> |
| 47 | + |
| 48 | +<div class="note" markdown="1"> |
| 49 | +### Note |
| 50 | + |
| 51 | +Chaining is extraordinarily powerful, and it's a feature that many libraries have adapted since it was made popular by jQuery. |
| 52 | +However, it must be used with care. Extensive chaining can make code extremely difficult to modify or debug. |
| 53 | +There is no hard-and-fast rule to how long a chain should be — just know that it is easy to get carried away. |
| 54 | +</div> |
| 55 | + |
| 56 | +### Getters & Setters |
| 57 | + |
| 58 | +jQuery “overloads” its methods, so the method used to set a value generally has the same name as the method used to get a value. |
| 59 | +When a method is used to set a value, it is called a setter. |
| 60 | +When a method is used to get (or read) a value, it is called a getter. |
| 61 | +Setters affect all elements in a selection; getters get the requested value only for the first element in the selection. |
| 62 | + |
| 63 | +<div class="example" markdown="1"> |
| 64 | +The $.fn.html method used as a setter |
| 65 | + |
| 66 | + $('h1').html('hello world'); |
| 67 | +</div> |
| 68 | + |
| 69 | +<div class="example" markdown="1"> |
| 70 | +The html method used as a getter |
| 71 | + |
| 72 | + $('h1').html(); |
| 73 | +</div> |
| 74 | + |
| 75 | +Setters return a jQuery object, allowing you to continue to call jQuery methods on your selection; |
| 76 | +getters return whatever they were asked to get, meaning you cannot continue to call jQuery methods on the value returned by the getter. |
0 commit comments