在JavaScript控制台中包含jQuery

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

$('element').length;

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

548096 次浏览

在浏览器的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:(函数(e, s){e.src=s;e.onload=函数(){jQuery.no冲突();console.log('jQuery注入')};document.head.append孩子(e);})(document.create元素('脚本'),'//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/版本。

在你的控制台上运行这个

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

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

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

使用jQueryify手册:

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

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

如果你想为用户脚本做这件事,我写了这个:http://userscripts.org/scripts/show/123588

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

我是个反叛者。

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

对于您的示例:

$$('element').length

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

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

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

最佳答案,作者:约翰很好,但我想调整它来解决几个问题:

  • 当将脚本从http加载到https上的页面时,各种浏览器都会发出警告。
  • 如果您直接从浏览器的URL栏尝试,只需将jquery.com的协议更改为https就会导致警告: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();

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

并将其粘贴到控制台。完美的作品。

添加到@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的工具栏中,这样我们就可以单击书签,而不是一次又一次地粘贴脚本。

书签截图

我刚刚制作了一个带有错误处理的jQuery 3.2.1书签(仅在未加载时加载,如果已加载则检测版本,如果加载时出错则显示错误消息)。在Chrome27中进行了测试。自jQuery 2.0与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...")}}})())

可读的源代码在这里

如果您想经常从控制台使用jQuery,您可以轻松编写用户脚本。首先,如果您使用的是Chrome,请安装TamperMonkey,如果您使用的是Firefox,请安装G的emonkey。

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默认使用别名:https://getfirebug.com/wiki/index.php/Include

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

include("jquery");

Florent

以下是替代代码:

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

这个答案

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

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

直观的单线

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

您可以更改src地址。
引用错误:找不到变量:jQuery

交钥匙解决方案:

将您的代码放在yourCode_here函数中。并防止没有HEAD标记的超文本标记语言。

(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'));
function jQueryReady() {if (window.jQuery) {jQuery.noConflict();yourCode_here(jQuery);} else {setTimeout(jQueryReady, 100);}}
jQueryReady();
function yourCode_here($) {console.log("OK");$("body").html("<h1>Hello world !</h1>");}

现代浏览器(在Chrome,Firefox,Safari)实现一些辅助函数使用美元符号$,与jQuery非常相似(如果网站没有使用window.$定义某些内容)。

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

文档:ChromeFirefox

2020年后方法,使用:

(async () => {await import('https://code.jquery.com/jquery-2.2.4.min.js')// Library readyconsole.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

我已经建立了接受的解决方案并使其变得更好

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

我在google chrome控制台代码段中使用此功能

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