Включить jQuery в консоль JavaScript

есть ли простой способ включить jQuery в консоль Chrome JavaScript для сайтов, которые его не используют? Например, на сайте я хотел бы получить количество строк в таблице. Я знаю, что это очень легко с помощью jQuery.

$('element').length;

сайт не использует jQuery. Могу ли я добавить его из командной строки?

18 ответов


Запустите это в консоли 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 (другие библиотеки и т. д.) вы все еще можете столкнуться с проблемами.

обновление:

сделать лучшее лучше, создание закладки делает его действительно удобным, давайте сделаем это, и немного обратной связи тоже здорово:

  1. щелкните правой кнопкой мыши панель закладок и выберите добавить Страница
  2. назовите его, как вам нравится, например, Inject jQuery, и используйте следующую строку для URL:

javascript: (функция (e,s){e.src=s; e.onload=function () {jQuery.noConflict();консоль.log ('jQuery injected')};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')

здесь используется официальный URL jQuery CDN, не стесняйтесь используйте свой собственный CDN / версия.


запустите это в консоли

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

он создает новый тег скрипта, заполняет его jQuery и добавляет в head


используйте буклет jQueryify:

http://marklets.com/jQuerify.aspx

вместо того, чтобы копировать вставку кода в другие ответы, это сделает его кликабельной закладкой.


копировать http://code.jquery.com/jquery-latest.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, чтобы вместо вставки скрипта снова и снова, мы могли просто нажать на букмарклет.

Screenshot of bookmark


я бунтарь.

решение: не используйте jQuery. jQuery-это библиотека для реферат inconcistencies дом через браузеры. Поскольку вы находитесь в своей собственной консоли, вам не нужна такая абстракция.

для примера:

$$('element').length

($$ - это псевдоним для document.querySelectorAll в консоли.)

для любого другого примера: я уверен, что могу найти что-нибудь. Особенно, если вы используете современный браузер (Chrome, FF, Safari, Опера.)

кроме того, зная, как работает 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протокол s к https приводит к предупреждению, если вы попробуете его прямо из строки URL браузера:This is probably not the site you are looking for!
  • мне нравится использовать CDN Google, когда я использую консоль для экспериментов с Google сайтами, такими как как Gmail.

моя единственная проблема заключается в том, что я должен включить номер версии, где в консоли я действительно всегда хочу последнюю.

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

Это довольно легко сделать вручную, как объясняют другие ответы. Но есть еще jQuerify плагин.


FWIW, Firebug встраивает include специальная команда, а jQuery по умолчанию имеет псевдоним: https://getfirebug.com/wiki/index.php/Include

поэтому в вашем случае вам просто нужно ввести:

include("jquery");

Флоран


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

этот ответ основан на ответе @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, и не тестируется в конфликтной среде.


одним из самых коротких способов было бы просто скопировать вставку кода ниже на консоль.

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

Если вы хотите сделать это для userscript, я написал следующее:http://userscripts.org/scripts/show/123588

Это позволит вам включить jQuery, плюс UI и любые плагины, которые вы хотите. Я использую его на сайте с 1.5.1 и без пользовательского интерфейса; этот скрипт дает мне 1.7.1 вместо этого, плюс UI, и никаких конфликтов в Chrome или FF. Я сам не тестировал Opera, но другие сказали мне, что он работает и для них, поэтому это должен быть довольно полный кросс-браузер решение userscript, если это то, для чего вам нужно это сделать.


Если вы хотите часто использовать jQuery с консоли, вы можете легко написать userscript. Во-первых, установите Tampermonkey, если вы находитесь на Chrome и Greasemonkey, если вы находитесь на Firefox. Напишите простой userscript с помощью такой функции:

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

вот альтернативный код:

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


готовое решение :

поставил код