Los Selectores en jQuery

En este artículo se entra en más detalle sobre los diferentes selectores disponibles en jQuery. Los elementos, clases, identificadores, entre otros, que se pueden utilizar como selector para hacer o realizar acciones en jQuery sobre los elementos en las páginas de HTML5. Se recuerda que al final del artículo como en anteriores artículos se disponen de los ficheros de ejemplo para descargar y practicar en los equipos de manera local.

En el artículo se disponen varias secciones con sus ejemplos correspondientes:

  • Selección a través del identificador (ID).
  • Selección a través de la clase (class).
  • Selección a través de la etiqueta (div, p…).
  • Selección a través del atributo (href de un enlace a).
  • Selección con búsqueda (etiqueta+identificador).

 

SELECCIÓN A TRAVÉS DEL IDENTIFICADOR

En jQuery es posible realizar una acción sobre un elemento del código a través de su identificador, para realizar esta acción es tan simple como añadir un id en el elemento deseado. A continuación se muestra una captura de pantalla del ejemplo:

jquery_selector_id

El código desarrollado es sencillo, en la página html se dispone el div con id=”hola” y un script asociado a un archivo jQuery personalizado llamado “codigo.js”. En este archivo se realizan las acciones sobre el div, del que se facilita el identificador. Para ello se crea una variable x donde capturamos el DOC y se llama a la función inicializar. Posteriormente en esta función, se captura el div a través de su identificador y con el evento click se llama a la función “clickHecho”, que realiza varías modificaciones en el estilo css del div. A continuación se puede observar una captura del código desarrollado:

selector_id_codigo

SELECCIÓN A TRAVÉS DE LA CLASE

Es posible realizar una selección de un elemento del documento HTML a través de la clase del elemento que se desee. Para realizar esta acción se añade la class deseada en el o los elementos que se indiquen y posteriormente a través de un fichero personalizado de jQuery se realizan los cambios, por ejemplo, en los estilos de los elementos que tienen esa clase indicada. Se observa un ejemplo en la siguiente captura:

selector class

El código desarrollado se muestra en la siguiente imagen, como se puede observar los elementos con span que tienen la clase primario se modifica su propiedad background-color de su css al color amarillo. Se resalta la acción en la siguiente captura:

selector class codigo

 

SELECCIÓN A TRAVÉS DE LA ETIQUETA

Es posible realizar una selección de un elemento del documento HTML a través de su etiqueta. Para realizar esta acción se deben crear los tags correctamente. Se recuerdan de otros artículos que no es recomendable insertar más de un tag h1 en un documento de html por temas de SEO, aunque en el ejemplo se practican con estas etiquetas, se recomienda si lo hacéis en un cliente solo se inserte un elemento h1 en cada página.

selector etiqueta

A continuación se muestra el código desarrollado del ejemplo indicado en la anterior captura:

selector etiqueta codigo

Existen dos formas de modificar el tamaño de la fuente. En el ejemplo se modifica el tamaño de la fuente pero es posible modificar otros elementos. Se puede seleccionar el h1 sobre el que se pulsa con $(this) o se pueden seleccionar todos, modificando el valor anterior por $(“h1”). Posteriormente a través de x.css(…) se modifica la propiedad de tamaño de fuente a 12 píxeles.

 

SELECCIÓN A TRAVÉS DEL ATRIBUTO

Se puede realizar una selección de un elemento a través del atributo, en el siguiente ejemplo se realizan modificaciones en el background de los atributos href de las etiquetas de enlace (a). Se observa en la siguiente captura el ejemplo y el efecto que realiza jQuery cuando se pulsa sobre el botón “Revelar”.

selector atributo

El código desarrollado es el mostrado a continuación, a través del botón con identificador revelar se llama al método mostrar que realiza las modificaciones de css sobre los atributos href de los enlaces. Se selecciona el atributo href con la instrucción $(“[href]”).

selector atributo codigo

Adicionalmente es posible realizar modificaciones sobre el archivo personalizado (en el ejemplo que se puede descargar al final del artículo), se encuentra esta modificación en el fichero “personalizado4.js”. En el siguiente código desarrollado se muestran las modificaciones realizadas respecto al del ejemplo anterior:

selector atributo código modificado

Como se puede apreciar se realizan las modificaciones con el atributo href=’#’ esto indica que todos los href que sean iguales a el contenido # se modificará el color de fondo a amarillo. Con href$=’.jpg’ se indica que todos los atributos con href, con extensión jpg, su fondo se modifique a color rojo. Y con href$=’.png’ se indica que todos los atributos con href, con extensión png, su fondo se se modifique a color azul claro. En la siguiente captura se puede observar los cambios que suceden cuando se pulsa sobre el botón con identificador revelar:

selector atributo modificado

 

SELECCIÓN CON BÚSQUEDA

Se pueden realizar también búsquedas de elementos con, por ejemplo, los elementos de párrafo, etiquetas+identificador o etiqueta+primer elemento de la lista. En la siguiente imagen se muestra un ejemplo cuando se pulsa sobre el botón “Revelar” y se puede apreciar los cambios que se aplican en la página:

selector busqueda

A continuación el código desarrollado donde se puede observar que se “atrapan” los elementos en las variables creadas previamente con instrucciones como: $(“p”) donde selecciona los párrafos, $(“h1#cambiame”) donde selecciona los tag h1 con identificador cambiame, $(“p#cambiame”) donde selecciona los párrafos con identificador cambiame o $(“li:first”) que selecciona el primer elemento de la lista.

selector búsqueda código

 

EJEMPLO PARA DESCARGA

Se adjunta el fichero comprimido con los ejemplos utilizados en el post, para los que prefieren practicar de manera local en sus equipos: selectores en jQuery. En el fichero comprimido hay una pequeña guía con el orden de los ficheros y el archivo jQuery que le corresponde. En próximos artículos de jQuery se detallarán otros elementos, en particular se entrará en más detalle con los efectos que se pueden realizar. No os lo perdáis.

 

Se recuerdan los artículos relacionados sobre JQuery:

 

Un saludo.

 

Deja un comentario

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