$（selector）[0]在jQuery中的含義是什麼？

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

$("#profilePhotoFileUpload")[0]

我一直很頻繁看到這個語法，我已經忽略了一段時間，因爲我從來沒有使用它。但現在，爲了理解這篇文章How do I upload an image using the Parse.com javascriptSDK?的代碼，我不能再忽略它了。我知道[0]這個語法通常用於指代一個數組。但似乎有點奇怪，對id的引用會生成某種數組。

來源

2015-09-25 Jae Kim

它訪問直接在DOM元件，而不jQuery的包裝。 – Blender

接下來，這個函數能夠處理類和ID，因此可以產生一個元素數組或一個元素。因爲每個約定都有一個具有多個返回類型的函數，所以它總是會返回一個數組，因爲數組只能包含一個匹配。 –

[密切相關的（http://stackoverflow.com/questions/1302428/what-does-jquery-actually-return） – Jashwant

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

正如你在這裏使用的ID選擇器，將只有一個元素在數組中，所以使用[0]是有道理的。如果你選擇多個元素，你也可以使用任何介於0和元素個數之間的數字，你可以得到相應的DOM元素。

從jQuery Docs

jQuery對象包含文檔對象模型（DOM）已經從HTML字符串創建或從一個文件選擇的要素的集合。由於jQuery方法通常使用CSS選擇器來匹配文檔中的元素，因此jQuery對象中的元素集通常稱爲一組「匹配元素」或「選定元素」。

jQuery對象本身的行爲很像一個數組;它具有length屬性，對象中的元素可通過其數字索引[0]至[length-1]進行訪問。請注意，一個jQuery對象實際上並不是一個Javascript數組對象，因此它沒有真正的Array對象的所有方法，如join()。

來源

2015-09-25 13:58:27 Tushar

我看到...所以'[0]'不代表數組或類似的東西。 –

應該說會返回集合中的***第一個***元素 – charlietfl

@JaeKim：正確。括號符號可以用於任何對象。所有做的就是訪問該對象的屬性'0'。示例：'（{0：42} [0]）'返回42. –

根據jQuery文檔，$（）返回一個匹配元素的集合，這些匹配元素可以基於傳遞的參數在DOM中找到，也可以通過傳遞HTML字符串創建。通過添加[0]，您可以將元素的集合包裝關閉，並在處理id時返回實際的DOM元素。當處理一個類時，你會通過括號表示法（在這裏是第一個，因爲基於JavaScript的數組是0）返回數組中的元素。

來源

2015-09-25 14:03:33 rphuber

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

來源

2015-09-25 14:45:48

錯誤。只是因爲標準說你不能擁有多個具有相同ID的元素並不意味着瀏覽器會對此感到恐慌。事實上，大多數瀏覽器我知道會允許這樣的行動和ID選擇可以返回多個元素 – Steve

jQuery使用的document.getElementById（ID）（見：https://api.jquery.com/id-selector/），一個參考返回元素（如果你有相同ID的多個元素的第一個）（見：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById）還看到：HTTP： //stackoverflow.com/questions/14408891/getelementbyid-multiple-ids –

好了，不跟DOM node/element混淆jQuery Object。

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屬性，如.innerHTML 和像.appendChild()方法，但不是jQuery的方法，如 .html()或.after()相同的DOM元素，而$(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/

來源

2017-03-31 06:02:36 kolunar

$（selector）[0]在jQuery中的含義是什麼？

回答

相關問題