[0]在$（＆＃34;＃id＆＃34;）[0]中做了什么？

Question

我猜它是一个数组索引，但是从哪个数组？我已经看到它在这样的代码中使用了：

HTML：

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

的JavaScript / jQuery的：

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

指定[0]部分的目的是什么？它与执行var canvas = $("#canvas");有何不同？

Answer 1

它是一种从jQuery集合返回DOM节点的方法，以及编写document.getElementById('canvas')的较短方式（尽管使用库来执行此操作）或$('#canvas').get(0);。

实际上它从jQuery选择器语法返回的对象集合返回zeroeth元素，第一个（使用JavaScript的零索引编号）元素。

差异是$('#canvas')返回包含元素集合的jQuery对象（用jQuery方法包装在jQuery对象中），而$('#canvas')[0]返回DOM节点，它可以访问DOM方法，但不能访问jQuery方法。

参考文献：

• get()。

Answer 2

它基本上是.get(index)的快捷符号：

  

.get()方法授予对每个jQuery对象下面的DOM节点的访问权限。如果index的值超出范围 - 小于元素的负数或等于或大于元素的数量 - 则返回undefined。

但实际上，jQuery对象是类似于数组的对象 - 它们包含整数和length属性。实际上，jqObj.get(index) internally uses jqObj[index]，只是.get(index)是一个抽象级别，它也处理负值（从最后一个元素向后计数）。

---

因此，$('#canvas')[0]允许您访问jQuery对象的第一个索引中包含的元素，该元素恰好是HTMLCanvasElement。如果有一个元素与＆＃34;画布＆＃34; ID，这两种方法都将返回对同一DOM元素的引用：

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

这样，你可以访问画布＆＃39;本机属性和方法，例如.getContext('2d')。