Jaki jest cel dwukropka wiodącego w selektorze jQuery?

84

Zacząłem używać zestawu narzędzi Wijmo i natknąłem się na kilka przykładowych selektorów podobnych do tego na ich stronach z dokumentacją:

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

Mój napisałbym tak:

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

Czy to działa tak samo, czy czegoś mi brakuje?

Zauważ, że powyżej są dwie różnice: pierwszy selektor jest poprzedzony dwukropkiem i zawiera cudzysłowy dla typu danych wejściowych.

jquery jquery-selectors Morten Mertner
źródło
4
Jeden to :inputselektor specjalistyczny , a drugi to Elementselektor ogólny .
mellamokb

Odpowiedzi:

85

:inputjest rozszerzeniem jQuery, podczas gdy inputjest selektorem CSS.

textarea, buttona selectelementy zostaną dopasowane przez pierwszy, ale nie przez drugi.

To drugie jest szybsze, więc użyj go w swoim konkretnym radioprzykładzie. Użyj, :inputgdy chcesz mieć „wszystkie elementy formularza”, nawet jeśli nie są one ściśle <input>tagami. Nawet w takim przypadku zaleca się, aby najpierw użyć standardowego selektora CSS, a następnie użyć .filter(':input')tego zestawu.

Ponieważ: input jest rozszerzeniem jQuery i nie jest częścią specyfikacji CSS, zapytania używające: input nie mogą korzystać ze zwiększenia wydajności zapewnianego przez natywną metodę DOM querySelectorAll (). Aby uzyskać najlepszą wydajność, używając: input do wybierania elementów, najpierw wybierz elementy za pomocą czystego selektora CSS, a następnie użyj .filter (": input").

W źródle 1.7.2 filtr: input testuje wyrażenie regularne w odniesieniu do nodeName:

input: function( elem ) {
            return (/input|select|textarea|button/i).test( elem.nodeName );
},
David Ruttka
źródło
To ma sens, dzięki! A cudzysłowy typu są całkowicie opcjonalne?
Morten Mertner
1
Szczerze mówiąc, nigdy nie korzystałem [type=]z, :inputponieważ jeśli szukam konkretnego typu, użycie :inputich wszystkich wydaje się być dalekie. W przypadku czystych selektorów CSS rozumiem, że cudzysłowy są standardowe, ale przeglądarki wybaczają. Możesz to szybko przetestować z / bez tutaj reference.sitepoint.com/css/css3attributeselectors/demo
David Ruttka
więc $ (": zaznaczone") daje zaznaczone pola .. czy to także rozszerzenie jquery?
Vishal Sharma
@David Ruttka: „przeglądarki wybaczają” dotyczy tylko HTML i CSS w trybie dziwactw. To stwierdzenie nie dotyczy CSS w trybie standardowym. W niektórych przypadkach cytaty mogą zostać pominięte.
BoltClock
czy możemy mieć przykład first select the elements using a pure CSS selector, then use .filter(":input").?
Poutrathor
17

$("input")selektor będzie wybierać tylko elementy typu wejścia

podczas gdy $(":input")selektor przechwyci wszystkie elementy wejściowe (takie jak textarea, select, input etc ...)

Aby uzyskać więcej informacji, przejdź do oficjalnej dokumentacji jQuery na temat :inputselektora pod adresem:

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

Yaron U.
źródło
6

:inputSelektor zasadzie wybiera wszystkie formkontrolki (wejście, textarea, wybierz i elementy przycisk), gdzie jako inputwybiera selektora wszystkie elementy według nazwy znacznika input.

Ponieważ przycisk radiowy jest formelementem, a także używa inputtagu, więc oba mogą być używane do wybierania przycisku opcji. Jednak oba podejścia różnią się sposobem znajdowania elementów, a zatem każde z nich ma inne korzyści w zakresie wydajności.

ShankarSangoli
źródło