在 JavaScript 控制台中包含 jQuery

Question

对于不使用它的网站，有没有一种简单的方法可以在 Chrome JavaScript 控制台中包含 jQuery？ 例如，在一个网站上，我想获取表格中的行数。 我知道使用 jQuery 真的很容易。

$('element').length;

该站点不使用 jQuery。我可以从命令行添加它吗？

Answer 1

在浏览器的 JavaScript 控制台中运行它，然后 jQuery 应该可用...

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

注意：如果该站点的脚本与 jQuery（其他库等）冲突，您仍然可能会遇到问题。

更新：

把最好的做得更好，创建一个书签真的很方便，让我们去做吧，一点点反馈也很棒：

1. 右键单击书签栏，然后单击添加页面
2. 随意命名，例如 Inject jQuery，并使用以下行作为 URL：

javascript:(function(e,s){e.src=s;e.onload=function(){jQuery.noConflict();console.log('jQuery注入')};document.head.appendChild(e); })(document.createElement('script'),'//code.jquery.com/jquery-latest.min.js')

下面是格式化的代码：

javascript: (function(e, s) {
    e.src = s;
    e.onload = function() {
        jQuery.noConflict();
        console.log('jQuery injected');
    };
    document.head.appendChild(e);
})(document.createElement('script'), '//code.jquery.com/jquery-latest.min.js')

这里使用的是官方的 jQuery CDN URL，请随意使用自己的 CDN/版本。

Answer 2

在您的控制台中运行它

var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0].appendChild(script);

它创建一个新的脚本标签，用 jQuery 填充它并附加到头部。

Answer 3

从以下位置复制所有内容：
https://code.jquery.com/jquery-3.4.1.min.js

并将其粘贴到控制台中。 完美运行。

Answer 4

使用 jQueryify 小册子：

https://web.archive.org/web/20190502132317/http://marklets.com/jQuerify.aspx

而不是复制粘贴其他答案中的代码，这将使它成为一个可点击的书签。

Answer 5

添加到@jondavidjohn 的答案中，我们还可以将其设置为书签，并将 URL 作为 javascript 代码。

名称：包括 Jquery

网址：

javascript:var jq = document.createElement('script');jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(jq); setTimeout(function() {jQuery.noConflict(); console.log('jQuery loaded'); }, 1000);void(0);

然后将其添加到 Chrome 或 Firefox 的工具栏，这样我们就无需一次又一次地粘贴脚本，只需单击小书签即可。

Answer 6

2020 年后方法，使用：

• 动态导入
• 自我执行的 IIFE
• 异步函数
• 箭头函数

 (async () => { await import('https://code.jquery.com/jquery-2.2.4.min.js') // Library ready console.log(jQuery) })()

---

如果没有异步，导入返回一个Promise ，我们必须使用.then() ：

 import('https://code.jquery.com/jquery-2.2.4.min.js') .then( () => { console.log(jQuery) } )

另一个例子

https://caniuse.com/es6-module-dynamic-import

Answer 7

我是一个叛逆者。

解决方案：不要使用 jQuery。 jQuery 是一个用于抽象跨浏览器的 DOM 不一致的库。 由于您在自己的控制台中，因此不需要这种抽象。

对于您的示例：

$$('element').length

（ $$是控制台中document.querySelectorAll的别名。）

对于任何其他示例：我确信我可以找到任何东西。 特别是如果您使用的是现代浏览器（Chrome、FF、Safari、Opera）。

此外，了解 DOM 的工作原理不会伤害任何人，它只会提高您的 jQuery 水平（是的，更多地了解 javascript 会让您在 jQuery 方面做得更好）。

Answer 8

我刚刚制作了一个带有错误处理的 jQuery 3.2.1 小书签（仅在未加载时加载，如果已加载则检测版本，如果加载时出错则显示错误消息）。 在 Chrome 27 中测试。没有理由在 Chrome 浏览器上使用“旧”jQuery 1.9.1，因为jQuery 2.0 与 1.9 API 兼容。

只需在 Chrome 的开发者控制台中运行以下命令或将其拖放到您的书签栏中：

javascript:((function(){if(typeof(jQuery)=="undefined"){window.jQuery="loading";var a=document.createElement("script");a.type="text/javascript";a.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){console.log("jQuery "+jQuery.fn.jquery+" loaded successfully.")};a.onerror=function(){delete jQuery;alert("Error while loading jQuery!")};document.getElementsByTagName("head")[0].appendChild(a)}else{if(typeof(jQuery)=="function"){alert("jQuery ("+jQuery.fn.jquery+") is already loaded!")}else{alert("jQuery is already loading...")}}})())

可读源代码可在此处获得

Answer 9

jondavidjohn 给出的最佳答案很好，但我想对其进行调整以解决以下几点：

• 将脚本从http加载到https上的页面时，各种浏览器都会发出警告。
• 如果您直接从浏览器的 URL 栏中尝试将jquery.com的协议更改为https会导致警告： This is probably not the site you are looking for!
• 当我使用控制台来试验 Google 网站（例如 Gmail）时，我喜欢使用 Google 的 CDN。

我唯一的问题是我必须在控制台中包含一个版本号，我真的总是想要最新的。

var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();

Answer 10

根据这个答案：

fetch('https://code.jquery.com/jquery-latest.min.js').then(r => r.text()).then(r => eval(r))

出于某种原因，我必须执行两次才能获得新的“$”（我也必须与其他方法有关），但它确实有效。

如果您的浏览器不是那么现代，这是等效的：

fetch('http://code.jquery.com/jquery-latest.min.js').then(function(r){return r.text()}).then(function(r){eval(r)})

Answer 11

FWIW，Firebug 嵌入了include特殊命令，jquery 默认为别名： https ://getfirebug.com/wiki/index.php/Include

所以在你的情况下，你只需要输入：

include("jquery");

弗洛朗

Answer 12

正如其他答案所解释的那样，手动执行此操作非常容易。 但也有jQuerify 插件。

Answer 13

这个答案基于@genesis 答案，起初我尝试了书签版本@jondavidjohn，但它不起作用，所以我将其更改为这个（将其添加到您的书签中）：

javascript:(function(){var s = document.createElement('script');s.src = "//code.jquery.com/jquery-2.2.4.min.js";document.getElementsByTagName('head')[0].appendChild(s);console.log('jquery loaded')}());

小心的话，没有在 chrome 中测试，但在 Firefox 中工作，并且没有在冲突环境中测试。

Answer 14

现代浏览器（在 Chrome、Firefox、Safari 上测试）使用与 jQuery 非常相似的美元符号$实现了一些帮助函数（如果网站没有使用window.$定义某些东西）。

这些实用程序对于在 DOM 中选择元素并修改它们非常有用。

文档： Chrome , 火狐

Answer 15

最短的方法之一就是将下面的代码复制粘贴到控制台。

var jquery = document.createElement('script'); 
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.head.appendChild(jquery);

Answer 16

如果您想从控制台频繁使用 jQuery，您可以轻松编写用户脚本。 首先，如果您使用的是 Chrome，请安装 Tampermonkey；如果您使用的是 Firefox，请安装 Greasemonkey。 用这样的使用函数编写一个简单的用户脚本：

var scripts = [];

function use(libname) {
    var src;
    if (scripts.indexOf(libname) == -1) {
        switch (libname.toLowerCase()) {
            case "jquery":
                src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
                break;
            case "angularjs":
                src = "//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js";
                break;
        }
    } else {
        console.log("Library already in use.");
        return;
    }
    if (src) {
        scripts.append(libname);
        var script = document.createElement("script");
        script.src = src;
        document.body.appendChild(scr);
    } else {
        console.log("Invalid Library.");
        return;
    }
}

Answer 17

这是替代代码：

javascript:(function() {var url = '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; var n=document.createElement('script');n.setAttribute('language','JavaScript');n.setAttribute('src',url+'?rand='+new Date().getTime());document.body.appendChild(n);})();

可以直接在控制台中粘贴或创建一个新的书签页面（在 Chrome 中右键单击书签栏，添加页面... ）并将此代码粘贴为 URL。

要测试这是否有效，请参见下文。

前：

$()
Uncaught TypeError: $ is not a function(…)

后：

$()
[]

Answer 18

交钥匙解决方案：

将您的代码放在yourCode_here函数中。 并防止没有 HEAD 标签的 HTML。

 (function(head) { var jq = document.createElement('script'); jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"; ((head && head[0]) || document.firstChild).appendChild(jq); })(document.getElementsByTagName('head')); function jQueryReady() { if (window.jQuery) { jQuery.noConflict(); yourCode_here(jQuery); } else { setTimeout(jQueryReady, 100); } } jQueryReady(); function yourCode_here($) { console.log("OK"); $("body").html("<h1>Hello world !</h1>"); }

Answer 19

如果你想为用户脚本做这个，我写了这个： http ://userscripts.org/scripts/show/123588

它会让你包含 jQuery、UI 和任何你想要的插件。 我在一个有 1.5.1 且没有 UI 的网站上使用它； 这个脚本给了我 1.7.1，加上 UI，在 Chrome 或 FF 中没有冲突。 我自己没有测试过 Opera，但其他人告诉我它也适用于他们，所以这应该是一个非常完整的跨浏览器用户脚本解决方案，如果你需要这样做的话。

Answer 20

直观的单线

document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E’))

您可以更改src地址。
我提到了ReferenceError: Can't find variable: jQuery

Answer 21

我已经建立在公认的解决方案之上并使其变得更好

var also_unconflict = typeof $ != "undefined";

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

if(also_unconflict){
    setTimeout(function(){
        $=jQuery.noConflict();
        console.log('jquery loaded, use jQuery instead of $')
    }, 500)
}else{
    console.log('jquery loaded, you can use $');
}

我在谷歌浏览器控制台片段中使用这个功能

Answer 22

另一种选择是将 jQuery 内容保存在片段（chrome）中并在您想要的任何站点上运行（右键单击+运行或 CTRL+Enter）它。 如果您想按需运行它，它不一定是 jQuery 任何 javascript。 （例如：SharePoint JSOM.. 只需将所有 JSOM 文件保存为片段并按所需顺序运行）

Answer 23

最好的办法

var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0]。 appendChild(脚本);