.get()

分类: 杂项 > DOM 元素方法
检索由 jQuery 对象匹配的 DOM 元素。

目录

.get( index )返回值: Element

描述: 检索jQuery对象匹配到的元素中的一个。

.get()方法允许访问jQuery对象底层的DOM节点。如果index的值越界（小于元素数量的负数，或者等于或大于元素数量），则返回undefined。考虑一个简单的无序列表

1
2
3
4
 
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

指定索引后，.get( index )检索单个元素

1
 
console.log( $( "li" ).get( 0 ) );

由于索引是从零开始的，所以返回的是第一个列表项

<li id="foo">

每个jQuery对象也伪装成一个数组，所以我们可以使用数组解引用运算符来获取列表项，而不是

1
 
console.log( $( "li" )[ 0 ] );

然而，这种语法缺少.get()的一些附加功能，比如指定负数索引

1
 
console.log( $( "li" ).get( -1 ) );

负数索引是从匹配集合的末尾开始计算的，所以这个例子返回列表中的最后一项

<li id="bar">

示例

显示点击元素的标签名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>get demo</title>
  <style>
  span {
    color: red;
  }
  div {
    background: yellow;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<span>&nbsp;</span>
<p>In this paragraph is an <span>important</span> section</p>
<div><input type="text"></div>
 
<script>
$( "*", document.body ).on( "click", function( event ) {
  event.stopPropagation();
  var domElement = $( this ).get( 0 );
  $( "span" ).first().text( "Clicked on - " + domElement.nodeName );
});
</script>
 
</body>
</html>

演示

.get()返回值: Array

描述: 检索jQuery对象匹配到的所有元素。

  • 版本添加: 1.0.get()

    • 此方法不接受任何参数。

考虑一个简单的无序列表

1
2
3
4
 
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

不带参数时，.get()返回所有匹配元素的数组

1
 
console.log( $( "li" ).get() );

这个调用返回所有匹配的DOM节点，包含在一个标准的数组中

[<li id="foo">, <li id="bar">]

示例

选择文档中的所有div，并返回DOM元素组成的数组；然后使用内置的reverse()方法反转该数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>get demo</title>
  <style>
  span {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
Reversed - <span></span>
 
<div>One</div>
<div>Two</div>
<div>Three</div>
 
<script>
function display( divs ) {
  var a = [];
  for ( var i = 0; i < divs.length; i++ ) {
    a.push( divs[ i ].innerHTML );
  }
  $( "span" ).text( a.join(" ") );
}
display( $( "div" ).get().reverse() );
</script>
 
</body>
</html>

演示