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

$('element').length;

Сайт не використовує jQuery. Чи можу я додати його в командному рядку?

Запустіть це на консолі JavaScript браузера, тоді jQuery має бути доступним ...

var jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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 = function () {jQuery.noConflict (); console.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-код CDQ jQuery, не соромтесь використовувати власний 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

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. 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!
• Мені подобається використовувати 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();

Відповідно до цієї відповіді :

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 і не має інтерфейсу користувача; цей сценарій дає мені натомість 1.7.1, плюс інтерфейс користувача, і немає конфліктів у 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 з консолі, ви можете легко написати сценарій користувача. Спочатку встановіть 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;
    }
}

Рішення під ключ:

Покладіть свій код у 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, Firefox, Safari) реалізують деякі допоміжні функції, використовуючи знак долара, $який дуже схожий на jQuery (якщо веб-сайт не визначає щось, що використовує window.$).

Ці утиліти є досить корисними для вибору елементів у DOM та їх зміни.

Документи: Chrome , Firefox

інтуїтивний однолінійний

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

Ви можете змінити srcадресу.
Я посилався на ReferenceError: Неможливо знайти змінну: jQuery