為什么此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函數時（例如，“＃upload”），它會在內部決定將該選擇器與文檔中的元素進行匹配的最佳方法。 使用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];
}

在這兩種情況下，似乎都有一系列元素，但實際上它只是一個外觀。 有一個length屬性集，並且設置了索引以給出數組的外觀。

由於設置了索引，因此可以從該索引訪問它們。 因此，如您所知

$('#upload')[0]

可用於訪問此索引。 但是請記住，該索引是您要查詢的HTMLElement，換句話說

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

該API還公開了一些訪問該元素的方法。

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

最后，您通過所有這些訪問.file的原因是因為鍵入為file的輸入本機具有.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) 。