You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: page/using-jquery-core/jquery-object.md
+11-11Lines changed: 11 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -66,48 +66,48 @@ When the jQuery function is invoked with a CSS selector, it will return a jQuery
66
66
```
67
67
// Selecting all <h1> tags.
68
68
69
-
var headers = $( "h1" );
69
+
var headings = $( "h1" );
70
70
```
71
71
72
-
`headers` is now a jQuery element containing *all* the `<h1>` tags already on the page. This can be verified by inspecting the `.length` property of `headers`:
72
+
`headings` is now a jQuery element containing *all* the `<h1>` tags already on the page. This can be verified by inspecting the `.length` property of `headings`:
73
73
74
74
```
75
75
// Viewing the number of <h1> tags on the page.
76
76
77
-
var allHeaders = $( "h1" );
77
+
var allHeadings = $( "h1" );
78
78
79
-
alert( allHeaders.length );
79
+
alert( allHeadings.length );
80
80
```
81
81
82
82
If the page has more than one `<h1>` tag, this number will be greater than one. If the page has no `<h1>` tags, the `.length` property will be zero. Checking the `.length` property is a common way to ensure that the selector successfully matched one or more elements.
83
83
84
-
If the goal is to select only the first header element, another step is required. There are a number of ways to accomplish this, but the most straight-forward is the `.eq()` function.
84
+
If the goal is to select only the first heading element, another step is required. There are a number of ways to accomplish this, but the most straight-forward is the `.eq()` function.
85
85
86
86
```
87
87
// Selecting only the first <h1> element on the page (in a jQuery object)
88
88
89
-
var headers = $( "h1" );
89
+
var headings = $( "h1" );
90
90
91
-
var firstHeader = headers.eq( 0 );
91
+
var firstHeading = headings.eq( 0 );
92
92
```
93
93
94
-
Now `firstHeader` is a jQuery object containing only the first `<h1>` element on the page. And because `firstHeader` is a jQuery object, it has useful methods like `.html()` and `.after()`. jQuery also has a method named `.get()` which provides a related function. Instead of returning a jQuery-wrapped DOM element, it returns the DOM element itself.
94
+
Now `firstHeading` is a jQuery object containing only the first `<h1>` element on the page. And because `firstHeading` is a jQuery object, it has useful methods like `.html()` and `.after()`. jQuery also has a method named `.get()` which provides a related function. Instead of returning a jQuery-wrapped DOM element, it returns the DOM element itself.
95
95
96
96
```
97
97
// Selecting only the first <h1> element on the page.
98
98
99
-
var firstHeaderElem = $( "h1" ).get( 0 );
99
+
var firstHeadingElem = $( "h1" ).get( 0 );
100
100
```
101
101
102
102
Alternatively, because the jQuery object is "array-like," it supports array subscripting via brackets:
103
103
104
104
```
105
105
// Selecting only the first <h1> element on the page (alternate approach).
106
106
107
-
var firstHeaderElem = $( "h1" )[ 0 ];
107
+
var firstHeadingElem = $( "h1" )[ 0 ];
108
108
```
109
109
110
-
In either case, `firstHeaderElem` contains the native DOM element. This means it has DOM properties like `.innerHTML` and methods like `.appendChild()`, but *not* jQuery methods like `.html()` or `.after()`. The `firstHeaderElem` element is more difficult to work with, but there are certain instances that require it. One such instance is making comparisons.
110
+
In either case, `firstHeadingElem` contains the native DOM element. This means it has DOM properties like `.innerHTML` and methods like `.appendChild()`, but *not* jQuery methods like `.html()` or `.after()`. The `firstHeadingElem` element is more difficult to work with, but there are certain instances that require it. One such instance is making comparisons.
0 commit comments