정리jQuery

jQuery API get 메서드

get, jQuery

get() 메서드

jQuery 객체와 일치하는 DOM 요소를 가져온다.

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 ) );

index는 0을 기준으로 첫번째 리스트의 item을 반환한다.

1
위의 ul 리스트에서는 <li id="foo"> 가 반환된다.

또한 각각의 jQuery 객체는 배열로 위장하고 있다.. 이말이 뭔 즉슨 jQuery 객체에는 조회된 엘리먼트가 담겨있는데 jQuery 객체는 자바스크립트 일종의 유사배열의 형태로 조회된 엘리먼트를 가지고 있기 때문에 배열의 형태로 아이템을 가지고 올 수 있다.

1
2
3
console.log( $( "li" )[ 0 ] );
//그러나 이런 구문에서는 음수 인덱스 지정과 같은 .get ()의 추가 기능이 없다.
console.log($("li")[-1]); // 이런건 안됨!!!!!

get() 메서드는 음수 인덱스를 지정해 줄수 일치하는 요소의 끝에서 부터 계산된다.

1
console.log( $( "li" ).get( -1 ) );
1
2
//이렇게 하면 아래와 같이 반환된다.
<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.jquery.com/jquery-1.10.2.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 ).click(function( event ) {
  event.stopPropagation();
  var domElement = $( this ).get( 0 );
  $( "span:first" ).text( "Clicked on - " + domElement.nodeName );
});
</script>

</body>
</html>

argument가 없는 get() 메서드

.get()

  • This method does not accept any arguments.

바로 확인해보자

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

index값이 없이 .get() 메서드를 사용하면 배열 형태로 모든 요소가 반환된다.

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

결과는 일치하는 모든 DOM 노드들이 표준 배열을 포함하는 형태로 반환된다. 아래와 같이!!

1
[<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.jquery.com/jquery-1.10.2.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>
Share