Qual è lo scopo dei due punti iniziali in un selettore jQuery?

Ho iniziato a utilizzare il toolkit Wijmo e mi sono imbattuto in alcuni selettori di esempio simili a questo nelle loro pagine di documentazione:

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

Avrei scritto il mio così:

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

Questi fanno lo stesso o c'è qualcosa che mi manca?

Nota che ci sono due differenze sopra: il primo selettore è preceduto da due punti e ha virgolette per il tipo di input.

jquery jquery-selectors

— Morten Mertner
fonte

Uno è il :inputselettore specializzato , mentre l'altro è un Elementselettore generico .

— mellamokb

Risposte:

:inputè un'estensione jQuery mentre inputè un selettore CSS.

textarea, button, Ed selectelementi sarebbero abbinati dal primo, ma non la seconda.

Quest'ultimo è più veloce, quindi usalo per il tuo radioesempio specifico . Da usare :inputquando vuoi "tutti gli elementi del modulo" anche se non sono strettamente <input>tag. Anche in questo caso, la raccomandazione è di utilizzare prima un selettore CSS standard, quindi utilizzarlo .filter(':input')su quel set.

Poiché: input è un'estensione jQuery e non fa parte della specifica CSS, le query che utilizzano: input non possono trarre vantaggio dall'aumento delle prestazioni fornito dal metodo querySelectorAll () DOM nativo. Per ottenere le migliori prestazioni quando si utilizza: input per selezionare gli elementi, selezionare prima gli elementi utilizzando un selettore CSS puro, quindi utilizzare .filter (": input").

Nella fonte 1.7.2, il filtro: input verifica un'espressione regolare rispetto a nodeName:

input: function( elem ) {
            return (/input|select|textarea|button/i).test( elem.nodeName );
},

— David Ruttka
fonte

Ha senso, grazie! E le virgolette sono completamente opzionali?

— Morten Mertner

Onestamente, non ho mai usato [type=]con :input, perché se sto cercando un tipo specifico, utilizzando :inputper ottenere tutti loro prima vista sembra la strada lunga. Per i selettori CSS puri, la mia comprensione è che le virgolette sono standard, ma i browser perdonano. Puoi testarlo rapidamente con / senza qui reference.sitepoint.com/css/css3attributeselectors/demo

— David Ruttka

quindi $ (": verificato") fornisce le caselle spuntate .. è anche questa estensione jquery?

— Vishal Sharma

@David Ruttka: "i browser perdonano" si applica solo all'HTML e ai CSS in modalità stranezze. Questa affermazione non si applica ai CSS in modalità standard. Le virgolette possono essere legalmente omesse in alcuni casi.

— BoltClock

possiamo avere un esempio di first select the elements using a pure CSS selector, then use .filter(":input").?

— Poutrathor

il $("input")selettore sceglierà solo gli elementi del tipo input

mentre il $(":input")selettore catturerà tutti gli elementi di input (come textarea, select, input ecc ...)

per ulteriori informazioni, vai alla documentazione ufficiale di jQuery sul :inputselettore su:

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

— Yaron U.
fonte

Il :inputselettore seleziona fondamentalmente tutti i formcontrolli (input, textarea, select e button elements) dove come inputselector seleziona tutti gli elementi in base al nome del tag input.

Poiché il pulsante di opzione è un formelemento e utilizza anche i inputtag, quindi entrambi possono essere utilizzati per selezionare il pulsante di opzione. Tuttavia, entrambi gli approcci differiscono nel modo in cui trovano gli elementi e quindi ciascuno ha diversi vantaggi in termini di prestazioni.

— ShankarSangoli
fonte