Los selectores basicos de JQuery basados en CSS. Seleccionando un conjunto de elementos del DOM.

Como ya hemos visto anteriormente, el «$» de JQuery, es un alias que nos permite acceder al objeto jQuery.

Este objeto, realiza varias funciones:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Hoy vamos a ver qué posibilidades tenemos para seleccionar conjuntos de elementos del DOM.

Seleccionando un conjunto de elementos del DOM con JQuery.

La capacidad de selección de elementos del DOM, seguramente es la mayor fortaleza de JQuery frente a otras librerías, ya que de una forma muy sencilla y elegante (y potente) podemos ir seleccionando elementos a los cuales, después, les podemos suscribir eventos, podemos operar con ellos etc..

Para seleccionar elementos, JQuery se basa en la sintaxis de las hojas de estilo CSS y además la extiende para realizar selecciones comunes y potentes.

JQuery nos proporciona distintos mecanismos para seleccionar objetos del DOM, y los podemos resumir en:

• Selección básica con selectores CSS.
• Selecciones por medio de atributos, hijos y contenedores.
• Selecciones por medio de la posición.
• Selecciones gracias a los selectores que nos proporciona JQuery.

Selección básica con selectores CSS.

JQuery como ya he dicho, emula los selectores de las hojas de estilo CSS para poder acceder a colecciones de elementos del DOM. Estas selecciones, se pueden realizar por medio del Id del elemento, la clase CSS, el tag HTML y la herencia de los distintos elementos del DOM.

Además, todo esto podemos combinarlo, pudiendo conseguir así selecciones más eficientes y potentes (y con la misma elegancia que selecciones simples).

Vistas las posibilidades, vamos a la faena y vamos a ver esto con ejemplos, ya que es la forma más simple de comprenderlo:

• $(«#divFilmDetails»): Nos devuelve aquel elemento cuyo Id sea «divFilmDetails».
• $(«.divPhotoItem»): Nos devuelve todos los objetos del DOM cuya clase CSS sea «divPhotoItem».
• $(«a»): Nos devuelve todos los links del árbol del DOM.
• $(«body div p»): nos devuelve todos los párrafos contenidos en divs.

Como podemos ver con estos ejemplos tan simples, y con la capacidad de combinación con la que gozan los selectores, las posibilidades son casi infinitas ya que podríamos realizar selecciones como las siguientes:

• $(«div#divFilmDetails h2 span, ul li): este selector nos devolvería todos los span que sean hijos de h2 que a su vez son hijos del div cuyo Id sea divFilmDetails y nos devuelve también todos los li que encuentre.
• $(«div#divControlsForTestSelectors.clase»): nos devolverá el objeto cuyo Id sea divControlsForTestSelectors siempre que la clase CSS que se le este aplicando sea «clase».

Descargas – Downloads

• Bueno no me enrollo más, porque que lo esté contando yo, no sirve de nada. He realizado un pequeño simulador, donde vamos a poder ir insertando distintos selectores en un textarea y podemos aplicar la selección en la página y como siempre os recomiendo que os lo bajéis, que enredéis con él y que exploréis todas estas posibilidades de selección de las que estoy hablado.

Nada más por hoy, igual que el otro día, como no puede ser de otra forma, he estado eschando a Joy Division. Yo amigos mios os dejo, que es viernes y nunca seremos tan jovenes como esta noche.

Anuncio publicitario