$ Variable in Chrome?

Question

Ich arbeitete mit den Entwicklertools von Google Chrome auf einer Seite ohne jQuery (oder einer anderen Bibliothek, die das $-Zeichen als Verknüpfung verwendet). Wenn ich $ von der Konsole überprüft (nur um es in der Eingabe und Enter zu drücken), bekam ich diese:

$ 
function() { [native code] } 

Also, Chrom hat eine native Funktion, die von $ verwiesen werden kann. Nur Chrom scheint diese zu haben und ich kann nicht über window['$'] noch über document['$'] oder this['$'] darauf zugreifen.

Ich konnte nicht herausfinden, was diese Funktion ist. Weißt du, was es tut und vielleicht ein paar Hintergrundinformationen dazu? Vielen Dank im Voraus!

Answer 1

Das hat sich schon seit letztem Jahr wieder geändert.

Die Devtools-Konsole bietet $ als Alias ​​für document.querySelector, zusammen mit many other things; hier ist eine Liste excerpted:

• $(selector) gibt die Referenz auf das erste DOM-Element mit dem angegebenen CSS-Selektor. Diese Funktion ist ein Alias ​​für die Funktion document.querySelector().
• $$(selector) gibt ein Array von Elementen zurück, die dem angegebenen CSS-Selektor entsprechen. Dieser Befehl entspricht dem Aufruf document.querySelectorAll().
• $_ gibt den Wert des zuletzt ausgewerteten Ausdrucks zurück.
• Die $0, $1, $2, $3 und $4 Befehle funktionieren als historischen Bezug auf die letzten fünf Elemente DOM innerhalb der Platte Elements inspizierten oder die letzten fünf JavaScript-Heap in der Panel Profiles ausgewählten Objekten.

... und eine Reihe anderer.

Beachten Sie, wie es nennt $ einen Alias ​​von document.querySelector, sagt aber $$ ist „gleichwertig“ document.querySelectorAll aufrufen. Keine scheint buchstäblich wahr zu sein; $ === document.querySelector ist false, und $$ gibt ein Array zurück, kein NodeList.

Answer 2

Ther're zwei Selektoren in Webkit-Inspektoren, die gleichen, die Mootools ein: $ und $$

Sie einige Informationen auf ihm finden können, here

Sie sind hier juste Sie im Debug zu helfen.

Answer 3

Dies ist eine der Funktionen der Chrome Developer Tools (nicht auf der Seite verfügbar). Sie können sehen (obwohl das nur besagt, dass es die Firebug console commands implementiert)

Es erhält ein Element durch seine ID.

Answer 4

https://developers.google.com/chrome-developer-tools/docs/console

Es ist nur ein schneller Zugriff auf document.getElementById.

Answer 5

Gemessen an der link to the dev tools verwendet es jetzt document.querySelector() und nicht nur getElementById().

Answer 6

Die vorhandenen Antworten sind veraltet, $ nicht ein Alias ​​für document.getElementById oder document.querySelector, aber ein Wrapper für querySelector ist. Dieser Wrapper verwendet ein optionales zweites Argument für das Element, um das untergeordnete Element abzufragen.

Diese Familie von Funktionen unter den Console: Selecting Elements dokumentiert:

Elemente auswählen

Es gibt ein paar Verknüpfungen für Elemente auswählen. Dies spart Ihnen wertvolle Zeit im Vergleich zu ihren Standardgegenstücken.

$() Gibt das erste Element zurück, das mit dem angegebenen CSS-Selektor übereinstimmt. Es ist eine Abkürzung für document.querySelector().

$$() Gibt ein Array aller Elemente zurück, die dem angegebenen CSS-Selektor entsprechen. Dies ist ein Alias ​​für document.querySelectorAll()

$x() Gibt ein Array von Elementen zurück, die der angegebenen XPath entsprechen.

---

Allerdings sind diese Werte nur die Standardwerte in der Konsole. Wenn die Seite die Datei überschreibt, indem sie etwas wie jQuery einfügt, verwendet die Konsole den Wert von der Seite selbst, und etwas wie $('p') gibt ein jQuery-Objekt statt nur das erste p-Element zurück.