document.getElementById的工作原理是什么，但jquery没有？

Question

这个问题对某些人来说可能看起来很简单，但我无法理解它。我正在处理XMLHttpRequest Ajax文件上传。第一步是选择我页面上的fileUpload元素，由于某些原因javascript工作但不查询，这里有以下两行：

var fileInput = $('#the-file'); //doesn't work
var fileInput = document.getElementById('the-file'); //works

我必须在jquery选择器之后指定一个方法吗？因为我不明白为什么它不起作用，它们实际上不是相同的代码吗？

我已经在顶部添加了jquery.js文件（我的文件的其他部分有很多jquery工作，所以这不是问题。）并准备好文档。我得到了它的工作，但我想知道这背后的原因。

修改

通过不起作用我的意思是使用jquery选择器我在控制台日志中得到“未定义”但是使用javascript我得到了我需要的所有文件信息。

Answer 1

问题是jQuery对象是实际DOM对象的包装器 - 在本例中是一个HTML <input>元素，其类型为file。只有实际的DOM对象具有files属性，而不是jQuery对象。您可以使用数字索引访问引用的DOM元素，在这种情况下只能为0。因此，这是解决方案：

var fileInput = $('#the-file');
fileInput.files[0]; // TypeError: cannot read property '0' of undefined
fileInput[0].files[0]; // works

当然，jQuery的做法是使用prop()函数，它获取jQuery对象中第一个DOM对象的属性：

fileInput.prop('files')[0];

Answer 2

鉴于我不知道你的意思“不起作用”我猜它是因为无论使用什么文件输入想要一个DOM元素而不是一个jquery对象。试试这个：

var fileInput = $('#the-file')[0];