javascript - 语法错误：'[object HTMLDocument]' 在 Firefox 中不是有效的选择器

加载我的本地 js 库并运行一个 alert 命令。

var jq = document.createElement('script');
jq.src = "http://127.0.0.1/js/jquery-3.3.1.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
$(document).ready(function(){
alert("hello world");
});

1. 在 Chrome 的检查--控制台中
弹出一个带有 hellow world 的窗口，没有问题。

2. 在 Firefox 的控制台中。
它出现如下错误：

SyntaxError: '[object HTMLDocument]' is not a valid selector

为什么这段代码无法在 Firefox 的控制台运行？

答案＃1

在将这些命令输入控制台时，$ 不是 jQuery —— 相反，它是由 浏览器 提供的一个 辅助函数，与 document.querySelector 非常相似。请参阅某些浏览器提供的内置辅助函数的文档。

你可以在这里查看 Firefox 的 $ 源代码：

WebConsoleCommands._registerOriginal("$", function(owner, selector) {
  try {
    return owner.window.document.querySelector(selector);
  } catch (err) {
    // Throw an error like `err` but that belongs to `owner.window`.
    throw new owner.window.DOMException(err.message, err.name);
  }
});

即使 $ 是 jQuery，这一行

$(document).ready(function(){

还不会引用 jQuery，因为你刚刚插入了脚本——它不一定已经被下载和解析完成。所以，它仍然会引用querySelector别名，并且

document.querySelector(document)

毫无意义。

最好的解决方案是为插入的脚本添加一个 load 处理程序，这样你就可以在 jQuery 加载完成后运行一个函数。例如：

const jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js";
document.head.appendChild(jq);
jq.addEventListener('load', () => {
  console.log("hello world");
  console.log($ === jQuery);
});

一旦 jQuery 加载，它将确保 window.$ 现在 指向 jQuery 而不是 querySelector 的别名；上述代码片段将在片刻后记录 true。