在JavaScript控制台中引入jQuery

Question

有没有一种简单的方法可以在Chrome JavaScript控制台中添加jQuery，以供那些不使用它的网站使用？例如，在某个网站上，我想获取表格中的行数。我知道这在jQuery中非常容易。

$('element').length;

这个网站没有使用jQuery。我能否通过命令行添加它？

- mrtsherman

---

如果您希望更自动化地处理，您可以使用用户脚本来包含它。说真的，这只需要一个五行的用户脚本就可以了 :P - rlemon

如果表格没有id，请使用DOM编辑器为其分配一个。您不需要使用jQuery来处理如此微不足道的事情。翻译内容为：document.getElementById('tableID').rows.length，意思是获取ID为"tableID"的表格行数。 - Niet the Dark Absol

有一个 Chrome 扩展程序可以做到这一点 - https://chrome.google.com/webstore/detail/script-injector/fddnddnolonllcgfbenaloajnbhebmob - Abhishek Saha

将其添加到脚本标记中，可以从CDN或本地添加。 CDN更简单。 - Donato

我相信大多数主流浏览器的开发工具现在默认包含jQuery（以及一些其他流行的库，如Underscore），但我找不到它的文档。打开控制台通常就可以使用了（商标）。此外，这种方法现在已经被几个人整合成了一个方便的书签小程序。我已经成功地使用了这个：http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet。 - brichins

你知道美元符号函数已经在Chrome开发工具中加载了吗？你可以使用 $来查询选择元素。 - Siddharth Shyniben

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. 随意命名，例如“注入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 injected');
    };
    document.head.appendChild(e);
})(document.createElement('script'), '//code.jquery.com/jquery-latest.min.js')

这里使用的是官方的 jQuery CDN URL，你可以自由地使用你自己的CDN版本。

- jondavidjohn

---

这段代码对我没用，没时间去搞明白原因，只是把 http://code.jquery.com/jquery-latest.min.js 文件的内容复制粘贴到控制台中，就能完美地运行。 - Ruslanas Balčiūnas

这个代码不能这样写吗？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 injected'); }; document.head.appendChild(e); }) - nicusor

@RuslanasBalčiūnas，有时间弄明白了，添加了一个可以与书签一起工作的解决方案。https://dev59.com/fWs05IYBdhLWcg3wD9wB#76834783 - elbajo

URL 'code.jquery.com/jquery-latest.min.js' 包含了 jQuery v.1.11.1，这是一个非常旧的版本（点击这里查看解释）。你应该使用指定的版本。 - undefined

Answer 2

在你的控制台中运行这个命令：

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

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

- genesis

Answer 3

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

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

- Ruslanas Balčiūnas

---

非常好用！而且它不会向DOM添加脚本，这有时是不可能的，因为存在“内容安全策略指令”。我尝试了被接受的答案，但结果是：“拒绝加载脚本'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'，因为它违反了以下内容安全策略指令：”script-src.... - Kangur

Answer 4

使用jQueryify手册：

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

与复制其他答案中的代码不同，这将使其成为可点击的书签。

- meder omuraliev

Answer 5

2020年后的编程方法，使用：

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

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

---

如果不使用 async，并且由于 import 返回一个 Promise，我们必须使用 .then() ：

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

另一个例子

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

- NVRM

Answer 6

在@jondavidjohn的回答基础上，我们还可以将其设置为一个带有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的工具栏中，这样我们就可以通过单击书签来避免反复粘贴脚本。

- Manish Singh

Answer 7

我是一个叛逆者。

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

针对你的示例：

$$('element').length

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

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

此外，了解DOM的工作原理对任何人都没有坏处，它只会提高您在jQuery方面的水平（是的，了解更多关于javascript的知识可以让您更好地掌握jQuery）。

- Florian Margaine

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

可读的源代码在此处提供

- fnkr

Answer 9

顶级回答者jondavidjohn的答案不错，但我想修改一些点：

• 当加载来自http的脚本到https页面时，各种浏览器会发出警告。
• 仅将jquery.com的协议更改为https会导致警告，如果您直接从浏览器的URL栏中尝试，则会显示：这可能不是您要查找的站点！
• 当我使用控制台实验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();

- hippietrail

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

- vt5491