在 JavaScript 控制台中包含 jQuery

Include jQuery in the JavaScript Console

提问by mrtsherman

Is there an easy way to include jQuery in the Chrome JavaScript console for sites that do not use it? For example, on a website I would like to get the number of rows in a table. I know this is really easy with jQuery.

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

$('element').length;

The site does not use jQuery. Can I add it in from the command line?

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

回答by jondavidjohn

Run this in your browser's JavaScript console, then jQuery should be available...

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

var jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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();

NOTE:if the site has scripts that conflict with jQuery (other libs, etc.) you could still run into problems.

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

Update:

更新：

Making the best better, creating a Bookmark makes it really convenient, let's do it, and a little feedback is great too:

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

1. Right click the Bookmarks Bar, and click Add Page
2. Name it as you like, e.g. Inject jQuery, and use the following line for URL:

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

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

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

Below is the formatted code:

下面是格式化后的代码：

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

Here the official jQuery CDN URL is used, feel free to use your own CDN/version.

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

回答by genesis

Run this in your console

在您的控制台中运行它

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

It creates a new script tag, fills it with jQuery and appends to the head.

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

回答by Ruslanas Bal?iūnas

Copy everything from:
https://code.jquery.com/jquery-3.4.1.min.js

复制所有内容：https:
//code.jquery.com/jquery-3.4.1.min.js

And paste it into console. Works perfectly.

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

回答by meder omuraliev

Use the jQueryify booklet:

使用 jQueryify 小册子：

http://marklets.com/jQuerify.aspx

http://marklets.com/jQuerify.aspx

Instead of copy pasting the code in the other answers, this'll make it a clickable bookmark.

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

回答by manish_s

Adding to @jondavidjohn's answer, we can also set it as a bookmark with URL as the javascript code.

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

Name:Include Jquery

名称：包含 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);

and then add it to the toolbar of Chrome or Firefox so that instead of pasting the script again and again, we can just click on the bookmarklet.

然后将它添加到 Chrome 或 Firefox 的工具栏，这样我们就可以点击书签，而不是一次又一次地粘贴脚本。

回答by Florian Margaine

I'm a rebel.

我是一个叛逆者。

Solution: don't use jQuery. jQuery is a library to abstract the DOM inconcistencies across the browsers. Since you're in your own console, you don't need this kind of abstraction.

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

For your example:

对于您的示例：

$$('element').length

($$is an alias to document.querySelectorAllin the console.)

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

For any other example: I'm sure I can find anything. Especially if you're using a modern browser (Chrome, FF, Safari, Opera).

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

Besides, knowing how the DOM works wouldn't hurt anyone, it would only increase your level of jQuery (yes, learning more about javascript makes you better at jQuery).

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

回答by fnkr

I just made a jQuery 3.2.1 bookmarklet with error-handling (only load if not already loaded, detect version if already loaded, error message if error while loading). Tested in Chrome 27. There is no reason to use the "old" jQuery 1.9.1 on Chrome browser since jQuery 2.0 is API-compatible with 1.9.

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

Just run the following in Chrome's developer console or drag & drop it in your bookmark bar:

只需在 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

可读源代码可在此处获得

回答by hippietrail

The top answer, by jondavidjohnis good but I'd like to tweak it to address a couple of points:

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

• Various browsers issue a warning when loading a script from httpto a page on https.
• Just changing jquery.com's protocol to httpsresults in a warning if you try it straight from the browser's URL bar: This is probably not the site you are looking for!
• I like to use Google's CDN when I'm using the console to experiment with Google sites such as Gmail.

• 不同的浏览器加载脚本时发出警告http，以在一个页面https。
• 如果您直接从浏览器的 URL 栏中尝试，只需更改jquery.com的协议即可https导致警告：This is probably not the site you are looking for!
• 当我使用控制台来试验 Gmail 等 Google 网站时，我喜欢使用 Google 的 CDN。

My only issue is that I have to include a version number where in the console I really always want the latest.

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

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

回答by vt5491

Per this answer:

根据这个答案：

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

For some reason I have to execute it twice to get the new '$' (which I have to do with the other methods as well), but it works.

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

This is the equivalent if your browser isn't so modern:

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

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

回答by fflorent

FWIW, Firebug embeds the includespecial command, and jquery is aliased by default: https://getfirebug.com/wiki/index.php/Include

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

So in your case, you just have to type :

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

include("jquery");

Florent

弗洛朗