Curso de jQuery (2): Selectores, Primera Parte

Por un selector entendemos en jQuery lo mismo que en CSS: una forma de permitirnos elegir un elemento (o varios) entre todos los que tenemos en nuestro documento HTML. ¿Para qué? Para luego poder aplicar sobre los elementos seleccionados diversas funciones.

Es decir, jQuery utiliza el poder de los selectores para acceder de una manera rápida y sencilla a un elemento o grupo de elementos del DOM (Document Object Model) y luego poder aplicar sobre los mismos cualquier tipo de instrucción, evento, animación, etc…. Por ejemplo, para aplicar la clase “enlace” a todos los elementos “a” que se encuentren dentro de un elemento “p”. Haríamos:

Pero vamos a empezar desde el principio. En este artículo vamos a ver cómo crear los selectores más importantes de jQuery.

Antes de nada es importante saber que el DOM (Document Object Model, el esqueleto de nuestra página web) utiliza una estructura de árbol para definir las relaciones entre sus elementos, en la que tenemos padres, hijos, etc… Por ejemplo:

dom

$(‘selector’)

No importa qué tipo de selector usemos en jQuery: siempre comenzaremos con $(). Prácticamente todo lo que se pueda usar en CSS se puede también incluir entre esos paréntesis de esta forma $(‘selectores’). De tal manera que por ejemplo podríamos hacer:

selectores

Selectores CSS

jQuery soporta prácticamente todos los selectores de CSS, con la ventaja de que podemos utilizar selectores de CSS3 que funcionen con Internet Explorer 6 gracias a jQuery. Lo vemos mejor con estos ejemplos:

selectores_css

Selectores propios de jQuery

A la amplia variedad de selectores propios de CSS jQuery añade sus propios selectores. Como característica que les distingue decir que siempre comienzan por dos puntos (:)

Vamos a distinguir entre ellos:

Selectores Posicionales
Estos selectores están basados en las relaciones posicionales entre elementos (como veíamos antes en ejemplo de la estructura del DOM). Como antes, los vamos a ver a través de ejemplos:

selectores_positional

Selectores de Formularios
Cuando trabajemos con formularios jQuery nos ofrece una serie de selectores propios que nos permiten seleccionar de manera sencilla el elemento preciso. Vamos a verlos con ejemplos:

selectores_formulario

En el próximo artículo veremos selectores más avanzados así como combinaciones en cadena de selectores.

Otros capítulos del curso

Curso de jQuery (1): Introducción
Curso de jQuery (3): Selectores, Segunda Parte
Curso de jQuery (4): Selectores, Tercera Parte

Lecturas Recomendadas:

Blog de Andrés Nieto, Selectores CSS que deberías conocer.
Nosolocodigo: Tutorial de iniciación a jQuery : los selectores.
WoorkUp: jQuery Lesson Series: Introduction to Selectors

11 comentarios en “Curso de jQuery (2): Selectores, Primera Parte

  1. muy buen articulo pero cual es la diferencia entre el apostrofe ( ‘ ) y esto (’) y esto (” doble comillas) se puede usar cualquiera de ellos.. :s?

  2. hola!, gracias por compartir tus conocimientos, pero deberías poner todo el código en texto y no solo en imagen, ya que los que no vemos la pantalla el screen reader (lectores de pantalla) no lee los gráficos. gracias por compartir.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">