Selectores de jQuery
- Página anterior Sintaxis de jQuery
- Página siguiente Eventos de jQuery
Los selectores le permiten realizar operaciones en grupos de elementos o en elementos individuales.
Selectores de jQuery
En los capítulos anteriores, mostramos algunos ejemplos sobre cómo seleccionar elementos HTML.
El punto clave es aprender cómo los selectores jQuery seleccionan de manera precisa los elementos a los que se desea aplicar efectos.
Los selectores de elemento de jQuery y los selectores de atributo permiten seleccionar elementos HTML mediante el nombre de la etiqueta, el nombre del atributo o el contenido.
Los selectores permiten que realice operaciones en grupos de elementos HTML o en un solo elemento.
En términos del DOM HTML:
Los selectores permiten que realice operaciones en grupos de elementos DOM o en un solo nodo DOM.
Selectores de elemento de jQuery
jQuery utiliza selectores CSS para seleccionar elementos HTML.
$("p") selecciona los elementos <p>.
$("p.intro") selecciona todos los elementos <p> con class="intro".
$("p#demo") selecciona todos los elementos <p> con id="demo".
Selectores de atributo de jQuery
jQuery utiliza expresiones XPath para seleccionar elementos con propiedades dadas.
$("[href]") selecciona todos los elementos con atributo href.
$("[href='#']") selecciona todos los elementos con valores de href iguales a "#".
$("[href!='#']") selecciona todos los elementos con valores de href diferentes de "#".
$("[href$='.jpg']") selecciona todos los elementos con valores de href que terminan con ".jpg".
Selectores CSS de jQuery
Los selectores CSS de jQuery se pueden usar para cambiar las propiedades CSS de los elementos HTML.
El siguiente ejemplo cambia el color de fondo de todos los elementos <p> a rojo:
Ejemplo
$("p").css("background-color","red");
Más ejemplos de selectores
| Sintaxis | Descripción |
|---|---|
| $(this) | elemento HTML actual |
| $("p") | todos los elementos <p> |
| $("p.intro") | todos los elementos <p> con class="intro" |
| $(".intro") | todos los elementos con class="intro" |
| $("#intro") | elemento con id="intro" |
| $("ul li:first") | primer elemento <li> de cada <ul> |
| $("[href$='.jpg']") | todos los atributos href que terminan con ".jpg" |
| $("div#intro .head") | todos los elementos con class="head" dentro del elemento <div> con id="intro" |
Para obtener el manual de referencia completo, por favor visite nuestro Manual de selectores jQuery.
- Página anterior Sintaxis de jQuery
- Página siguiente Eventos de jQuery
