Zusammenfassung der Verwendung des querySelector-Selektors in jQuery

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung des jQuery-Selektors querySelector vorgestellt. Freunde, die sie benötigen, können sich auf

Einführung

HTML5 New to Web API beziehen Zwei Methoden, document.querySelector und document.querySelectorAll, werden eingeführt, um Elemente bequemer aus dem DOM auszuwählen. Ihre Funktionen ähneln den Selektoren von jQuery. Dies macht das Schreiben von nativem JavaScript-Code viel einfacher.
Verwendung

Die beiden Methoden verwenden eine ähnliche Syntax. Sie erhalten beide einen String-Parameter, der eine zulässige CSS-Auswahlsyntax sein muss.

Der Code lautet wie folgt:

element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');

Die Parameterselektoren können mehrere CSS-Selektoren enthalten, getrennt durch Kommas.

Der Code lautet wie folgt:

element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');

Mit diesen beiden Methoden können keine Elemente mit dem Status Pseudoklasse gefunden werden, wie etwa querySelector(':hover ') führt nicht zu den erwarteten Ergebnissen.

querySelector

Der Code lautet wie folgt:

element = document.querySelector('p#container');//返回id为container的首个p
element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素

querySelectorAll

Diese Methode gibt zurück Bei allen Elementen, die die Bedingungen erfüllen, ist das Ergebnis eine nodeList-Sammlung. Die Suchregeln sind die gleichen wie zuvor beschrieben.

elements = document.querySelectorAll('p.foo');//Alle p mit foo-Klassenstil zurückgeben
Es ist zu beachten, dass die Elemente in der zurückgegebenen nodeList-Sammlung nicht in Echtzeit vorliegen.

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung des querySelector-Selektors in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!