浏览器控制台 $ 符号
接上一篇 检查 jQuery 是否 load, 否则重新加载 , 做了一个加载 jQuery 的实验, 找了一个未加载 jQuery 的页面, 再控制台检查 window.jQuery, 显示 undefined, 但是如果直接输出 $, 却是有输出的(默认以 chrome console 为例):
>window.jQuery;
undefined
>$;
function $(selector, [startNode]) { [Command Line API] }
这里就有点迷惑了, 为什么不加载 jQuery, $ 也是 JavaScript 的对象呢? 难道加载了 extJS 等 JavaScript library? 换一个空白页面, 仍然是上面的输出. 真奇了怪了.
那么我们先看看如果加载了 jQuery, 输出又是什么样子呢?
>if(!window.jQuery)
{
var script = document.createElement('script');
var protocol = (("https:" == document.location.protocol) ? " https" : " http");
script.src = protocol + "://code.jquery.com/jquery-1.9.1.min.js";
script.type = "text/javascript";
(document.getElementsByTagName('body')[0] || document.getElementsByTagName('head')[0]).appendChild(script);
}
<script src=" https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
>window.jQuery;
function (e,t){return new b.fn.init(e,t,r)}
>$;
function (e,t){return new b.fn.init(e,t,r)}
这里 window.jQuery 和 $ 都有了, 值是一样的, 并且 $ 和上面的输出是不一样的.
为了解开迷惑, 就 google 之, 于是发现了这个非常有趣的帖子, 大致翻译过来如下:
问: 几年前, 哥也曾是 JavaScript/jQuery 开发攻城狮, 如今重操旧业. 清醒的记得, $符号是用在 jQuery 的库里面的, 如果不用 jQuery, $这逼, 啥都不是.
今天, 我打开一个不包含任何 JavaScript 库的空页面, 然后在控制台输出 $, 竟然输出了一些东西, 不是 undefined, 是一个 function.
1) 以前$符号是没有赋予任何函数的, 难道是我记错了?
2) 如果没有 load jQuery 等类库, 那么$符号代表神马?
答:
1) 以前你是对的, 现在依然是对的;
2) Firefox and Chrome implement $, $$ and several others as helper commands. Both will set $$ to document.querySelectorAll(), and set $ to document.querySelector if window.$ hasn't been defined.
那么谜底解开, 在 firefox 和 chrome 的控制台, 这些符号默认被赋予了一些特定的函数, 所以即使没有 load jQuery 等类库, 你也可以用他们来操作 DOM.
- $() 对于给定的表达式进行评估, 如果找到对应的 element, 就返回第一个元素, 相当于 document.querySelector();
- $$() 评估表达式, 返回找到的所有 node 的数组, 相当于 document.querySelectorAll();
- $x() 评估 xPath 表达式, 返回找到 node 的数组;