为什么 $('.classname') 返回一个 jquery 函数？答案

【问题标题】：Why $('.classname') returns a jquery function?为什么 $('.classname') 返回一个 jquery 函数？
【发布时间】：2015-09-11 05:00:46
【问题描述】：

通常当我在 chrome 的开发者控制台中运行$(classname) 时，它通常会返回一个相关元素的列表。（例如$('.img-holder')给我[<img src='https://example.com/image.jpg'>]）

但是当我运行这个

它返回一个jQuery.fn.init

这里是 DOM 元素：

为什么不一样？

【问题讨论】：

你的页面上有tile-content类的221个元素吗？如果你扩展[0 ... 99]，你会看到什么？也许这正是 Chrome 处理要显示的 100 多个元素的情况的方式。
由于您只显示代码的一部分，因此很难判断，但可能是因为您没有关闭元素，jQuery 正在读取页面上的所有其他内容作为元素。
如果您的页面上至少有 101 个元素，请尝试$('*:lt(100)')，然后尝试$('*:lt(101)') 以查看差异。

标签： jquery google-chrome google-chrome-devtools

【解决方案1】：

如果您在没有 jQuery 的页面上或 jQuery 已设置为 no conflict 模式，它没有注册 $ 别名，则 Chrome 控制台中的 $ 是document.querySelector 的别名。见https://developer.chrome.com/devtools/docs/commandline-api#selector

如果 jQuery 已经注册了 $ 别名，那么它会返回一个 jQuery 实例（您看到的是 jQuery.fn.init）。见http://api.jquery.com/jQuery/#jQuery1

您可能还会在 Chrome 的控制台中看到一个优化，其中大型数组或 类似数组的对象（如 jQuery）是分页的。较小的数组将完整显示。

【讨论】：

【解决方案2】：

这里的小 sn-p 就像预期的那样工作：它在前两次传递 jquery 对象。在第三种情况下，显示第一个 DOM 对象：

$(function(){
console.log($('.one'));            // jquery object
console.log($('.tile-content'));   // jquery object
console.log($('.tile-content')[0]);// first matched DOM object
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
Some text,
  <a href="someurl.html" class="tile-content">the link to some url</a>,
  <a href="url2.html" class="tile-content">another link</a>
and some more text<br><br>(remember to swich on your web console)
</div>

刚刚在我的 Chrome 控制台上注意到，在前两种情况下，您实际上看到了 jquery 对象（尽管它可能只是看起来像一个普通的 DOM 元素数组）。我的第三个console.log 只显示了第一个匹配的 DOM 元素。这次对象是只是一个简单的DOM元素。

【讨论】：