对于不使用它的网站,是否有一种简单的方法可以将 jQuery 包含在 Chrome JavaScript 控制台中?例如,在一个网站上,我想获取表格中的行数。我知道这对 jQuery 来说真的很容易。
$('element').length;
该站点不使用 jQuery。我可以从命令行添加它吗?
document.getElementById('tableID').rows.length
。如果表没有 ID,请使用 DOM 编辑器给它一个。对于如此荒谬的琐碎事情,您不需要 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);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();
注意:如果该站点的脚本与 jQuery(其他库等)冲突,您仍然可能会遇到问题。
更新:
把最好的做得更好,创建一个书签真的很方便,让我们去做吧,一点点反馈也很棒:
右键单击书签栏,然后单击 Add Page 将其命名为您喜欢的名称,例如 Inject jQuery,并使用以下行作为 URL:
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')
下面是格式化的代码:
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 填充它并附加到头部。
从以下位置复制所有内容:
https://code.jquery.com/jquery-3.4.1.min.js
并将其粘贴到控制台中。完美运行。
使用 jQueryify 小册子:
https://web.archive.org/web/20190502132317/http://marklets.com/jQuerify.aspx
而不是复制粘贴其他答案中的代码,这将使它成为一个可点击的书签。
添加到@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 的工具栏,这样我们就无需一次又一次地粘贴脚本,只需单击小书签即可。
https://i.stack.imgur.com/cPa20.png
2020 年后方法,使用:
动态导入
自我执行的 IIFE
异步函数
箭头函数
(async () => { await import('https://code.jquery.com/jquery-2.2.4.min.js') // 库就绪 console.log(jQuery) })()
如果没有异步,导入返回 Promise,我们必须使用 .then()
:
import('https://code.jquery.com/jquery-2.2.4.min.js') .then( () => { console.log(jQuery) } )
https://caniuse.com/es6-module-dynamic-import
我是一个叛逆者。
解决方案:不要使用 jQuery。 jQuery 是一个用于抽象跨浏览器的 DOM 不一致的库。由于您在自己的控制台中,因此不需要这种抽象。
对于您的示例:
$$('element').length
($$
是控制台中 document.querySelectorAll
的别名。)
对于任何其他示例:我确信我可以找到任何东西。特别是如果您使用的是现代浏览器(Chrome、FF、Safari、Opera)。
此外,了解 DOM 的工作原理不会伤害任何人,它只会提高您的 jQuery 水平(是的,更多地了解 javascript 会让您在 jQuery 方面做得更好)。
我刚刚制作了一个带有错误处理的 jQuery 3.2.1 小书签(仅在未加载时加载,如果已加载则检测版本,如果加载时出错则显示错误消息)。在 Chrome 27 中测试。自 jQuery 2.0 is API-compatible with 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...")}}})())
Readable source-code is available here
top answer, by jondavidjohn 很好,但我想对其进行调整以解决以下几点:
各种浏览器在将脚本从 http 加载到 https 上的页面时会发出警告。
如果您直接从浏览器的 URL 栏中尝试将 jquery.com 的协议更改为 https 会导致警告:这可能不是您要查找的站点!
当我使用控制台来试验 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();
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)})
正如其他答案所解释的那样,手动执行此操作非常容易。但也有 jQuerify plug-in。
FWIW,Firebug 嵌入了 include
特殊命令,jquery 默认为别名:https://getfirebug.com/wiki/index.php/Include
所以在你的情况下,你只需要输入:
include("jquery");
弗洛朗
这个答案基于@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 中工作,并且没有在冲突环境中测试。
现代浏览器(在 Chrome、Firefox、Safari 上测试)implement some helper functions 使用与 jQuery 非常相似的美元符号 $
(如果网站未使用 window.$
定义某些内容)。
这些实用程序对于在 DOM 中选择元素并修改它们非常有用。
最短的方法之一就是将下面的代码复制粘贴到控制台。
var jquery = document.createElement('script');
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.head.appendChild(jquery);
如果您希望为用户脚本执行此操作,我写道:http://userscripts.org/scripts/show/123588
它会让你包含 jQuery、UI 和任何你想要的插件。我在一个有 1.5.1 且没有 UI 的网站上使用它;这个脚本给了我 1.7.1,加上 UI,在 Chrome 或 FF 中没有冲突。我自己没有测试过 Opera,但其他人告诉我它也适用于他们,所以这应该是一个非常完整的跨浏览器用户脚本解决方案,如果你需要这样做的话。
这是替代代码:
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(…)
后:
$()
[]
如果您想从控制台频繁使用 jQuery,您可以轻松编写用户脚本。首先,如果您使用的是 Chrome,请安装 Tampermonkey;如果您使用的是 Firefox,请安装 Greasemonkey。用这样的使用函数编写一个简单的用户脚本:
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;
}
}
交钥匙解决方案:
将您的代码放入 yourCode_here
函数中。并防止没有 HEAD 标签的 HTML。
(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'));函数 jQueryReady() { if (window.jQuery) { jQuery.noConflict(); yourCode_here(jQuery); } else { setTimeout(jQueryReady, 100); } } jQueryReady();功能 yourCode_here($) { console.log("OK"); $("body").html("
直观的单线
document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E’))
您可以更改 src
地址。
我提到了 ReferenceError: Can't find variable: jQuery
我已经建立在公认的解决方案之上并使其变得更好
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 $');
}
我在谷歌浏览器控制台片段中使用这个功能
另一种选择是将 jQuery 内容保存在片段(chrome)中并在您想要的任何站点上运行(右键单击+运行或 CTRL+Enter)它。如果您想按需运行它,它不一定是 jQuery 任何 javascript。 (例如:SharePoint JSOM.. 只需将所有 JSOM 文件保存为片段并按所需顺序运行)
最好的办法
var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0]。 appendChild(脚本);