Есть ли простой способ включить jQuery в консоль Chrome JavaScript для сайтов, которые его не используют? Например, на веб-сайте я хотел бы получить количество строк в таблице. Я знаю, что это очень просто с jQuery.
$('element').length;
Сайт не использует jQuery. Могу ли я добавить его из командной строки?
Запустите это в консоли браузера 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 (другие библиотеки и т.д.), вы все равно можете столкнуться с проблемами.
Сделав все возможное, создание закладки делает ее очень удобной, пусть это делает, и небольшая обратная связь тоже велика:
javascript: (function (e, s) {e.src= s; e.onload = function() {jQuery.noConflict(); console.log('jQuery injected')}; document.head.appendChild( д);}) (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')
Здесь используется официальный URL-адрес JQuery CDN, не стесняйтесь использовать свой собственный 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:
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, чтобы снова и снова вставлять script, мы можем просто щелкнуть букмарклет.
Я мятежник.
Решение: не используйте jQuery. jQuery - это библиотека для абстрагирования несовместимости DOM в браузерах. Поскольку вы находитесь в своей собственной консоли, вам не нужна эта абстракция.
В вашем примере:
$$('element').length
($$ является псевдонимом document.querySelectorAll в консоли.)
Для любого другого примера: я уверен, что могу найти что угодно. Особенно, если вы используете современный браузер (Chrome, FF, Safari, Opera).
Кроме того, знание того, как работает DOM, никому не повредит, это только увеличит ваш уровень jQuery (да, узнав больше о javascript, вы улучшите его в jQuery).
Я только что сделал букмарклет jQuery 3.2.1 с обработкой ошибок (загружаю, если не загружал, обнаружил версию, если она уже загружена, сообщение об ошибке, если ошибка при загрузке). Протестировано в Chrome 27. Нет причин использовать "старый" jQuery 1.9.1 в браузере Chrome, поскольку jQuery 2.0 совместим с API с 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...")}}})())
Верхний ответ jondavidjohn хорош, но я бы хотел настроить его, чтобы задать пару пунктов:
http на страницу https.jquery.com на https приводит к предупреждению, если вы попытаетесь выполнить его прямо из строки URL-адреса браузера: This is probably not the site you are looking for!Моя единственная проблема заключается в том, что я должен включить номер версии, где в консоли мне действительно всегда нужен последний.
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();
Per этот ответ:
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 плагин.
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')}());
слова предостережения, не проверены в хроме, но работают в firefox и не тестируются в конфликтной среде.
Один из самых коротких способов - просто скопировать код ниже на консоль.
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, плюс пользовательский интерфейс и любые плагины, которые вам нужны. Я использую его на сайте с 1.5.1 и без интерфейса; этот script дает мне 1.7.1 вместо этого плюс пользовательский интерфейс и никаких конфликтов в Chrome или FF. Я не тестировал Opera самостоятельно, но другие сказали мне, что она тоже работала для них, поэтому это должно быть довольно полным решением для обозревателя в браузере, если это необходимо для этого.
Если вы хотите часто использовать jQuery с консоли, вы можете легко написать usercript. Во-первых, установите Tampermonkey, если вы находитесь в Chrome и Greasemonkey, если находитесь в Firefox. Напишите простой пользовательский указатель с функцией использования следующим образом:
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;
}
}
Современные браузеры (протестированные на Chrome, Firefox, Safari) реализуют некоторые вспомогательные функции с использованием знака доллара $, которые очень похожи на jQuery (если веб-сайт не определяет что-то с помощью window.$).
Эти утилиты весьма полезны для выбора элементов в DOM и их изменения.
Вот альтернативный код:
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(…)
После:
$()
[]
интуитивный однострочный
document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E’))
Вы можете изменить адрес src.
Я ссылался на ReferenceError: Не могу найти переменную: jQuery
Поместите свой код в функцию yourCode_here. И предотвратить HTML без тега 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 v.70, jQuery загружается из исходного кода и готов, когда ваша страница готова. Просто введите непосредственно в консоль разработчика, и скрипт будет проанализирован.