jQuery in die JavaScript-Konsole einbinden

Question

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

$('element').length;

Die Website verwendet kein jQuery. Kann ich es über die Befehlszeile hinzufügen?

Answer 1

Ergänzend zur Antwort von @jondavidjohn können wir es auch als Lesezeichen mit der URL als Javascript-Code festlegen.

Name: Jquery einbeziehen

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 es dann der Symbolleiste von Chrome oder Firefox hinzu, so dass wir das Skript nicht immer wieder einfügen müssen, sondern einfach auf das Bookmarklet klicken können.

Answer 2

Ich bin ein Rebell.

Lösung: Verwenden Sie kein jQuery. jQuery ist eine Bibliothek zur Abstraktion der DOM-Inkonsistenzen zwischen den Browsern. Da Sie in Ihrer eigenen Konsole sind, brauchen Sie diese Art von Abstraktion nicht.

Für Ihr Beispiel:

$$('element').length

( $$ ist ein Alias für document.querySelectorAll in der Konsole).

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

Außerdem schadet es niemandem, wenn man weiß, wie das DOM funktioniert, es würde nur das Niveau von jQuery erhöhen (ja, wenn man mehr über JavaScript lernt, wird man besser in jQuery).

Answer 3

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

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

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 ist hier verfügbar

Answer 4

El beste Antwort, von jondavidjohn ist gut, aber ich würde ihn gerne in einigen Punkten verbessern:

• Verschiedene Browser geben eine Warnung aus, wenn ein Skript von http zu einer Seite auf https .
• Einfach ändern jquery.com Protokoll zu https führt zu einer Warnung, 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 die Konsole verwende, um mit Google-Sites wie Gmail zu experimentieren.

Mein einziges Problem ist, dass ich eine Versionsnummer angeben muss, während ich in der Konsole eigentlich 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();

Answer 5

Per diese 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 bei den anderen Methoden tun muss), 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)})