Was ist der Zweck eines führenden Doppelpunkts in einem jQuery-Selektor?

83

Ich habe angefangen, das Wijmo-Toolkit zu verwenden, und bin auf ihren Dokumentationsseiten auf einige ähnliche Beispielselektoren gestoßen:

$(":input[type='radio']").wijradio();

Ich hätte meine so geschrieben:

$('input[type=radio]').wijradio();

Tun diese dasselbe oder fehlt mir etwas?

Beachten Sie, dass es oben zwei Unterschiede gibt: Dem ersten Selektor wird ein Doppelpunkt vorangestellt und Anführungszeichen für den Eingabetyp.

jquery jquery-selectors Morten Mertner
quelle
4
Einer ist der spezialisierte :inputSelektor, während der andere ein generischer ElementSelektor ist.
Mellamokb

Antworten:

85

:inputist eine jQuery-Erweiterung und inputein CSS-Selektor.

textarea, buttonUnd selectwürden Elemente der früheren, aber nicht die letztere angepasst werden.

Letzteres ist schneller, verwenden Sie es also für Ihr spezielles radioBeispiel. Verwenden :inputSie diese Option, wenn Sie "alle Formularelemente" möchten, auch wenn es sich nicht ausschließlich um <input>Tags handelt. Selbst in diesem Fall wird empfohlen, zuerst einen Standard-CSS-Selektor und dann .filter(':input')diesen Satz zu verwenden.

Da: input eine jQuery-Erweiterung ist und nicht Teil der CSS-Spezifikation ist, können Abfragen mit: input die Leistungssteigerung der nativen DOM-Methode querySelectorAll () nicht nutzen. Um die beste Leistung bei Verwendung von: input zur Auswahl von Elementen zu erzielen, wählen Sie die Elemente zuerst mit einem reinen CSS-Selektor aus und verwenden Sie dann .filter (": input").

In der Quelle 1.7.2 testet der Eingangsfilter: einen regulären Ausdruck gegen den Knotennamen:

input: function( elem ) {
            return (/input|select|textarea|button/i).test( elem.nodeName );
},
David Ruttka
quelle
Das macht Sinn, danke! Und die Typ-Anführungszeichen sind völlig optional?
Morten Mertner
1
Ehrlich gesagt habe ich nie [type=]mit verwendet, :inputdenn wenn ich nach einem bestimmten Typ suche, :inputscheint es weit herum zu sein, alle zuerst zu bekommen. Ich verstehe, dass Anführungszeichen für reine CSS-Selektoren Standard sind, Browser jedoch verzeihen. Sie können es schnell mit / ohne hier Referenz.sitepoint.com/css/css3attributeselectors/demo
David Ruttka
$ (": check") gibt also Häkchen an. Ist dies auch eine jquery-Erweiterung?
Vishal Sharma
@ David Ruttka: "Browser vergeben" gilt nur für HTML und für CSS im Mackenmodus. Diese Aussage gilt nicht für CSS im Standardmodus. Zitate können in einigen Fällen rechtlich weggelassen werden.
BoltClock
Können wir ein Beispiel dafür haben first select the elements using a pure CSS selector, then use .filter(":input").?
Poutrathor
17

Der $("input")Selektor wählt nur Elemente der Typeneingabe aus

während der $(":input")Selektor alle Eingabeelemente abfängt (wie z. B. Textbereich, Auswahl, Eingabe usw.)

Weitere Informationen finden Sie in der offiziellen jQuery-Dokumentation zum :inputSelektor unter:

http://api.jquery.com/input-selector/

Yaron U.
quelle
6

Der :inputSelektor wählt grundsätzlich alle formSteuerelemente (Eingabe-, Textbereichs-, Auswahl- und Schaltflächenelemente) aus, wobei der inputSelektor alle Elemente anhand des Tag-Namens auswählt input.

Da das Optionsfeld ein formElement ist und auch ein inputTag verwendet, können beide zur Auswahl des Optionsfelds verwendet werden. Beide Ansätze unterscheiden sich jedoch in der Art und Weise, wie sie die Elemente finden, und haben daher jeweils unterschiedliche Leistungsvorteile.

ShankarSangoli
quelle