[ETC] JQ - eq() vs. get() 메서드 차이

jQuery 경우, 기본적으로 '확장집합' 형태의 Array (배열) 반환.

예외적으로, get() 메서드처럼 DOM element 반환하는 경우 有.

eq() vs. get() 예제

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<ul>

    <li id='a'>A</li>

    <li id='b'>B</li>

</ul>

 

<script> 

// alert($("li").eq(0)); // [object Object]

// alert($("li").eq(0)[0]); // [object HTMLLIElement]

// alert($("li").get(0)); // [object HTMLLIElement]

// alert($("li")[0]); // [object HTMLLIElement]

 

// console.log($("li").eq(0)); // jQuery 객체 반환. jQuery로 조작. 아래 참고

// console.log($("li").eq(0)[0]); // DOM 반환. JS로 조작. 아래 참고

// console.log($("li").get(0)); // DOM 반환. JS로 조작. 아래 참고

// console.log($("li")[0]); // DOM 반환. JS로 조작. 아래 참고

 

$("li").eq(0).hide(); // 작동 O

// $("li").get(0).hide(); // 작동 X

</script>

 

결과보기

PS.

각 반환값 차이

console.log($("li").eq(0)); 경우, jQuery 확장집합 반환. (∴ jQuery 다른 메서드와 함께 사용 O).

 

jQuery.fn.init [li#a, prevObject: jQuery.fn.init(2), context: document]

0: li#a

context: document

length: 1

prevObject: jQuery.fn.init(2) [li#a, li#b, prevObject: jQuery.fn.init(1), context: document, selector: "li"]

__proto__: Object(0)

 

---

console.log($("li").eq(0)[0]); 경우, DOM element 반환. (∴ jQuery 다른 메서드와 함께 사용 X).

 

<li id='a'>A</li>

 

---

console.log($("li").get(0)); 경우, DOM element 반환. (∴ jQuery 다른 메서드와 함께 사용 X).

 

<li id='a'>A</li>

 

---

console.log($("li")[0]); 경우, DOM element 반환. (∴ jQuery 다른 메서드와 함께 사용 X).

 

<li id='a'>A</li> 

 

※ $("li").eq(0)[0] == $("li").get(0) == $("li")[0]  : 셋 모두 DOM 요소 반환.

※ DOM 요소로 반환하는 경우, jQuery 메서드로는 조작 불가. (즉, JS로 조작함.)