jquery에서 ID를 캐싱 할 때 인덱스 0을 사용하는 이유는 무엇입니까?

Question

아래 코드에서 인덱스가 0 인 이유는 무엇입니까?

var $one = $('#one')[0]; 

var $one = $('#one');을 사용하지 않는 이유는 무엇입니까? $('#one') 당신의 요소를 포함하는 "배열과 같은"개체입니다 jQuery를 객체이기 때문이다 jQuery, how to use multiple cached elements

Answer 1

이들은 서로 동일하지 않습니다.

var $one = $('#one')[0]; 

셀렉터 #one 일치 first DOM node 캐쉬. 이것을 jQuery 객체로 변환하려면 어떤 jQuery 함수를 사용하기 위해 $($one)을 수행해야합니다. $($one).addClass("example");. 하나 입니다 $one.addClass("example");

바로는 $one 개체에 대한 요구 사항에 따라 달라집니다 그리고 그것은 어떻게 사용 : 전화를 할 수 있도록

var $one = $('#one'); 

는 jQuery 오브젝트를 캐시합니다.

jsFiddle 위의 경우.

Answer 2

을 읽는 동안

참조 나는 위의 코드를 발견했다. jQuery 객체는 "배열과 같은"객체이기 때문에 [0]을 추가하면 객체의 첫 번째 요소와 유일한 요소가 검색됩니다.

선택기를 조작하면 jQuery (또는 Sizzle이 정확해야 함)가 DOM을 실행하고 DOM의 유일한 요소 만 찾습니다. 상상해 당신이 할 때마다 발생 : 대신 선택기에서 작동하고, DOM 매번 통해 실행, 그들은 대신 DOM 요소를 왜 캐시 된

$('#one') 

. 기존 요소 참조를 사용하여 jQuery 객체를 쉽게 다시 작성할 수 있습니다. DOM을 다시 실행하는 것과 비교하면 오버 헤드가 많지 않습니다.

var one = $('#one')[0] 

// or synonymously 
var one = document.getElementById('one'); 

// No running anymore through the DOM in search for "one" because jQuery simply 
// uses this reference instead. 
var theOne = $(one); 

//Another jQuery object, but uses the same "one" fetched earlier 
var anotherOne = $(one); 

Answer 3

var $one = $('#one')[0];는 랩의 jQuery 객체를 반환 실제 DOM 요소

var $one = $('#one');를 리턴한다.