Czy istnieje prosty sposób na włączenie jQuery w konsoli JavaScript JavaScript dla stron, które go nie używają? Na przykład w witrynie chciałbym uzyskać liczbę wierszy w tabeli. Wiem, że z jQuery jest to naprawdę łatwe.

$('element').length;

Strona nie korzysta z jQuery. Czy mogę dodać to z linii poleceń?

Uruchom to w konsoli JavaScript przeglądarki, wtedy jQuery powinien być dostępny ...

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

UWAGA: jeśli witryna zawiera skrypty, które powodują konflikt z jQuery (inne biblioteki itp.), Nadal możesz mieć problemy.

Aktualizacja:

Tworzenie najlepszych z najlepszych, tworzenie zakładek sprawia, że ​​jest to naprawdę wygodne, zróbmy to, a także trochę opinii:

1. Kliknij prawym przyciskiem myszy pasek zakładek, a następnie kliknij opcję Dodaj stronę
2. Nazwij go tak, jak chcesz, np. Wstrzyknij jQuery i użyj następującego wiersza dla adresu URL:

javascript: (function (e, s) {e.src = s; e.onload = function () {jQuery.noConflict (); console.log ('wstrzyknięty jQuery')}; document.head.appendChild (e); }) (document.createElement ('script'), '// code.jquery.com/jquery-latest.min.js')

Poniżej znajduje się sformatowany kod:

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

Tutaj używany jest oficjalny adres URL jQuery CDN, możesz użyć własnej wersji CDN /.

Uruchom to w konsoli

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

Tworzy nowy tag skryptu, wypełnia go jQuery i dołącza do nagłówka.

Skopiuj wszystko z:
https://code.jquery.com/jquery-3.4.1.min.js

I wklej go do konsoli. Działa świetnie.

Skorzystaj z broszury jQueryify:

http://marklets.com/jQuerify.aspx

Zamiast kopiować wklejając kod w innych odpowiedziach, spowoduje to, że będzie to zakładka, którą można kliknąć.

Dodając do odpowiedzi @ jondavidjohn, możemy również ustawić ją jako zakładkę z URL jako kod javascript.

Nazwa: uwzględnij 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);

a następnie dodaj go do paska narzędzi przeglądarki Chrome lub Firefox, aby zamiast wklejać skrypt wielokrotnie, możemy po prostu kliknąć bookmarklet.

Jestem buntownikiem.

Rozwiązanie: nie używaj jQuery. jQuery to biblioteka służąca do wyodrębnienia niespójności DOM w przeglądarkach. Ponieważ jesteś we własnej konsoli, nie potrzebujesz tego rodzaju abstrakcji.

Na przykład:

$$('element').length

( $$jest aliasem document.querySelectorAllw konsoli).

Na inny przykład: jestem pewien, że mogę coś znaleźć. Zwłaszcza jeśli korzystasz z nowoczesnej przeglądarki (Chrome, FF, Safari, Opera).

Poza tym wiedza o tym, jak działa DOM, nikomu nie zaszkodzi, tylko zwiększy twój poziom jQuery (tak, więcej informacji o javascript poprawi ci umiejętności jQuery).

Właśnie utworzyłem bookmarklet jQuery 3.2.1 z obsługą błędów (ładuj tylko, jeśli nie jest już załadowany, wykryj wersję, jeśli jest już załadowany, komunikat o błędzie, jeśli błąd podczas ładowania) Testowane w Chrome 27. Nie ma powodu, aby używać „starej” wersji jQuery 1.9.1 w przeglądarce Chrome, ponieważ jQuery 2.0 jest kompatybilny z API z 1.9 .

Po prostu uruchom następujące polecenie w konsoli programisty Chrome lub przeciągnij i upuść na pasku zakładek :

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...")}}})())

Czytelny kod źródłowy jest dostępny tutaj

Top odpowiedź, przez jondavidjohn jest dobre, ale chciałbym, aby dostosować go do rozwiązania kilka punktów:

• Różne przeglądarki wyświetlają ostrzeżenie podczas ładowania skryptu z httpna stronę w https.
• Po prostu zmieniam jquery.comprotokół, aby httpswyświetlał ostrzeżenie, jeśli spróbujesz go bezpośrednio z paska adresu przeglądarki:This is probably not the site you are looking for!
• Lubię używać CDN Google, kiedy używam konsoli do eksperymentowania z witrynami Google, takimi jak Gmail.

Moim jedynym problemem jest to, że muszę podać numer wersji, w której naprawdę zawsze chcę mieć najnowszą wersję.

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

Według tej odpowiedzi :

fetch('https://code.jquery.com/jquery-latest.min.js').then(r => r.text()).then(r => eval(r))

Z jakiegoś powodu muszę go wykonać dwukrotnie, aby uzyskać nowe „$” (co mam również do czynienia z innymi metodami), ale działa.

Jest to odpowiednik, jeśli Twoja przeglądarka nie jest tak nowoczesna:

fetch('http://code.jquery.com/jquery-latest.min.js').then(function(r){return r.text()}).then(function(r){eval(r)})

Wykonanie tego jest dość łatwe, jak wyjaśniają inne odpowiedzi. Ale jest też wtyczka jQuerify .

FWIW, Firebug osadza includespecjalne polecenie, a jquery jest domyślnie aliasowane: https://getfirebug.com/wiki/index.php/Include

W twoim przypadku wystarczy wpisać:

include("jquery");

Florent

ta odpowiedź oparta na odpowiedzi @genesis, najpierw wypróbowałem wersję zakładki @jondavidjohn i nie działa, więc zmieniam ją na tę (dodaj ją do swojej zakładki):

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

słowa ostrzeżenia, nie jest testowany w chrome, ale działa w Firefoxie i nie jest testowany w środowisku konfliktu.

Jednym z najkrótszych sposobów byłoby po prostu skopiowanie wklejenia poniższego kodu do konsoli.

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

Jeśli chcesz to zrobić dla skryptu użytkownika, napisałem to: http://userscripts.org/scripts/show/123588

Pozwoli ci to dołączyć jQuery, interfejs użytkownika i dowolne wtyczki, które chcesz. Używam go w witrynie, która ma 1.5.1 i nie ma interfejsu użytkownika; ten skrypt daje mi zamiast tego 1.7.1, plus interfejs użytkownika i nie ma konfliktów w Chrome ani FF. Sam nie testowałem Opery, ale inni powiedzieli mi, że to też tam działało, więc powinno to być całkiem dobre kompletne rozwiązanie dla użytkowników przeglądarek, jeśli po to musisz to zrobić.

Oto alternatywny kod:

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

które można wkleić bezpośrednio w konsoli lub utworzyć nową stronę zakładek (w Chrome kliknij prawym przyciskiem myszy pasek zakładek , dodaj stronę ... ) i wklej ten kod jako adres URL.

Aby sprawdzić, czy to zadziałało, patrz poniżej.

Przed:

$()
Uncaught TypeError: $ is not a function(…)

Po:

$()
[]

Jeśli chcesz często używać jQuery z konsoli, możesz łatwo napisać skrypt użytkownika. Najpierw zainstaluj Tampermonkey, jeśli korzystasz z Chrome, a Greasemonkey, jeśli masz Firefox. Napisz prosty skrypt użytkownika za pomocą funkcji use takiej jak ta:

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

Rozwiązanie pod klucz:

Wprowadź swój kod do yourCode_herefunkcji. I zapobiegaj HTMLowi bez znacznika 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>");
}

Nowoczesne przeglądarki (testowane na Chrome, Firefox, Safari) implementują niektóre funkcje pomocnicze za pomocą znaku dolara, $które są bardzo podobne do jQuery (jeśli strona nie definiuje czegoś za pomocą window.$).

Te narzędzia są bardzo przydatne do wybierania elementów w DOM i ich modyfikowania.

Dokumenty: Chrome , Firefox

intuicyjny jednowarstwowy

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

Możesz zmienić srcadres.
Odwołałem się do ReferenceError: Nie mogę znaleźć zmiennej: jQuery