Introducción a los selectores JQuery y sus t
Cuando trabaje con JavaScript, a menudo se encontrará en una situación en la que necesita encontrar y modificar parte del contenido de la página. En estos casos, deberá utilizar el soporte del selector en JQuery. JQuery hace que sea bastante fácil encontrar elementos de la página en función de sus tipos, valores, atributos, etc. Estos elementos se basan en selectores de CSS y una vez que haya tenido algo de práctica, verá que encontrar elementos en las páginas es un juego de niños. Dependiendo de su uso, podemos clasificar diferentes tipos de selectores JQuery en diferentes tipos. Echemos un vistazo a algunos de los selectores más utilizados.
Usando un selector
La siguiente es una sintaxis de un Selector JQuery:
- $ (Selector) .methodname ():
Si lo necesita, puede encadenar múltiples selectores agregando un "." Entre los métodos.
- $ (selector) .method1 (). method2 (). method3 ();
Tipos de selector en JQuery
Aquí están los diferentes tipos de Selector en JQuery
1) Selectores básicos de JQuery
Podemos seleccionar elementos de página usando su ID, Clase o su nombre de etiqueta. Si es necesario, también se puede usar una combinación de estos. Los siguientes son algunos selectores básicos:
- : selector de encabezado: este es un tipo de selector básico que nos permite encontrar elementos con sus encabezados HTML. Para hacer esto, usamos el selector detallado $ (“sección h1, sección h2, sección h3”) o también podemos usar el selector mucho más corto $ (“sección: encabezado”).
- : selector de objetivos: este selector busca los objetivos de la página o el hash del URI del documento. Por ejemplo, si el URI de la página es "https://example.com/#test". Luego, el selector $ ("h2: target") seleccionará el elemento
.
- : Selector animado: este selector se utiliza para buscar todos los elementos que tienen animación. Tenga en cuenta que para que se seleccione la animación, debe ejecutarse cuando se ejecuta el selector.
2) Selectores basados en el índice
JQuery tiene su propio conjunto de selectores basados en índices que utilizan indexación basada en cero. Los siguientes son algunos ejemplos:
- : Selector eq (k): este selector devuelve el elemento en el índice k. También admite valores de índice negativos.
- : Selector lt (k): este selector devuelve todos los elementos que tienen un índice menor que k. Al igual que arriba, también se aceptan valores negativos
- : Selector gt (n): este selector es similar a: Selector lt (k), excepto que funciona para un valor de índice mayor o igual que k.
3) Selectores de niños
Puede usar JQuery para seleccionar elementos secundarios de cualquier elemento según su tipo o índice.
- : primer hijo: este selector devolverá todos los elementos que son el primer hijo de sus padres.
- : first-of-type - Este selector JQuery se usa para seleccionar todos los elementos que son el primer hermano
- : last-child: como su nombre indica, este selector seleccionará el último hijo del padre.
- : last-of-type - Esto seleccionará a todos los hijos que sean los últimos de su tipo en un padre. Si hay más de un padre, seleccionará múltiples elementos.
- : only-of-type: podemos usar el selector de solo tipo para encontrar todos los elementos que tienen hermanos del mismo tipo en la página.
- : only-child: en situaciones en las que necesita buscar y seleccionar elementos que son el único hijo de su padre, puede usar este selector. En caso de que un padre en la página tenga más de un hijo, se ignorará.
4) Selectores de atributos
Los elementos se pueden seleccionar en función de sus atributos, los siguientes son algunos selectores de atributos comunes:
- $ (“(Atributo | = 'valor aquí')”) - El “atributo contiene un selector de prefijo” selecciona todos los elementos con atributos donde el valor es igual o comienza con la cadena dada seguida de un guión.
- $ (“(Attribute ~ = 'valuehere')”): devuelve todos los elementos con atributos donde el valor contiene una palabra determinada delimitada por espacios.
- $ (“(Atributo * = 'valuehere')”): seleccionará elementos con el valor que contiene la subcadena dada. Mientras el valor coincida, la ubicación no importará
5) Selectores de contenido
Como su nombre indica, estos selectores JQuery se utilizan para buscar y seleccionar contenido dentro de elementos.
- : contiene (texto): se utiliza para seleccionar elementos que tienen un contenido de texto específico en su interior. Una cosa a tener en cuenta al usar este selector es que la prueba aquí distingue entre mayúsculas y minúsculas.
- : has (selector): regresará con elementos que tengan al menos un elemento dentro que coincida con el selector especificado. Por ejemplo, $ (“section: has (h1)”) regresará con todas las secciones que tengan un elemento h1.
- : vacío: este selector devolverá los elementos de la página que no tienen elementos secundarios, incluidos los nodos de texto.
- : parent: este selector se utiliza para seleccionar todos los elementos de la página web que tienen al menos un nodo hijo. Puede considerarlo como un inverso al: selector JQuery vacío.
6) selectores de jerarquía
- $ (“Ancestro descendiente”): se utiliza para seleccionar todos los elementos descendientes de un padre. El descendiente en nuestro caso podría ser un hijo, un nieto, etc.
- $ ("Padre> hijo"): se utiliza en casos en los que solo necesitamos seleccionar el hijo directo de un padre específico.
- $ (“Anterior + siguiente”): en caso de que necesitemos seleccionar todos los elementos que coincidan con el selector “siguiente” y que tengan el padre “anterior”. Los elementos seleccionados también serán procesados inmediatamente por "anterior", que es el hermano.
7) Selectores de visibilidad
Dos selectores: visible y: oculto también están disponibles en JQuery. Estos se pueden usar para encontrar elementos visibles u ocultos en la página web respectivamente. Cualquier elemento en la página web se considera oculto si:
- Su visualización correctamente está configurada en none.
- Su ancho y alto se definen cero.
- Tiene type = hidden mencionado en el elemento de formulario.
- Cualquier antepasado del elemento ya está oculto.
Tenga en cuenta que incluso si un elemento tiene la opacidad configurada como Cero, todavía se considerará visible porque todavía ocupará espacio.
8) Selectores de forma
Para ahorrar tiempo y molestias, JQuery tiene versiones clasificadoras de selectores para elementos de entrada de formularios web.
Por ejemplo, mientras $ (“botón, entrada (tipo = 'botón')”) funcionará para seleccionar el botón en la página, podemos usar $ (“: botón”) para hacerlo rápidamente.
Del mismo modo, podemos usar $ (": radio") para seleccionar el botón de radio.
Conclusión - Tipos de selector en JQuery
Los selectores son una de las características importantes de JQuery, la selección en JavaScript no es tan intuitiva y robusta con la adición de selectores a través de JQuery, la programación para la web se ha vuelto más fácil.
Artículos recomendados
Esta es una guía de Tipos de Selector en JQuery. Aquí discutimos los diferentes tipos de selectores JQuery con la sintaxis. También puede echar un vistazo a los siguientes artículos para obtener más información:
- Métodos jQuery
- Alternativas de jQuery
- Usos de JQuery
- ¿Qué puede hacer Javascript?
- jQuery querySelector
- Guía de ejemplos de la barra de progreso de JQuery