ChatGPT解决这个技术问题 Extra ChatGPT

在 JavaScript 控制台中包含 jQuery

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

$('element').length;

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

对于更多的自动化方法,您可以使用用户脚本来包含它。说真的,这就像一个 5 行用户脚本:P
document.getElementById('tableID').rows.length。如果表没有 ID,请使用 DOM 编辑器给它一个。对于如此荒谬的琐碎事情,您不需要 jQuery。
有一个 chrome 扩展可以做到这一点 - chrome.google.com/webstore/detail/script-injector/…
从 CDN 或本地将其添加到脚本标记。 CDN 要简单得多。
我相信大多数主要浏览器的开发工具现在默认包含 jQuery(以及一些其他流行的库,如 Underscore),但我无法找到它的文档。弹出打开控制台它通常只是工作(tm)。 ------ 此外,这种方法(现在)早已被几个人内置到一个方便的书签中。我已经成功使用了这个:learningjquery.com/2009/04/…

G
Geremia

在浏览器的 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(其他库等)冲突,您仍然可能会遇到问题。

更新:

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

右键单击书签栏,然后单击 Add Page 将其命名为您喜欢的名称,例如 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/版本。


这个片段对我不起作用。没有时间弄清楚为什么。只需复制 code.jquery.com/jquery-latest.min.js 文件内容并粘贴到控制台。完美运行。
这不能写成:``` javascript: (function(e, s) { var element = document.createElement('script'); var jqueryUrl = '//code.jquery.com/jquery-latest.min .js'; element.src = jqueryUrl; element.onload = function() { jQuery.noConflict(); console.log('jQuery注入'); }; document.head.appendChild(e); }) ``` ?
K
Kerwin Sneijders

在您的控制台中运行它

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

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


K
Kerwin Sneijders

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

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


奇迹般有效!并且它不会将脚本添加到 DOM,这有时由于“内容安全策略指令”而无法实现。我尝试了接受的答案,结果是:拒绝加载脚本“ajax.googleapis.com/ajax/libs/jquery/1/jquery.js”,因为它违反了以下内容安全策略指令:“script-src ....
m
meder omuraliev

使用 jQueryify 小册子:

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

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


D
Dave

添加到@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 的工具栏,这样我们就无需一次又一次地粘贴脚本,只需单击小书签即可。

https://i.stack.imgur.com/cPa20.png


N
NVRM

2020 年后方法,使用:

动态导入

自我执行的 IIFE

异步函数

箭头函数

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

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

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

Another example

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


F
Florian Margaine

我是一个叛逆者。

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

对于您的示例:

$$('element').length

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

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

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


f
fnkr

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

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

Readable source-code is available here


C
Community

top answer, by jondavidjohn 很好,但我想对其进行调整以解决以下几点:

各种浏览器在将脚本从 http 加载到 https 上的页面时会发出警告。

如果您直接从浏览器的 URL 栏中尝试将 jquery.com 的协议更改为 https 会导致警告:这可能不是您要查找的站点!

当我使用控制台来试验 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();

v
vt5491

this answer

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)})

K
Ken Redler

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


+1 - 谢谢肯。 jQuerify 这个词提醒我,我创建了一个书签来执行此操作。我添加了自己的答案,其中包含我使用的代码。我知道我以前做过这个=)。
虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接答案可能会失效。 - From Review
@adamb,不幸的是,随着旧链接衰减的趋势,多年来,我改进其中一些非常古老的答案的时间和动力也随之消散。然而,由于 SO 的设计,我们非常欢迎您自己改进答案——对与熵作斗争的贡献总是受到衷心的赞赏。
f
fflorent

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

所以在你的情况下,你只需要输入:

include("jquery");

弗洛朗


w
whale_steward

这个答案基于@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 中工作,并且没有在冲突环境中测试。


Z
Zanon

现代浏览器(在 Chrome、Firefox、Safari 上测试)implement some helper functions 使用与 jQuery 非常相似的美元符号 $(如果网站未使用 window.$ 定义某些内容)。

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

文档:ChromeFirefox


R
RegarBoy

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

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

B
BrianFreud

如果您希望为用户脚本执行此操作,我写道:http://userscripts.org/scripts/show/123588

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


k
kenorb

这是替代代码:

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(…)

后:

$()
[]

w
whale_steward

如果您想从控制台频繁使用 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;
    }
}

u
user9342572809

交钥匙解决方案:

将您的代码放入 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'));函数 jQueryReady() { if (window.jQuery) { jQuery.noConflict(); yourCode_here(jQuery); } else { setTimeout(jQueryReady, 100); } } jQueryReady();功能 yourCode_here($) { console.log("OK"); $("body").html("

Hello world !

"); }


C
Community

直观的单线

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


u
user151496

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

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

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


s
san

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


M
Mohamedyassine

最好的办法

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