Los selectores propios de JQuery. Seleccionando un conjunto de elementos del DOM: El uso del alias $ cuando trabajamos con JQuery.

Para finalizar la línea de post que habla de la (gran) potencia de selección de la que goza JQuery, solo nos queda ver, los selectores propios de JQuery. Como ya hemos visto en anteriores post, una de las principales características de JQuery es que podemos seleccionar un conjunto de elementos de una forma muy simple, potente y elegante. Esta funcionalidad nos la proporciona la función $ (alias de objeto JQuery), pero no solo puede hacer esto, sino que también nos permite:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
  • 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.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Los selectores propios de JQuery.

JQuery, para completar la capacidad de selección de la que goza nos proporciona una serie de selectores propios. Estos selectores nos van a permitir realizar acciones que por su naturaleza o finalidad no las podemos realizar con selectores CSS. Supón que quieres seleccionar todos los checkboxes chequeados. Este tipo de acciones son las que nos permiten realizar los selectores propios de JQuery. Veamos cuales son:

Anuncio publicitario

Selectores basados en la posición. Seleccionando un conjunto de elementos del DOM.

Volvemos a hablar de JQuery y seguimos con los selectores (aunque ya queda poco). Hoy vamos a ver los selectores que se basan en la posición de un objeto dentro del árbol del DOM de la página. Recordar que para poder seleccionar un conjunto de elementos, lo hacemos mediante la función $ (alias del objeto JQuery). Esta función tiene 4 usos principales:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
  • 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.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Seleccionando un conjunto de objetos del DOM en función de la posición.

Algunas veces, nos vamos a encontrar con la tesitura de querer seleccionar un conjunto de objetos del DOM, en función de la posición que tienen en la página o en función de la relación que tienen con otros objetos.

Selectores basados en atributos, hijos y contenedores padres. Como seleccionar un conjunto de elementos del DOM

Siguiendo con la línea de post sobre JQuery, hoy vamos a continuar con los selectores. Vamos a ver cómo realizar selecciones en base a atributos, hijos y contenedores, pero antes, recordemos que hace la función $ (el alias del objeto JQuery).

• 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.

Como he dicho vamos a seguir hablando sobre cómo seleccionar un conjunto de elementos del DOM. JQuery, para seleccionar elementos lo realiza por medio de las siguientes acciones:

• 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.

Selecciones por medio de atributos, hijos y contenedores.

Estos selectores, son más avanzados que los basados en los selectores CSS. Aun así, están basados en la siguiente generación de selectores CSS (que ya esta soportada por Firefox, IE7, Safari etc…). Estos selectores incluyen selección en función de atributos (en base a una condición), e hijos (directos) de un objeto padre.

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.