$（「＃id」）[0]中的[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的第一個索引的元素。提供有一個與「畫布」 ID的元素，這兩種方法將返回到相同的DOM元素的引用：

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

這種方式，可以訪問畫布的本機屬性和方法，如.getContext('2d') 。