Este post explicará el DOM y el uso de los selectores básicos en jQuery. Antes de entrar en materia con el DOM puedes visitar la introducción de jQuery por si estas comenzado. El navegador cuando muestra el contenido de la página también crea y memoriza un modelo. Ese modelo contiene todas las etiquetas HTML, sus atributos y el orden en que aparecen en el archivo, eso es el DOM o Document Object Model.
El DOM proporciona la información que JavaScript necesita para comunicarse con los elementos en la página. También ofrece las herramientas necesarias para navegar, cambiar y añadir a la página HTML. Aunque el DOM ofrezca información a JavaScript, no forma parte de este sino que es un estándar del W3C(Word Wide Web Consortium).
Gracias al DOM, jQuery puede seleccionar diversos elementos de la página y manipularlos. Ahora hablaré de los selectores básicos. Si estás habituado al CSS no tendrás ningún problema. Los selectores básicos como IDs, clases y elementos en jQuery son iguales que en CSS.
Selectores de ID
Puedes seleccionar cualquier elemento de la página con un ID. En caso un párrafo con el id «mensaje»
|
1 |
<p id="mensaje">Contenido del mensaje</p> |
Para poder seleccionar ese elemento con jQuery sería asi
|
1 |
$('#mensaje') |
Podrías hacer que una variable tenga la referencia del elemento para no tener que emplear siempre esa sintaxis cada vez que quieras referirte a él.
|
1 |
var varMensaje = $('#mensaje'); |
Selectores de elementos
Para seleccionar un elemento/s basta con usar el nombre de la etiqueta, sin brackets. Supongamos que tenemos una lista de vínculos.
|
1 2 3 4 |
<a href="#">Enlace 1</a> <a href="#">Enlace 2</a> <a href="#">Enlace 3</a> <a href="#">Enlace 4</a> |
Para hacer referencia a ellos emplearíamos la siguiente línea en jQuery.
|
1 |
var listaLinks = $('a'); |
Selectores de Clase
Otra forma de seleccionar elementos es mediante el nombre de la clase. Un ejemplo muy común, crear una barra de navegación que tiene submenús. Cuando un visitante pasa el ratón por uno de los botones de navegación principales, se despliega un submenú.
Para eso habría que añadir una clase a los botones de navegación principales llamado por ejemplo «botonNav». También los submenús tienen que tener una clase, la llamaremos «sub-menu». El selector de clase sería de la siguiente forma
|
1 |
$('.sub-menu') |
El código funcional sería de la siguiente manera
|
1 2 3 4 5 6 7 |
$(document).ready(function() { $('.botonNav').hover( function(){ $(this).children('.sub-menu').slideDown(); } ); }); |
Y hasta aquí el tutorial de hoy, espero que os haya gustado. A seguir picando 🙂