$（selector）[0]在jQuery中意味着什么？

Question

我不明白的語法是這樣的：

$("#profilePhotoFileUpload")[0]

我經常看到這種語法，我已經忽略了一段時間，因為我從來沒有使用它。 但是現在，為了理解這篇文章中的代碼我如何使用Parse.com javascriptSDK上傳圖像？ ，我不能再忽視它了。

我知道[0]這種語法通常用於指代數組。 但是對id的引用會生成某種數組似乎有點奇怪。

Answer 1

通過將[0]附加到jQuery對象將返回第一個 DOM元素。

當你在這里使用id選擇器時，數組中只有一個元素，所以使用[0]是有意義的。 如果您選擇多個元素，您還可以使用介於0和元素數之間的任何數字，您可以獲得相應的DOM元素。

來自jQuery Docs

jQuery對象包含一個文檔對象模型（DOM）元素的集合，這些元素是從HTML字符串創建的或從文檔中選擇的。 由於jQuery方法通常使用CSS選擇器來匹配文檔中的元素，因此jQuery對象中的元素集通常稱為“匹配元素”或“選定元素”。

jQuery對象本身就像一個數組; 它有一個length屬性，對象中的元素可以通過它們的數字索引[0]到[length-1] 。 請注意，jQuery對象實際上不是Javascript Array對象，因此它沒有真正的Array對象的所有方法，例如join() 。

Answer 2

好吧，不要將jQuery Object與DOM節點/元素混淆。

this應該很簡單

$(this)[0] === this

和

$("#target")[0] === document.getElementById("target");

例如

// Setting the inner HTML with jQuery.     
var target = document.getElementById("target");     

// Comparing DOM elements.
alert($(target)[0] === target); // alerts "true"

// Comparing DOM element and jQuery element
alert($(target)[0] === $(target).eq(0)); // alerts "false"

我們必須記住， $(target)[0]和$(target).get(0)返回相同的DOM元素，它具有DOM屬性，如.innerHTML和類似.appendChild() ，但不是jQuery方法.html()或.after()而$(target).eq(0)返回一個jQuery對象，它有一些有用的方法，如.html()和.after() 。

更重要的是

var logo1 = $("#logo");
var logo1Elem = logo1.get(0);

var logo2 = $("#logo");
var logo2Elem = $("#logo")[0];

雖然logo1和logo2以相同的方式創建（並包裝相同的DOM元素），但它們不是同一個對象。

// Comparing jQuery objects. 
alert($("#logo") === $("#logo")); // alerts "false"

// Comparing DOM elements.     
alert(logo1Elem === logo2Elem); // alerts "true"

參考： https ： //learn.jquery.com/using-jquery-core/jquery-object/

Answer 3

根據jQuery文檔，$（）返回一個匹配元素的集合，這些元素可以在DOM中根據傳遞的參數找到，也可以通過傳遞HTML字符串來創建。 通過添加[0]，您可以從元素中取出集合包裝，並在處理id時返回實際的DOM元素。 處理類時，您將返回通過括號表示法傳入的數組位置的元素（在本例中為第一個，因為數組在JavaScript中基於0）。

Answer 4

在id選擇器的情況下，向它添加[0]是沒有意義的，因為$("#theIdOfTheElement")將始終返回第一個元素。