comparte el articulo 

Trabajando con elementos en jQuery: Principios básicos de selección

Actualizado el 08/03/2011 < > 0 Comentarios

Resumen: Inicia la segunda serie de artículos del Manual de jQuery, en esta primera parte abarcaremos conceptos básicos y la sintaxis correcta para seleccionar elementos con jQuery.

Con este texto iniciamos una nueva serie de artículos que tratará de abarcar con la mayor precisión posible, el manejo de un conjunto de elementos que serán envueltos para su uso mediante jQuery. Dividiremos en tres grandes categorías nuestro estudio, la primera parte nos enseñara a realizar la selección de dichos elementos, después pasaremos a la creación y finalmente a la manipulación de los elementos envueltos.

En la serie de artículos previos, la cual titulamos “Fundamentos de jQuery”, hablamos de las distintas formas y maneras en que podíamos hacer uso de la función jQuery() y de su alias $(). Definimos que su capacidad puede ir desde la simple selección de elementos de nuestro DOM hasta el llamado y definición de funciones para ser ejecutadas cuando el DOM se encuentre cargado en su totalidad.

A partir de este momento, analizaremos con gran detalle la manera en que los elementos DOM pueden ser operados, identificándolos mediante alguna de las dos capacidades más poderosas y frecuentemente usadas de la función jQuery(), la selección de elementos DOM a través de selectores y la creación de nuevos elementos DOM.

Un gran número de aplicaciones y sitios web que utilizan la programación dinámica, son diseñados y desarrollados para que empleen la manipulación de los elementos DOM que las componen, gracias a esto se puede crear efectos y operaciones, pero antes de querer correr hay que caminar e incluso antes hay que aprender a gatear, es por ello que antes de empezar a manipular elementos primero debemos saber identificarlos y seleccionarlos.

Vamos a comenzar nuestro recorrido detallado de las muchas maneras que jQuery nos permite especificar qué elementos han de ser objeto de manipulación.

Selección de elementos para la manipulación con jQuery

Lo primero que tenemos que hacer para poder utilizar, prácticamente cualquier método de jQuery (con frecuencia denominados comandos jQuery), es seleccionar algunos de los elementos que conforman la página sobre la cual va a funcionar la librería. En ciertas ocasiones el conjunto de elementos que queremos seleccionar será fácil de describir, como por ejemplo “todos los elementos de tipo párrafo que se encuentran en la página”, pero en otras ocasiones tendremos que aplicar una descripción más específica como “todos los elementos que tienen la clase e1 y que contengan un link”.

Afortunadamente, jQuery nos proporciona una sintaxis de selección sencilla y sólida con la que vamos a ser capaces de especificar con facilidad prácticamente cualquier conjunto de elementos, todo de una manera concisa y manteniendo la limpieza necesaria en la codificación. Como ya mencionábamos en los primeros artículos de este tutorial, jQuery utiliza gran parte de la sintaxis de CSS, con la cual muchos de nosotros ya estamos familiarizados, extendiendo dicha sintaxis con algunos métodos personalizados para seleccionar elementos, lo que ayuda a realizar tanto tareas comunes como complejas.

Uso básico de selectores CSS con jQuery

Debido a la aplicación de estilos a los elementos de una página, los desarrolladores web se han familiarizado con un pequeño, pero potente y útil, grupo de métodos de selección que trabajan en todos los navegadores. Estos métodos incluyen la selección de un elemento en base a su ID, nombre de su clase, nombre de la etiqueta, y la jerarquía DOM de los elementos de página.

Estos son algunos ejemplos para dar un repaso rápido a este tipo de selectores.

  • a – Este selector equivale a todos los enlaces, elementos que estan dentro de la etiqueta .
  • #ident – Este selector equivale a los elementos que tienen un identificador llamado “ident”.
  • .unaClase – Este selector equivale a los elementos que tienen la clase llamada “unaClase”.
  • a#ident.unaClase – Este selector equivale a todos los vínculos con id “ident” y con la clase “unaClase”.

Podemos mezclar y combinar los tipos básicos de selección para seleccionar conjuntos bastante detallados de elementos. De hecho, muchos de los sitios web más elegantes y creativos usan muchas de estas combinaciones entre opciones básicas para crear entornos realmente asombrosos.

Para poder seleccionar elementos con jQuery debemos envolver el selector en la función jQuery() de la siguiente manera:

jQuery("a#ident.unaClase");

Estos selectores básicos son poderosos, pero a veces necesitamos un control aun más preciso sobre los elementos que deseamos hacer coincidir con el patrón. jQuery conciente de este reto hace uso de selectores más avanzados para lograr cumplir con esta tarea, dichos selectores serán descritos más a detalle en el siguiente artículo.

Publicado el 08/03/2011, última actualización 08/03/2011.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: Diseño Web :: LaWebera.es

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras