Gibt es eine einfache Möglichkeit, jQuery in die Chrome JavaScript-Konsole für Websites aufzunehmen, die es nicht verwenden? Zum Beispiel möchte ich auf einer Website die Anzahl der Zeilen in einer Tabelle erhalten. Ich weiß, dass dies mit jQuery wirklich einfach ist.

$('element').length;

Die Site verwendet jQuery nicht. Kann ich es über die Befehlszeile hinzufügen?

Führen Sie dies in der JavaScript-Konsole Ihres Browsers aus, dann sollte jQuery verfügbar sein ...

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

HINWEIS: Wenn die Site Skripte enthält, die mit jQuery in Konflikt stehen (andere Bibliotheken usw.), können immer noch Probleme auftreten.

Aktualisieren:

Wenn Sie das Beste besser machen und ein Lesezeichen erstellen, ist dies sehr praktisch. Lassen Sie es uns tun, und ein kleines Feedback ist auch großartig:

1. Klicken Sie mit der rechten Maustaste auf die Lesezeichenleiste und klicken Sie auf Seite hinzufügen
2. Benennen Sie es wie Sie möchten, z. B. Injizieren Sie jQuery, und verwenden Sie die folgende Zeile für die URL:

Javascript: (Funktion (e, s) {e.src = s; e.onload = Funktion () {jQuery.noConflict (); console.log ('jQuery injiziert')}; document.head.appendChild (e); }) (document.createElement ('script'), '// code.jquery.com/jquery-latest.min.js')

Unten ist der formatierte Code:

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

Hier wird die offizielle jQuery-CDN-URL verwendet. Sie können auch Ihre eigene CDN / Version verwenden.

Führen Sie dies in Ihrer Konsole aus

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

Es erstellt ein neues Skript-Tag, füllt es mit jQuery und hängt es an den Kopf an.

Kopieren Sie alles von:
https://code.jquery.com/jquery-3.4.1.min.js

Und fügen Sie es in die Konsole ein. Funktioniert perfekt.

Verwenden Sie die jQueryify-Broschüre:

http://marklets.com/jQuerify.aspx

Anstatt den Code in die anderen Antworten einzufügen, wird er zu einem anklickbaren Lesezeichen.

Zusätzlich zur Antwort von @ jondavidjohn können wir sie auch als Lesezeichen mit der URL als Javascript-Code festlegen.

Name: Jquery einschließen

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

und fügen Sie es dann der Symbolleiste von Chrome oder Firefox hinzu, sodass wir das Skript nicht immer wieder einfügen, sondern einfach auf das Lesezeichen klicken können.

Ich bin ein Rebell.

Lösung: Verwenden Sie jQuery nicht. jQuery ist eine Bibliothek zum Abstrahieren der DOM-Inkonsistenzen zwischen den Browsern. Da Sie sich in Ihrer eigenen Konsole befinden, benötigen Sie diese Art der Abstraktion nicht.

Für Ihr Beispiel:

$$('element').length

( $$ist ein Alias ​​fürdocument.querySelectorAll in der Konsole.)

Für jedes andere Beispiel: Ich bin sicher, ich kann alles finden. Besonders wenn Sie einen modernen Browser verwenden (Chrome, FF, Safari, Opera).

Außerdem würde das Wissen, wie das DOM funktioniert, niemanden verletzen, sondern nur Ihr jQuery-Niveau erhöhen (ja, wenn Sie mehr über Javascript lernen, werden Sie bei jQuery besser).

Ich habe gerade ein jQuery 3.2.1-Lesezeichen mit Fehlerbehandlung erstellt (nur laden, wenn nicht bereits geladen, Version erkennen, wenn bereits geladen, Fehlermeldung, wenn beim Laden ein Fehler auftritt). In Chrome 27 getestet. Es gibt keinen Grund, die "alte" jQuery 1.9.1 im Chrome-Browser zu verwenden, da jQuery 2.0 API-kompatibel mit 1.9 ist .

Führen Sie einfach Folgendes in der Entwicklerkonsole von Chrome aus oder ziehen Sie es per Drag & Drop in Ihre Lesezeichenleiste :

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

Lesbarer Quellcode finden Sie hier

Die beste Antwort von jondavidjohn ist gut, aber ich möchte sie optimieren, um ein paar Punkte anzusprechen:

• Verschiedene Browser geben eine Warnung aus, wenn ein Skript von httpauf eine Seite geladen wird https.
• Wenn Sie das jquery.comProtokoll nur so ändern , httpsdass eine Warnung angezeigt wird, wenn Sie es direkt über die URL-Leiste des Browsers versuchen:This is probably not the site you are looking for!
• Ich verwende gerne das CDN von Google, wenn ich über die Konsole mit Google-Websites wie Google Mail experimentiere.

Mein einziges Problem ist, dass ich eine Versionsnummer angeben muss, bei der ich in der Konsole wirklich immer die neueste Version haben möchte.

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 dieser Antwort :

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

Aus irgendeinem Grund muss ich es zweimal ausführen, um das neue '$' zu erhalten (was ich auch mit den anderen Methoden zu tun habe), aber es funktioniert.

Dies ist das Äquivalent, wenn Ihr Browser nicht so modern ist:

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

Es ist ziemlich einfach, dies manuell zu tun, wie die anderen Antworten erklären. Es gibt aber auch das jQuerify-Plug-In .

FWIW, Firebug bettet den includespeziellen Befehl ein und jquery ist standardmäßig mit einem Alias ​​versehen: https://getfirebug.com/wiki/index.php/Include

In Ihrem Fall müssen Sie also nur Folgendes eingeben:

include("jquery");

Florent

Diese Antwort basiert auf der Antwort von @genesis. Zuerst habe ich die Lesezeichenversion @jondavidjohn ausprobiert und sie funktioniert nicht. Deshalb ändere ich sie in diese (füge sie deinem Lesezeichen hinzu):

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

Worte der Vorsicht, wird nicht in Chrom getestet, sondern funktioniert in Firefox und nicht in Konfliktumgebung getestet.

Eine der kürzesten Möglichkeiten wäre das Kopieren und Einfügen des folgenden Codes in die Konsole.

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

Wenn Sie dies für ein Userscript tun möchten, habe ich Folgendes geschrieben: http://userscripts.org/scripts/show/123588

Sie können damit jQuery sowie die Benutzeroberfläche und alle gewünschten Plugins einbinden. Ich verwende es auf einer Site mit 1.5.1 und ohne Benutzeroberfläche. Dieses Skript gibt mir stattdessen 1.7.1 plus Benutzeroberfläche und keine Konflikte in Chrome oder FF. Ich habe Opera nicht selbst getestet, aber andere haben mir gesagt, dass es dort auch für sie funktioniert. Daher sollte dies eine vollständige browserübergreifende UserScript-Lösung sein, wenn Sie dies tun müssen.

Hier ist alternativer Code:

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

Diese können entweder direkt in die Konsole eingefügt oder eine neue Lesezeichenseite erstellt werden (klicken Sie in Chrome mit der rechten Maustaste auf die Lesezeichenleiste , Seite hinzufügen ... ) und fügen Sie diesen Code als URL ein.

Um zu testen, ob das funktioniert hat, siehe unten.

Vor:

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

Nach:

$()
[]

Wenn Sie jQuery häufig über die Konsole verwenden möchten, können Sie problemlos ein Benutzer-Skript schreiben. Installieren Sie zuerst Tampermonkey, wenn Sie Chrome verwenden, und Greasemonkey, wenn Sie Firefox verwenden. Schreiben Sie ein einfaches Benutzer-Skript mit einer Verwendungsfunktion wie dieser:

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

Schlüsselfertige Lösung :

Setzen Sie Ihren Code in yourCode_hereFunktion. Und verhindern Sie HTML ohne HEAD-Tag.

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

Moderne Browser (getestet auf Chrome, Firefox, Safari) implementieren einige Hilfsfunktionen mit dem Dollarzeichen $, die jQuery sehr ähnlich sind (wenn die Website nichts mit definiert window.$).

Diese Dienstprogramme sind sehr nützlich, um Elemente im DOM auszuwählen und zu ändern.

Dokumente: Chrome , Firefox

intuitiver Einzeiler

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

Sie können die srcAdresse ändern .
Ich habe auf ReferenceError verwiesen : Variable: jQuery kann nicht gefunden werden