¿Cuál es el propósito de los dos puntos iniciales en un selector de jQuery?

84

Empecé a usar el kit de herramientas de Wijmo y encontré bastantes selectores de ejemplo similares a este en sus páginas de documentación:

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

Hubiera escrito el mío así:

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

¿Estos hacen lo mismo o hay algo que me falta?

Tenga en cuenta que hay dos diferencias anteriores: el primer selector tiene como prefijo dos puntos y comillas para el tipo de entrada.

jquery jquery-selectors Morten Mertner
fuente
4
Uno es el :inputselector especializado , mientras que el otro es un Elementselector genérico .
mellamokb

Respuestas:

85

:inputes una extensión de jQuery mientras que inputes un selector de CSS.

textarea, buttonY selectlos elementos se corresponden con el primero, pero no el último.

Este último es más rápido, así que utilícelo para su radioejemplo específico . Úselo :inputcuando desee "todos los elementos del formulario", incluso si no son estrictamente <input>etiquetas. Incluso en ese caso, la recomendación es usar primero un selector CSS estándar y luego usarlo .filter(':input')en ese conjunto.

Debido a que: input es una extensión jQuery y no forma parte de la especificación CSS, las consultas que usan: input no pueden aprovechar el aumento de rendimiento proporcionado por el método DOM querySelectorAll () nativo. Para lograr el mejor rendimiento al usar: input para seleccionar elementos, primero seleccione los elementos usando un selector de CSS puro, luego use .filter (": input").

En la fuente 1.7.2, el filtro de entrada prueba una expresión regular con el nombre de nodo:

input: function( elem ) {
            return (/input|select|textarea|button/i).test( elem.nodeName );
},
David Ruttka
fuente
¡Eso tiene sentido, gracias! ¿Y las comillas son completamente opcionales?
Morten Mertner
1
Honestamente, nunca he usado [type=]con :inputporque si estoy buscando un tipo específico, usar :inputpara obtenerlos todos primero parece el camino más largo. Para los selectores de CSS puro, tengo entendido que las comillas son estándar, pero los navegadores son indulgentes. Puede probarlo rápidamente con / sin aquí reference.sitepoint.com/css/css3attributeselectors/demo
David Ruttka
por lo que $ (": comprobado") da casillas marcadas ... ¿es esto también una extensión jquery?
Vishal Sharma
@David Ruttka: "los navegadores son indulgentes" solo se aplica a HTML y CSS en modo peculiar. Esa declaración no se aplica a CSS en modo estándar. Las citas se pueden omitir legalmente en algunos casos.
BoltClock
¿Podemos tener un ejemplo de first select the elements using a pure CSS selector, then use .filter(":input").?
Poutrathor
17

el $("input")selector elegirá solo elementos del tipo input

mientras que el $(":input")selector capturará todos los elementos de entrada (como textarea, select, input, etc.)

para obtener más información, consulte la documentación oficial de jQuery sobre el :inputselector en:

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

Yaron U.
fuente
6

El :inputselector básicamente selecciona todos los formcontroles (entrada, área de texto, elementos de selección y botón) mientras que el inputselector selecciona todos los elementos por nombre de etiqueta input.

Dado que el botón de opción es un formelemento y también usa una inputetiqueta, ambos se pueden usar para seleccionar el botón de opción. Sin embargo, ambos enfoques difieren en la forma en que encuentran los elementos y, por lo tanto, cada uno tiene diferentes beneficios de rendimiento.

ShankarSangoli
fuente