为什么这个jQuery代码返回一个数组而不是一个属性？

Question

我正在尝试简单的HTML5多文件上传。我不是想使用插件。我的代码有效，但我不理解以下javascript： -

鉴于此html

<form action="/convert/files" method="POST" enctype="multipart/form-data">
    <input name="upload" id="upload" type="file" size="40" multiple /><br/>
    <button type="button" onclick="uploadFiles();">Process File(s)</button>
</form> 

这就是我在JS中检索文件信息的方式......

function uploadFiles() {
    var files = $('#upload')[0].files;
    ... snip ...
}

问题

• 为什么我需要使用数组索引器来访问文件？即。 [0]？
• 为什么$('#upload')会返回一个数组？此返回的数组中只有一个项目。

喝彩！

更新

好的 - 所以我被告知它是jQuery object。好。那么为什么这个对象有一个带有一个项目的数组插槽呢？

Answer 1

基本上，jQuery库包含 document.querySelectorAll^MDN 的功能。它提供了一个API来处理查询结果。

$是一个很好用的名称，但请记住它是一个函数调用。我认为很容易忘记这方面。

当您使用作为选择器的参数调用jQuery函数时（例如，＆＃34; #upload＆＃34;），它在内部决定使用该选择器与文档中的元素匹配的最佳方法。使用jQuery原型创建一个新对象以公开API。匹配的元素数量设置为此对象的.length。然后迭代该元素集（或者在使用id的情况下直接设置）。每个元素都分配给一个基于0的数字索引，该索引与元素所在的顺序直接相关。

例如，这是id

的简化结果

jQueryReturnObject.length = 1;
jQueryReturnObject[0] = matchedElement;

这是多个元素的简化结果

jQueryReturnObject.length = multipleElements.length;
for(var i = 0; i < multipleElements.length; i++){
 jQueryReturnObject[i] = multipleElements[i];
}

在这两种情况下，似乎都有一系列元素，但实际上它只是一个外观。有一个长度属性集，索引设置为给出数组的外观。

由于设置了索引，因此可以从该索引访问它们。所以当你注意到

$('#upload')[0]

可用于访问此索引。但请记住，该索引是您查询的HTMLElement，换句话说是

$('#upload')[0] === document.getElementById('upload') //true

API还公开了一些访问该元素的方法。

$('#upload')[0] === $('#upload').get(0)
$('#upload') === $('#upload').eq(0)

最后，您通过所有这些访问.files的原因是因为输入类型为文件的输入本身可用.files。

Answer 2

jQuery的工作方式是，只要你的用户$()返回一个匹配的jQuery object元素数组。

这就是为什么你可以使用$().each()，因为它可以用作数组。

转到您的控制台并粘贴$('body')。你会看到一个数组显示出来。

虽然有些人可能认为jQuery object不是数组，但这是真的，它的行为很像一个。它不是一个实际的数组，但您可以执行$('body').length之类的操作，它返回在对象中找到的元素数量。您可以像对象一样迭代对象：for (var i = 0; i < $('body').length; i++)，并且可以按index：$('body')[0]抓取元素。您甚至可以使用一些数组方法：$('body').slice(0,0)。