$ ("# id") [0]에서 [0]는 무엇을합니까?

Question

나는 그것이 배열 인덱스입니다,하지만 배열에서 나는 그것이 같은 코드에 사용되는 본 것 같은데요?

HTML :

<canvas id = "id"> </canvas> 

자바 스크립트/jQuery를 :

var canvas = $("#canvas")[0]; 

[0] 부분을 지정하는 목적은 무엇이며, var canvas = $("#canvas");과 다른 점은 무엇입니까?

Answer 1

jQuery 컬렉션에서 DOM 노드를 반환하는 방법이며, document.getElementById('canvas') (라이브러리를 사용하기는하지만) 또는 $('#canvas').get(0);을 작성하는 더 짧은 방법입니다.

jQuery 선택기 구문에 의해 반환 된 객체 컬렉션에서 0 번째 요소, 즉 첫 번째 요소 (JavaScript의 0 인덱스 번호 매기기 사용) 요소를 효과적으로 반환합니다.

차이는 $('#canvas')[0]는 DOM 방법에 액세스 할 수있는 DOM 노드를 반환 반면 $('#canvas')은 (jQuery를 메소드와 jQuery를 개체에 싸서) 요소의 집합을 포함하는 jQuery를 객체를 반환하는 것은 아니지만의 jQuery 방법.

참고 :

• get().

Answer 2

그것은 기본적으로 .get(index)에 대한 바로 가기 표기법 :

각각의 jQuery 객체의 기초가되는 DOM 노드에 .get() 방법 액세스 권한을 부여합니다. index의 값이 범위를 벗어나거나 음수보다 작거나 요소 수보다 크면 undefined을 반환합니다.

실제로 jQuery 객체는 정수형 및 length 속성을 포함하는 배열 형 객체입니다. 사실, jqObj.get(index) internally uses jqObj[index]은 단지 .get(index)이며 음수 값을 처리하는 추상 수준입니다 (마지막 요소에서 뒤로 계산).

---

그래서, $('#canvas')[0] 당신이 HTMLCanvasElement 될 일이 당신의 jQuery 객체의 첫 번째 인덱스에 포함 된 요소에 액세스 할 수 있습니다. .getContext('2d')로, 같은를

$('#canvas')[0] === document.getElementById('canvas') 

이 방법, 당신은 '기본 속성과 메서드를 캔버스에 액세스 할 수 있습니다은 "캔버스"ID를 가진 요소가 제공, 이러한 방법 모두 동일한 DOM 요소에 대한 참조를 반환합니다 .