javascript - getElementById 和 JQuery 不返回相同的结果

Question

当我使用 JQuery 与 javascript 函数时，我没有得到相同的结果。

这是 HTML

<form id="testform">
  <div id="FormContainerID"></div>
  <input type="button" id="y" value="Button" />
  <div id="ListContainerID"></div>
</form>

这是 JavaScript

01   var Form = document.getElementById('y').form;
02 //var Form = $('#y').closest('form');
03   alert(Form);

当激活第 1 行时，我得到一个合法的表单对象。警报显示“object HTMLFormElement”，一切正常。

但是如果我使用第 02 行，Alert 会显示“object Object”，然后我当然会收到错误，因为它不是真正的 Form 对象。

为什么 JQuery 没有返回正确的对象？我在 Chrome 和 IE8 上得到了相同的结果。

[编辑]
我正在使用 JQuery 版本:jquery-1.5.1.min

[解决方案]
感谢您澄清此事。我将代码更改为:

var Form = $('#'+fChildID).closest('form')[0];

...现在它就像一个魅力。
Vivek Goel 是第一个回答的，所以他值得信任。我给你们其他解释 JQuery 实例模型的人投票了。

谢谢。

Answer 1

当您使用 jQuery 查找内容时，jQuery 返回一个 jQuery 实例，而不是原始 DOM 元素。 jQuery 实例是匹配元素集的包装器，允许您对元素应用基于集的操作。这是使用 jQuery 的绝对基础之一。

如果您喜欢使用类似数组的表示法，您还可以访问原始元素 - [0]、[1] 等，最多 。长度 - 1。因此，在您的情况下，由于您只获得一个元素，因此它将是 Form[0]。如果您的代码匹配多个表单元素，则第二个元素为 Form[1]，第三个元素为 Form[2]，依此类推。(使用 不过，在文档中很难找到 >[] 表示法，这是我认为的缺陷之一；过去您使用 get 方法，但现在只需要它如果您使用其对负索引的特殊处理。)

您通常根本不需要访问原始元素。您还没有说过一旦获得表单您将如何处理它，但是如果您要(比如说)提交它，只需调用 jQuery< 上的 submit 函数即可 实例，它将提交表单。如果您想从中获取属性，可以使用 attr jQuery 函数(例如 val = Form.attr("action"))。

jQuery 非常基于集合，但它是不对称的，一开始感觉很奇怪，但在实践中效果相当好。当获取一个值时，函数通常仅从第一个匹配的元素获取值。当设置一个值时，函数通常将其设置在所有匹配的元素上。