jquery - Jquery 选择器不适用于将 dom 元素分配给变量

Question

我有一个程序将变量分配为：

var theList = document.getElementById('theList');

它使用 jquery，但如果我这样写：

var theList = $('#theList'); 

使用该变量的函数不起作用。

jquery 选择器和使用 getElementById 有什么区别？

Answer 1

document.getElementById 返回一个本机 DOM Element 对象，可以直接访问该节点的属性。

jQuery 函数改为返回“jQuery 集合”，即一个 jQuery 对象，它具有一组关联的函数/插件等，其作用类似于 DOM 节点数组。

用于区分前者和后者的常用约定是在包含后者的变量前面加上$：

要从 jQuery 集合中提取单个元素作为 DOM 节点，请使用.get(n)或[n].

var $theList = $('#theList');   // jQuery collection
var theList = $theList[0];      // DOM node
var theList = $theList.get(0);  // also a DOM node

属性和属性访问取决于您是否拥有 jQuery 集合：

var id = $theList.attr('id');   // jQuery function
var id = theList.id;            // native property

Answer 2

第一个theList是 DOM 元素；第二个theList（最好写成$theList）是一个jQuery 对象。您的功能显然期待前者而不是后者。

Answer 3

getElementById函数返回具有给定 id 的第一个元素，其中 jquery 选择器返回称为“包装集”的对象。您可以使用each函数来遍历它并调用您的函数。

请参阅这篇文章： http: //www.devx.com/codemag/Article/40923。

Answer 4

那是因为 $('#theList') 返回一个 JQuery 对象，而不是一个 DOM 对象。JQuery 对象没有与 Javascript 元素/节点相同的方法和属性。

Answer 5

标准的 getElementByID 函数返回一个对 DOM 元素的 JavaScript 引用，而 jQuery 函数返回一个 jQuery 对象（它包含对 DOM 元素的零个或多个 JavaScript 引用的类数组结构）。

为了使它们兼容，您可以使用：

var theList = $('#theList').get(0);

注意：编辑以帮助维护世界和平并纠正评论者很快指出的我仓促输入的术语。