Selectores básicos en Jquery

selectores-en-jQuery

Uno de los éxitos de jQuery y el porqué se hizo tan popular en tan poco tiempo reside en su uso fácil, si estas familiarizado con CSS el aprender jQuery te será relativamente fácil, si no en este curso gratuito de CSS podrás ver los conceptos claves y básicos para aprender a usar este lenguaje vital de la web. Bueno, en CSS utilizamos selectores para seleccionar elementos HTML y aplicarles estilos, por ejemplo, utilizamos el símbolo de almohadilla (#) para seleccionar un elemento por su ID, para seleccionar un elemento por su clase utilizamos el punto (.) y así sucesivamente. jQuery nos permite utilizar estos mismos selectores y mas para seleccionar los elementos del DOM y así aplicarles los comportamientos de JavaScript, incluso los selectores CSS  que no funcionan en navegadores antiguos con jQuery funcionaran.

Como vemos en la siguiente imagen de un tema anterior, la anotomía básica de un script jQuery.

anatomia-de-un-script-jquery

utilizamos la función propia $(‘’) o jQuery(‘’) para seleccionar los elementos del DOM, podemos seleccionar elementos basados en su tipo, ID, clase, atributo, posición, visibilidad, elementos de formularios, elementos hijos y hasta hacer combinaciones para acceder a cualquier elemento en cuestión.

☰ seleccionar por el tipo de elemento.

Podemos seleccionar cualquier elemento HTML del Documento pasando el nombre del tag o etiqueta dentro de la función $(). Por ejemplo la etiqueta <p> para seleccionar todos los párrafos, los <div>, la etiqueta <img> para seleccionar todas las imágenes, la etiqueta <a> para seleccionar los anchor o enlaces etc. Veamos:

El resultado sería el siguiente:

selector-de-tipo-jquery

Seleccionar múltiples elementos

En el anterior código seleccionamos todos los elementos  <p>, <h3> y <strong> del documento HTML.

Aunque utilizando el selector universal de CSS (*) podemos seleccionar todos los elementos HTML de un golpe.

 

☰ Seleccionar por Clase o ID.

Podemos ser aun más preciso al momento de seleccionar elementos, especificar la selección de un elemento ya sea por su clase class="" o por su ID id="" en el documento HTML. Veamos:

 

☰ Seleccionar por Atributo.

jQuery( "[attribute='value']" )
Cabe aclarar que las clases y IDs también son atributos de los elementos HTML, pero estos elementos cuentan con muchos más atributos que lo que hacen es extender el uso del elemento. Selectores de atributos HTML5. Veamos un ejemplo:

Donde por medio del método addClass que lo que hace es añadir una o más clases al elemnto seleccionado vamos a añadirle la clase .mailto que debe de existir en el archivo CSS, al elemtno a que tiene como atributo el href=”” y que en el valor comience exactamente con el string mailto:, esto es un selector de CSS.

El CSS que se va a aplicar:

Y el resultado es el siguiente:

selector-de-atributos-jquery

Recordemos que las etiquetas HTML cuentan con muchos atributos, estos nos ayuda a hacer una mejor selección en jQuery.

Para más información de los selectores básicos: http://api.jquery.com/category/selectors/basic-css-selectors/
y
 de los selectores de atributos: http://api.jquery.com/category/selectors/attribute-selectors/

Deja un comentario

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