Wenn ich in einem Webkit-Browser wie Chrome Folgendes mache:
%Vor%Ich bekomme ein Ergebnis, das fast genau so aussieht wie jQuery's:
%Vor% Wenn ich in der Konsole nach der Definition von $$ suche, bekomme ich:
Und für $ bekomme ich:
Welche Art von Funktionen kann ich für ein $$ -Objekt ausführen, das ich nicht wirklich mit einem jQuery ( $ ) -Objekt ausführen kann?
Da $$ nur ein Wrapper für querySelectorAll ist, können Sie alle gültigen Selektoren übergeben.
"Welche Art von Funktionen kann ich für ein $$ -Objekt ausführen, das ich nicht wirklich mit einem jQuery ($) -Objekt ausführen kann?"
Zunächst ist $$ kein Objekt wie jQuery. It ist ein Objekt, aber es ist nur ein einfaches Funktionsobjekt, das ein Wrapper (Verknüpfung) für document.querySelectorAll ist. Es gibt NodeList der gefundenen Elemente zurück.
Die einzige Sache, die unterstützt wird, die Sizzle nicht ausdrücklich unterstützt, ist meines Wissens :nth-of-type .
(Sizzle gibt standardmäßig qsa vor, wenn Sie einen gültigen Selektor angeben, sodass Sie nth-of-type an die jQuery-Funktion in Browsern übergeben können, die auch qsa unterstützen.)
Bei Sizzle gibt es mehrere Selektoren, die nicht von querySelectorAll unterstützt werden, sodass Sie mit jQuery / Sizzle technisch mehr erreichen können.
Dazu gehören:
:eq() :gt() :lt() :first :last :not() (Wenn Sie mehrere Selektoren angeben. Einfache :not() -Werte werden in qsa unterstützt.)
:animated :input :button :checkbox :even :odd :has() :image :password :radio :reset :selected :submit :text :visible ... um einige mehrere zu nennen.
Denken Sie daran, dass Sizzle zuerst versucht, querySelectorAll zu verwenden. Wenn Sie einen proprietären Selektor übergeben haben, wird standardmäßig Sizzles eigene Engine verwendet.
Da qsa normalerweise schneller ist als Sizzle, kann es ratsam sein, Alternativen zu den oben aufgeführten proprietären Selektoren zu berücksichtigen, um die Leistung zu verbessern.
Beachten Sie auch, dass Webkit nicht für $$ anywhere außer in der Konsole definiert ist. Die Verknüpfung $$ ist in Ihren Skripten nur verfügbar, wenn Sie sie verfügbar machen.
$$ ist, wie Sie sagten, webkit-spezifisch und sollte nur wirklich in der Konsole verwendet werden. Es hat sehr ähnliche Selektoren wie jQuery, mit dem Unterschied, dass es ein Array von DOM-Knoten zurückgibt, während jQuery ein jQuery zurückgibt Array
Diese beiden sind identisch:
%Vor% jQuery-Selektoren sind tatsächlich ein bisschen leistungsfähiger, da sie Selektoren hinzufügen, die nicht im Dom existieren, wie :checkbox , :contains , etc.
Referenz: JQuery-Selektoren
WebKit definiert $$ und $ standardmäßig als Kurzbezüge auf document.querySelectorAll . Wenn jQuery geladen wird, ersetzt es den Wert von $ durch die jQuery-Funktion. jQuery behält auch den ursprünglichen $ -Wert bei, wenn Sie ihn benötigen. WebKit tut dies, um eine konsistente API für die Abfrage des DOM einzuführen, unabhängig davon, ob Sie jQuery verwenden oder nicht.
Der große Unterschied ist, dass das Ergebnis von querySelectorAll ein Array von DOM-Elementen ist (eine NodeList - danke @lonesomeday), während jQuery's das jQuery-Objekt ist.
Wenn Sie auf die Seite mit Chrome-Entwicklertools gehen, sieht es so aus, als würden die Entwicklerwerkzeuge von Chrome Die Befehlszeilen-API von Firebug (was bedeutet, dass Firebug auch $$ unterstützt).
Die Dokumentation für $$ lautet:
$$ (Selektor)
Liefert ein Array von Elemente, die dem angegebenen CSS entsprechen Selektor.
Dies entspricht in etwa jQuery(selector) , wobei selector ein CSS-Selektor ist und die Rückgabetypen offensichtlich anders sind. Kurz gesagt, es gibt wahrscheinlich nichts, was Sie speziell mit $$ tun können, aber wenn Sie über die Befehlszeilen-API von Firebug schauen, sieht es so aus, als gäbe es einige nützliche Funktionen (besonders wenn jQuery nicht auf der Seite verfügbar ist) / p>
Hier ist mein Teil. Bei der Recherche habe ich das von Safari docs Debugging your WebSite bekommen
Der Abschnitt Die Befehlszeilen-API sagt dies.
Zusätzlich zum üblichen JavaScript Methoden und die Funktionen und Variablen definiert in Ihrem Skript, Sie kann eine Firebug-Befehlszeile eingeben APIs interaktiv an der Konsole. Die folgenden Befehle werden unterstützt interaktiv:
$ 0- $ 4
Variablen, die das enthalten aktuelle und vorherige drei ausgewählt Knoten im Web Inspector.$ (id)
Gibt das Element mit dem zurück angegebene ID. Ähnlich zu getElementById ().$$ (Selektor)
Gibt das Array von zurück Elemente, die dem angegebenen CSS entsprechen Wähler. Ähnlich wie querySelectorAll.$ x (xpfad)
Gibt das Array von zurück Elemente, die dem angegebenen XPath entsprechen Ausdruck.
Wie Ihre Frage zeigt, ist $$ ein Wrapper um document.querySelectorAll . Dies bedeutet, dass es dieselben Optionen hat, wenn Sie es aufrufen und dasselbe zurückgibt.
Die Unterschiede zu $ (jQuery):
$$ unterstützt CSS-Selektoren, die vom Browser unterstützt werden. $ verwendet querySelectorAll , wenn es möglich ist, aber es unterstützt auch einige benutzerdefinierte Erweiterungen (z. B. :has ). Diese sind nicht verfügbar mit $$ . $$ gibt eine statische NodeList zurück. Dies ist keine besonders nützliche Kreatur. Es verhält sich ein wenig wie ein Array (es hat eine length -Eigenschaft und Sie können auf seine Mitglieder mit [0] etc zugreifen), aber keine der normalen Array-Methoden wird verfügbar sein. jQuery wird geschrieben, um ein Objekt bereitzustellen, das die gefundenen Elemente umschließt, und es gibt viele bequeme Methoden. Keine davon wird im Ergebnis von $$ . $$ wird die schnellste Option sein, so ziemlich immer. $ wird fast immer langsamer sein und wird oft viel langsamer sein. Beachten Sie, dass die Chrome-Konsole das Ergebnis von $ und das Ergebnis von $$ so anzeigt, als wären sie Arrays. Weder ist es; Sie werden nur wie Arrays angezeigt, weil dies eine einfache Möglichkeit ist, sie zu konzeptionieren. $$ gibt ein NodeList , $ ein benutzerdefiniertes Objekt zurück.
Tags und Links javascript dollar-sign