在JavaScript控制台中包含jQuery

对于不使用jQuery的站点，有没有一种简单的方法可以在ChromeJavaScript控制台中包含jQuery？例如，在一个网站上，我想得到表中的行数。我知道使用jQuery很容易做到这一点

$('element').length;

---

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

在浏览器的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）；
// ... 给脚本加载时间，然后键入（或参见下面的非等待选项）
jQuery.noConflict（）；

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

更新： 让最好的变得更好，创建书签让它变得非常方便，让我们来做吧，一点反馈也很好：

右键单击书签栏，然后单击添加页面

随意命名，例如InjectjQuery，并使用以下行作为URL：

javascript：（函数（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:（函数（e，s）{
e、 src=s；
e、 onload=函数（）{
jQuery.noConflict（）；
log（'jqueryinjected'）；
};
文件.标题.附件（e）；
})（document.createElement（'script'），'//code.jquery.com/jquery latest.min.js'）

---

这里使用的是正式的jQuery CDN URL，请随意使用您自己的CDN/版本。

在您的控制台中运行此程序

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

---

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

正如其他答案所解释的，手动执行此操作非常容易。但是还有一个问题。

使用jQueryify小册子：

---

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

如果您希望为用户脚本执行此操作，我写了以下内容：

它将允许您包括jQuery、UI和任何您想要的插件。我在一个没有UI的1.5.1网站上使用它；这个脚本为我提供了1.7.1，加上用户界面，在Chrome或FF中没有冲突。我自己还没有测试过Opera，但其他人告诉我它在那里也适用，所以这应该是一个完整的跨浏览器用户脚本解决方案，如果你需要这样做的话。

我是一个叛逆者

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

例如：

$$('element').length

（

$

是控制台中

文档.querySelectorAll

的别名。）

举个例子：我肯定我能找到任何东西。特别是如果你使用的是现代浏览器（Chrome、FF、Safari、Opera）

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

这很好，但我想对其进行调整，以解决以下几点：

• 当将脚本从

  http

  加载到

  https

  上的页面时，各种浏览器都会发出警告
• 如果您直接从浏览器的URL栏尝试，只需将

  jquery.com

  的协议更改为

  https

  就会产生警告：

  这可能不是您要查找的站点

• 当我使用控制台来试验谷歌网站（如Gmail）时，我喜欢使用谷歌的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();

从以下位置复制所有内容：

---

并将其粘贴到控制台中。工作非常完美。

除了@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的工具栏上，这样我们就可以点击bookmarklet，而不是一次又一次地粘贴脚本

---

我刚刚制作了一个带有错误处理的jQuery 3.2.1 bookmarklet（如果尚未加载，则仅加载；如果已加载，则检测版本；如果加载时出错，则显示错误消息）。在铬27中测试。没有理由在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...")}}})())

---

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

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

---

FWIW，Firebug嵌入了

include

特殊命令，jquery默认为别名：

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

include("jquery");

---

弗洛伦特

以下是备选代码：

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

之后：

$()
[]

---

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

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

Per:

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

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

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

---

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

警告的话，不是在chrome中测试的，而是在firefox中工作的，也不是在冲突环境中测试的。

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

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

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

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