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/2.1.4/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（其他库等）冲突，您仍可能遇到问题。

更新

做得更好，创建书签使它非常方便，让我们这样做，并且一些反馈也很棒：

右键单击书签栏，然后单击添加页面
根据需要命名，例如注入jQuery，并对URL使用以下行：

javascript :( function（e，s）{e.src = s; e.onload = function（）{jQuery.noConflict（）; console.log（'jQuery inject'）}; document.head.appendChild（ E）;}）（使用document.createElement（ '脚本'）， '// 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小册子：

http://marklets.com/jQuerify.aspx

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

Answer 5

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

名称：包括Jquery

<强> URL：

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的工具栏中，以便我们只需点击书签即可反复粘贴脚本。

Screenshot of bookmark

Answer 6

我是反叛者。

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

对于你的例子：

$$('element').length

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

对于任何其他例子：我相信我能找到任何东西。特别是如果您使用的是现代浏览器（Chrome，FF，Safari，Opera）。

此外，了解DOM如何工作不会伤害任何人，它只会增加你的jQuery级别（是的，了解更多关于javascript使你在jQuery上更好）。

Answer 7

我刚刚制作了一个带有错误处理的jQuery 3.2.1 bookmarklet（如果尚未加载则仅加载，如果已加载则检测版本，加载时出错时出现错误消息）。在Chrome 27中测试过。自jQuery 2.0 is API-compatible with 1.9以来，没有理由在Chrome浏览器上使用“旧”jQuery 1.9.1。

只需在Chrome的开发者控制台中运行以下内容，或者拖放＆amp;将其放在书签栏中：

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...")}}})())

Readable source-code is available here

Answer 8

top answer, by jondavidjohn很好，但我想调整它以解决几个问题：

将http的脚本加载到https上的页面时，各种浏览器都会发出警告。
只需将jquery.com的协议更改为https，如果您直接在浏览器的网址栏中进行操作，则会发出警告：This is probably not the site you are looking for!
当我使用控制台试验Gmail等Google网站时，我喜欢使用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 9

每this answer：

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

出于某种原因，我必须执行两次以获得新的＆＃39; $＆＃39; （我也与其他方法有关），但它确实有效。

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

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

Answer 10

手动执行此操作非常简单，正如其他答案所解释的那样。但也有jQuerify plug-in。

Answer 11

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

因此，在您的情况下，您只需键入：

include("jquery");

Florent的

Answer 12

2020年后的方法，使用es7 dynamic import！

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

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

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

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

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 15

如果您想从控制台经常使用jQuery，您可以轻松编写用户脚本。首先，如果您使用的是Chrome和Greasemonkey，请安装Tampermonkey。使用如下使用函数编写一个简单的用户脚本：

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 16

使用美元符号$的现代浏览器（在Chrome，Firefox，Safari上进行了测试）implement some helper functions与jQuery非常相似（如果网站未使用window.$进行定义）

这些实用程序对于选择DOM中的元素并进行修改非常有用。

文档：Chrome，Firefox

Answer 17

如果您希望为用户提供此操作，我写道：http://userscripts.org/scripts/show/123588

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

Answer 18

直观的单行

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 19

这是替代代码：

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 20

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

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 $');
}

我在 google chrome 控制台代码段中使用此功能

在JavaScript控制台中包含jQuery

20 个答案:

更新