Uncommon selectores jQuery

Los selectores son de vital importancia. La mayoría de los métodos de jQuery requieren algún tipo de selección de elementos para ser de alguna utilidad. Por ejemplo, adjuntando un hacer clic evento a un botón requiere que seleccione el botón primero. 

Dado que los selectores de jQuery comunes se basan en los selectores de CSS existentes, es posible que esté bien versado en ellos. Sin embargo, también hay algunos selectores que no se utilizan tanto. En este tutorial, me centraré en estos selectores menos conocidos pero importantes.

Todo Selector (*)

Este selector se llama correctamente selector universal porque selecciona todos los elementos del documento, incluido el , , > o  etiquetas Esta demo debería ilustrar mi punto..

$ ("section *") // Selecciona todos los descendientes $ ("section> *") // Selecciona todos los descendientes directos $ ("section> *> *") // Selecciona todos los descendientes de segundo nivel $ ("section> *> * a ") // Selecciona enlaces de 3er nivel

Este selector es extremadamente lento si se usa en combinación con otros elementos. Sin embargo, todo depende de cómo se usa el selector y en qué navegador se ejecuta. En Firefox, $ ("# selector> *"). find ("li") es más lento que $ ("# selector> ul"). find ("li"). Curiosamente, Chrome ejecuta  $ ("# selector> *"). find ("li") Un poco más rápido. Todos los navegadores ejecutan $ ("# selector *"). find ("li") más lentamente que $ ("# selector ul"). find ("li"). Le sugiero que compare el rendimiento antes de usar este selector. 


Aquí hay una demostración que compara la velocidad de ejecución de todos los selectores..

Selector animado (: animado)

Puedes usar el :animado Selector para seleccionar todos los elementos cuya animación aún está en progreso cuando se ejecuta este selector. El único problema es que solo seleccionará elementos que fueron animados usando jQuery. Este selector es una extensión de jQuery y no se beneficia del aumento de rendimiento que viene con el nativo querySelectorAll () método. 

Además, no puedes detectar animaciones CSS usando jQuery. Sin embargo, puede detectar cuándo finaliza la animación utilizando el animación evento.

Echa un vistazo a la siguiente demostración..

En la demo de arriba, solo lo extraño. div Los elementos son animados antes de ejecutarse. $ (": animated"). css ("background", "# 6F9");. Como resultado, solo aquellos div Los elementos cambian a verde. Justo después de eso, llamamos a la función animar en el resto de la div elementos. Si haces clic en el botón ahora todo div los elementos deben volverse verdes.

Selector de atributo no igual ([attr! = "Valor"])

Los selectores de atributos comunes generalmente detectan si existe un atributo con un nombre o valor dado. Por otro lado, la [attr! = "valor"]  El selector seleccionará todos los elementos que no tienen el atributo especificado o donde el atributo existe pero no es igual a un valor particular. Es equivalente a : no ([attr = "valor"]). diferente a [attr = "valor"] , [attr! = "valor"] no es parte de la especificación CSS. Como resultado, utilizando $ ("css-selector"). not ("[attr = 'value']") Puede mejorar el rendimiento en los navegadores modernos.. 

El siguiente fragmento agrega un desajuste clase para todos li elementos cuyos categoría de datos atributo no es igual a css. Esto puede ser útil durante la depuración o el establecimiento del valor de atributo correcto utilizando JavaScript.

$ ("li [data-category! = 'css']"). each (function () $ (this) .addClass ("discordancia"); // Agrega una clase de discordancia a los selectores filtrados. $ (". no coincidencia "). attr (" categoría de datos ", attributeValue); // Establezca el valor de atributo correcto);

En la demostración, repaso dos listas y corrijo el valor de los atributos de categoría de los elementos.

Contiene Selector (: contiene (texto))

Este selector se utiliza para seleccionar todos los elementos que contienen la cadena especificada. La cadena coincidente puede estar directamente dentro del elemento en cuestión o dentro de cualquiera de sus descendientes. 

El siguiente ejemplo debería ayudarlo a comprender mejor este selector. Agregaremos un fondo amarillo a todas las apariciones de la frase. Lorem Ipsum.

Comencemos con el marcado:

 
Lorem Ipsum es simplemente un texto de relleno de la industria de impresión y tipografía. Lorem Ipsum ha sido el texto ficticio estándar de la industria desde la década de 1500, cuando una impresora desconocida tomó una galera de tipos y la revolvió para hacer un libro de muestras tipo. Ha sobrevivido no solo cinco siglos, sino también el salto a la tipografía electrónica, permaneciendo esencialmente sin cambios..
 
Se popularizó en la década de 1960 con el lanzamiento de las hojas de Letraset que contenían pasajes de Lorem Ipsum y, más recientemente, con un software de edición de escritorio como Aldus PageMaker, que incluye versiones de Lorem Ipsum.
 Lorem Ipsum Wikipedia Enlace 
 
 
Esta lorem ipsum no debe ser resaltado.
 
 
 
Una lista de Lorem Ipsum
 
Más elementos aquí
 

Observa que la frase Lorem Ipsum Ocurre en siete lugares diferentes. En una de estas instancias, he utilizado deliberadamente minúsculas para demostrar que la coincidencia distingue entre mayúsculas y minúsculas. 

Aquí está el código JavaScript para resaltar todas las coincidencias: 

$ ("section: contiene ('Lorem Ipsum')"). each (function () $ (this) .html ($ (this) .html (). replace (/ Lorem Ipsum / g, "Lorem Ipsum")););

Las comillas alrededor de la cadena son opcionales. Esto implica que ambos $ ("sección: contiene ('Lorem Ipsum')") y $ ("sección: contiene (Lorem Ipsum)") Será válido en el fragmento de arriba. Solo estoy apuntando al elemento de sección, por lo que el texto de Lorem Ipsum dentro de los elementos de la lista debe permanecer sin cambios. Por otra parte, debido al caso no coincidente, el texto dentro de la segunda sección El elemento tampoco debe estar resaltado. Como puede ver en esta demostración, esto es exactamente lo que sucede..

Tiene Selector (: tiene (selector))

Este selector seleccionará todos los elementos que contengan al menos un elemento que coincida con un selector dado. El selector que debe combinarse no tiene que ser un elemento secundario directo. :tiene() no es parte de la especificación CSS. En los navegadores modernos, debes usar $ ("pure-css-selector"). tiene (selector) en lugar de $ ("pure-css-selector: has (selector)") para mejorar el rendimiento. 

Una posible aplicación de este selector es la manipulación de elementos que contienen un elemento específico dentro de ellos. En nuestro ejemplo, cambiaré el color de todos los elementos de la lista que contienen un enlace dentro de ellos..

Este es el marcado para la demo:

 
Habitante pellentesco morbi tristique senectus.
 
Habitante pellentesco morbi tristique senectus.
 (... más elementos de la lista aquí ...) 
Habitante pellentesco morbi tristique senectus.
 
Habitante pellentesco morbi tristique senectus.
 

Aquí está el código JavaScript para cambiar el color de los elementos de la lista:

$ ("li: has (a)"). each (función (índice) $ (this) .css ("color", "carmesí"););

La lógica detrás de este código es bastante sencilla. Recorro todos los elementos de la lista que contienen un enlace y configuro su color como carmesí. También puede manipular el texto dentro de los elementos de la lista o eliminarlos del DOM. Estoy seguro de que este selector se puede utilizar en muchas otras situaciones. Echa un vistazo a una versión en vivo de este código en CodePen.

Selectores basados ​​en índices

Además de selectores de CSS como : nth-child (), jQuery también tiene su propio conjunto de selectores basados ​​en índices. Estos selectores son : eq (index), : lt (index), y : gt (índice). A diferencia de los selectores basados ​​en CSS, estos selectores utilizan indización basada en cero. Esto implica que mientras : nth-child (1) seleccionará el primer niño, : eq (1) Seleccionará el segundo hijo. Para seleccionar el primer hijo que tendrás que usar : eq (0). 

Estos selectores también pueden aceptar valores negativos. Cuando se especifican valores negativos, el conteo se realiza hacia atrás a partir del último elemento. 

: lt (index) selecciona todos los elementos que están en un índice menor que el valor especificado. Para seleccionar los tres primeros elementos, utilizarás : lt (3). Esto se debe a que los primeros tres elementos tendrán valores de índice 0, 1 y 2 respectivamente. El uso de un índice negativo seleccionará todos los valores antes del elemento al que llegamos después de contar hacia atrás. similar, : gt (índice) Selecciona todos los elementos con índice mayor que el valor especificado..

: lt (4) // Selecciona los primeros cuatro elementos: lt (-4) // Selecciona todos los elementos además del último 4: gt (4) // Selecciona todos los elementos además del primero 5: gt (-4) // Selecciona los últimos tres elementos : gt (-1) // Selecciona Nada: eq (4) // Selecciona quinto elemento: eq (-4) // Selecciona cuarto elemento del último

Intente hacer clic en varios botones en la demostración para comprender mejor los selectores de índice.

Selectores de formulario

jQuery define una gran cantidad de selectores para una fácil selección de elementos de formulario. Por ejemplo, el :botón selector seleccionará todos los elementos de botón así como los elementos con botón de tipo. similar, :caja seleccionará todos los elementos de entrada con el tipo de casilla de verificación. Hay selectores definidos para casi todos los elementos de entrada. Considere el siguiente formulario:

 
 Entrada de texto 
   
 
 
 Caja:     
 

He creado dos elementos de texto aquí y cuatro casillas de verificación. El formulario es bastante básico, pero debería darle una idea de cómo funcionan los selectores de formularios. Contaremos el número de elementos de texto usando el :texto Selector y también actualizar el texto en la primera entrada de texto.. 

var textCount = $ (": text"). length; $ (". elementos de texto"). texto ('Entradas de texto:' + textCount); $ (": texto"). eq (0) .val ('¡Agregado programáticamente!');

yo suelo :texto para seleccionar todas las entradas de texto y luego el método de longitud para calcular su número. En la tercera afirmación, utilizo lo anteriormente expuesto. : eq () Selector para acceder al primer elemento y posteriormente establecer su valor.. 

Ten en cuenta que a partir de jQuery 1.5.2, :texto devoluciones cierto para elementos que no tienen ningún tipo de atributo especificado.

Echa un vistazo a la demo..

Selector de encabezado (: encabezado)

Si alguna vez desea seleccionar todos los elementos de encabezado en una página web, puede utilizar el $ (": encabezado") versión en lugar de la verbosa $ ("h1 h2 h3 h4 h5 h6") selector. Este selector no es parte de la especificación de CSS. Como resultado, se podría lograr un mejor rendimiento utilizando primero un selector de CSS puro y luego utilizando .filtro (": cabecera"). 

Por ejemplo, supongamos que hay un artículo Elemento en una página web y tiene tres encabezados diferentes. Ahora, podrías usar $ ("articulo: cabecera") en lugar de $ ("artículo h1, artículo h2, artículo h3") para ser breve. Para hacerlo aún más rápido, podrías usar $ ("artículo"). filtro (": encabezado"). De esta manera tienes lo mejor de ambos mundos..

Para numerar todos los elementos del encabezado, puedes usar el siguiente código.

$ ("article: header"). each (función (índice) $ (this) .text ((index + 1) + ":" + $ (this) .text ()); // Agrega números a los encabezados );

Prueba esta demo acompañante.

Pensamientos finales

En este tutorial, hablé de los selectores poco comunes que pueden surgir al usar jQuery. Si bien la mayoría de estos selectores tienen alternativas que puede usar, todavía es bueno saber que estos selectores existen.. 

Espero que hayas aprendido algo nuevo en este tutorial. Si tiene alguna pregunta o sugerencia, por favor haga un comentario..