Skip to content

Commit 8066c5f

Browse files
author
Rebecca Murphey
committed
Merge branch 'master' of github.com:jquery/web-learn-jquery-com
* 'master' of github.com:jquery/web-learn-jquery-com: Add Working-with-selections Working with selections and minor revisions to jquery-basics
2 parents c559e8b + efe8eb1 commit 8066c5f

File tree

3 files changed

+83
-8
lines changed

3 files changed

+83
-8
lines changed

content/jquery-fundamentals/jquery-basics/document-ready.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
chapter : "jqfundamentals"
3-
section : "1"
4-
title : "$(document).ready()"
2+
chapter : "jqfundamentals"
3+
section : "1"
4+
title : "$(document).ready()"
55
---
66
## $(document).ready()
77

content/jquery-fundamentals/jquery-basics/selecting-elements.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
---
2-
chapter : "js101"
3-
section: "2"
4-
title: "Operators"
2+
chapter : "jqfundamentals"
3+
section : "2"
4+
title : "Selecting Elements"
55
---
6-
## Basic Operators
7-
Selecting Elements
6+
## Selecting Elements
87

98
The most basic concept of jQuery is to “select some elements and do something with them.”
109
jQuery supports most CSS3 selectors, as well as some non-standard selectors.
Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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

Comments
 (0)