Manual jQuery-Selectores jQuery
lunes, 13 de diciembre de 2010
, Posted by edukt at 13:44
Para penetrar en el árbol del DOM jQuey utiliza:
- Selectores CSS
- Selectores XPath
- Selectores personalizados
- Método transversal del DOM
El DOM es simplemente una ordenación de la estructura en forma de árbol que describe la relación entre los componentes de una página utilizando el concepto padre-hijo. A continuación se presenta un ejemplo con la estructura en árbol del DOM
<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
</div>
</body>
</html>
Todos los elementos son descendientes de html por lo tanto head y body son hijos directos de la etiqueta html, de igual manera, el body contiene otros hijos y así sucesivamente con todos los elementos.
Todos los elementos son descendientes de html por lo tanto head y body son hijos directos de la etiqueta html, de igual manera, el body contiene otros hijos y así sucesivamente con todos los elementos.
¿Cómo utilizar los selectores jQuery?
No importa el tipo de selectores, siempre es necesario comenzar con la función factory que elimina la necesidad de hacer loop en los diferentes elementos del DOM de nuestra página, la función realiza por sí misma el recorrido en todos los elementos con solo escribir $() y lo que pongamos entre paréntesis es almacenado como un objeto jQuery.
Dentro de esta función factory podemos poner cualquier cosa algunos ejemplos son:
Selector CSS JQuery
Etiqueta p $('p')
ID #algun-id $('#algun-id')
Clase .algunaclase $('.algunaclase')
$('p') Selecciona todo los párrafos el documento
$('#some-id') Selecciona todos los elementos que tiene como ID algún-id
$('.some-class') Selecciona todos elementos que tienen como clase algunaclase
$('#some-id') Selecciona todos los elementos que tiene como ID algún-id
$('.some-class') Selecciona todos elementos que tienen como clase algunaclase
Todos los elementos son recorridos de forma automática e implícita utilizando $() que es un sinónimo o equivalente a escribir jQuery (), este último comando es útil cuando se utiliza otros lenguajes que también utilizan el operador de $, en esos casos es mejor escribir explícitamente jQuery().
JQuery soporta la mayoría de selectores soportados por las especificaciones CSS de la 1 a la 3 como se puede ver en http://www.w3.org/Style/CSS/#specs. La ventaja de esto es que permite que se puedan construir sitios web sin preocuparse en cómo se visualizará la aplicación en otros navegadores como por ejemplo en el IE6 que no siguen algunos estándares.
Veremos un ejemplo del uso de selectores, comencemos estudiando el siguiente código html de un menú que utiliza listas desordenas anidadas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bienvenido a esta Web</title>
<!--Hoja de estilo-->
<body>
<ul id="item-seleccionado">
<li>Manuales
<ul>
<li>Introducción a jQuery</li>
< li>Efectos en jQuery</li>
</ul>
</li>
<li>Sitios
<ul>
<li>Sitio Oficial jQuery</li>
<li>Blog sobre jQuery</li>
</ul>
</li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bienvenido a esta Web</title>
<!--Hoja de estilo-->
<link href="estilo.css" rel="stylesheet" type="text/css" />
<!--Referencia a libreria jQuery--><script language="javascript" src="jquery.js" type="text/javascript"></script>
<script language="javascript" src="ejemplo.js" type="text/javascript"></script>
</head><body>
<ul id="item-seleccionado">
<li>Manuales
<ul>
<li>Introducción a jQuery</li>
< li>Efectos en jQuery</li>
</ul>
</li>
<li>Sitios
<ul>
<li>Sitio Oficial jQuery</li>
<li>Blog sobre jQuery</li>
</ul>
</li>
</ul>
</body>
</html>
Lo que pretendemos realizar es poner horizontalmente las opciones primarias del menú.
Necesitamos crear un archivo llamado estilo.css como el siguiente:
@charset "utf-8";
/* CSS Document */
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
.sub-nivel {
background-color:#CCCCCC;
}
La clase horizontal hace que un elemento flote a la izquierda. Hasta aquí ninguna diferencia de trabajar con CSS y HTML , para aplicar dinámicamente y en pocas líneas aplicar este estilo a elementos del documento HTML.
Luego creamos el archivo JavaScript ejemplo.js que tiene el código jQuery:
$(document).ready(function() {
$('#item-seleccionado > li').addClass('horizontal');
});
Luego creamos el archivo JavaScript ejemplo.js que tiene el código jQuery:
$(document).ready(function() {
$('#item-seleccionado > li').addClass('horizontal');
});
A continuación explicamos este código:
$(document).ready(function() {
});
});
Estas lineas ejecutan todo lo que se encuentre dentro de las llaves cuando todos los elementos del DOM estén cargados por medio del método ready, como parámetro le pasamos una función anónima que nos permite no hacer referencia a una función en concreto.
Ahora estudiemos la línea $('#item-seleccionado > li').addClass('horizontal');
$('#item-seleccionado > li'): Indica un selector al cual le aplicaremos una clase. El signo > es un combinador que significa que le queremos aplicar la clase a los hijos del elementos que tiene el id ítem-seleccionado.
addClass('horizontal'): Agrega la clase horizontal del archivo CSS.
Si a los demás elementos de la lista le queremos aplicar otra clase podemos utilizar el siguiente filtro:
$('#item-seleccionado li:not(.horizontal)').addClass('sub-nivel');
Lo que se indica en la linea anterior es que se le apliqué la clase sub-nivel a todos los elementos que son descendientes de ítem-seleccionado y que además no tengan aplicado la clase horizontal. Lo único que se hace es aplicarle un color de fondo y el resultado es el siguiente.
En el próximo post veremos el tema de los SELECTORES XPath que es un tipo de lenguaje para identificar sus elementos y valores dentro de documentos XML similar a como CSS identifica elementos en HTML.
Currently have 0 comentarios: