分类 JavaScript 相关 下的文章

浏览器控制台 $ 符号

接上一篇 检查 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.

  1. $() 对于给定的表达式进行评估, 如果找到对应的 element, 就返回第一个元素, 相当于 document.querySelector();
  2. $$() 评估表达式, 返回找到的所有 node 的数组, 相当于 document.querySelectorAll();
  3. $x() 评估 xPath 表达式, 返回找到 node 的数组;
    还有更多, 参考官方这里: Firefox, Chrome.

检查 jQuery 是否 load, 否则重新加载

刚才看到一个很好的 javascript 用来检测 jQuery 是否已经 load, 如果没有 load, 那么重新 load. 尤其是某些嵌入式的脚本, 它可能一开始并不知道这一页面有么有 load jQuery.

if(!window.jQuery)
{
   var script = document.createElement('script');
   script.type = "text/javascript";
   script.src = "path/to/jQuery";
   (document.getElementsByTagName('body')[0] || document.getElementsByTagName('head')[0]).appendChild(script);
}

window.jQuery 用来检测当前页面有么有 load jQuery.
document.getElementsByTagName('head')[

如果找到(getElementsByTagName 会返回一个数组), 就追加到第一个元素的里面的最后面.