Question

我刚开始使用JQuery并正在使用教程vid。有时，演示者会使用javascript而不是JQuery选择器。只是想知道为什么下面的javascript getElementById在将对象传递给函数时工作正常，但第二个没有？

谢谢！

// works
addTask(document.getElementById('taskText'), evt);

// doesn't
addTask($('#taskText'), evt);

Answer 1

getElementById()返回DOM元素引用。

jQuery的选择器返回一个jQuery对象。您可以使用

从jQuery对象获取元素引用

$('#taskText').get(0);

请参阅http://api.jquery.com/get/

Answer 2

要添加到另一个答案，关于结果，如果你想使用jQuery（更容易阅读），你可以直接得到dom节点：

addTask($('#taskText')[0], evt);

Answer 3

$('#taskText')返回一个jQuery对象引用。

document.getElementById('taskText')返回DOM元素引用。

如果您的addTask()函数不知道如何将它们转换为所需内容，那么这就是问题，因为其中一个函数需要转换。

如果你想从jQuery对象获取第一个DOM元素引用，你可以这样做：

$('#taskText').get(0)

所以这两个应该是相同的：

$('#taskText').get(0)
document.getElementById('taskText')

Answer 4

两者不完全相同

document.getElementById('taskText'); //returns a HTML DOM Object

var contents = $('#taskText');  //returns a jQuery Object

var contents = $('#taskText')[0]; //returns a HTML DOM Object

因此您必须更改它以获取HTML Dom对象

addTask($('#taskText')[0], evt);

Answer 5

正如@Phil和@jfriend00指出的那样，document.getElementById（'taskText'）是一个DOM元素，而$（'＃taskText'）是一个jQuery对象。后者是与选择器匹配的所有DOM元素的对象。

将其视为基于零的数组，您可以通过执行以下操作传递DOM元素：

addTask($('#taskText')[0], evt);

JQuery按ID与document.GetElementByID进行选择

5 个答案: