在JavaScript控制台中包含jQuery

有没有一种简单的方法可以将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（其他库等）冲突，你仍然可能遇到问题。

更新：

做得更好，创build一个书签使其非常方便，让我们来做，而且一点点的反馈也是很棒的：

1. 右键单击书签栏，然后单击添加页面
2. 按照你喜欢的名字命名，例如注入jQuery，并使用下面这行代码：

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'), 'jquery-1.11.1.min.js') 

这里使用官方的jQuery CDN URL，随意使用你自己的CDN /版本。

Answer 2

在你的控制台运行这个

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

它创build新的脚本标记，用jQuery填充并附加到头部

Answer 3

使用jQueryify小册子：

http://marklets.com/jQuerify.aspx

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

Answer 4

复制jquery-1.11.1.min.js文件内容并将其粘贴到控制台中。; 完美的作品。

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的工具栏中，以便不必再次粘贴脚本，只需点击书签即可。

Answer 6

我是反叛者

解决scheme：不要使用jQuery。 jQuery是一个在浏览器中抽象DOM不一致的库。 既然你在自己的控制台，你不需要这种抽象。

举个例子：

 $$('element').length 

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

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

此外，知道DOM如何工作不会伤害任何人，只会增加你的jQuery（是的，了解更多关于JavaScript使你更好的jQuery）。

Answer 7

我刚刚做了一个error handlingjQuery 3.2.1小书签（只加载如果尚未加载，检测版本，如果已经加载，错误信息，如果加载时出错）。 在Chrome 27上testing过，没有理由在Chrome浏览器上使用“旧”jQuery 1.9.1，因为jQuery 2.0与1.9兼容 。

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

可读的源代码在这里可用

Answer 8

jondavidjohn最好的答案是好的，但我想调整它来解决几个问题：

• 当从http加载到https上的页面时，各种浏览器发出警告。
• 只要将jquery.com的协议更改为https ，就会直接从浏览器的url栏中获得警告： This is probably not the site you are looking for!
• 当我使用控制台试用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(); 

Answer 9

其他答案的解释很容易手动完成。 但也有jQuerify插件 。

Answer 10

FWIW，Firebugembeddedinclude特殊命令，并且jquery默认为别名： https ： //getfirebug.com/wiki/index.php/Include

所以在你的情况下，你只需input：

 include("jquery"); 

弗洛朗

Answer 11

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

 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 12

这个答案基于@genesis答案，起初我尝试了书签版本@jondavidjohn，它不工作，所以我改变它（添加到您的书签）：

 javascript:(function(){var s = document.createElement('script');s.src = "jquery-2.2.4.min.js";document.getElementsByTagName('head')[0].appendChild(s);console.log('jquery loaded')}()); 

谨慎的话，不是在Chrome中testing，而是在Firefox中工作，而不是在冲突环境中testing。

Answer 13

根据这个答案 ：

 fetch('jquery-1.11.1.min.js').then(r => r.text()).then(r => eval(r)) 

出于某种原因，我必须执行两次以获得新的'$'（我也必须使用其他方法），但是它可以工作。

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

 fetch('jquery-1.11.1.min.js').then(function(r){return r.text()}).then(function(r){eval(r)}) 

Answer 14

如果你正在寻找一个用户脚本，我写这个： http ://userscripts.org/scripts/show/123588

它会让你包括jQuery，再加上UI和你想要的任何插件。 我在一个拥有1.5.1和没有UI的网站上使用它; 这个脚本给我1.7.1，而不是用户界面，在Chrome或FF没有冲突。 我自己也没有testing过Opera，但其他人也告诉我这是为他们工作，所以这应该是一个完整的跨浏览器的userscript解决scheme，如果这是你需要做的。

Answer 15

这是另外的代码：

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

可以直接在控制台中粘贴，也可以创build一个新的书签页面（在Chrome中右键单击书签栏 ， 添加页面… ），然后将此代码粘贴为URL。

要testing是否工作，请参见下文。

之前：

 $() Uncaught TypeError: $ is not a function(…) 

后：

 $() [] 

Answer 16

如果你想从控制台频繁使用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 17

直观的一行

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

您可以更改src地址。
我提到ReferenceError：找不到variables：jQuery