为什么 $('.classname') returns 一个 jquery 函数？

Question

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

然而当我运行这个

它return是一个jQuery.fn.init

这是 DOM 个元素：

为什么不同？

Answer 1

此处的小片段按预期工作：前两次传送 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 元素。

Answer 2

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

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

您可能还会在 Chrome 的控制台中看到一个优化，其中对大型数组或 array-like-objects（如 jQuery）进行分页.较小的数组将完整显示。

为什么 $('.classname') returns 一个 jquery 函数？

Why $('.classname') returns a jquery function?

jquery

google-chrome

google-chrome-devtools