jQuery es una herramienta de muy gran alcance la cual proporciona una gran variedad de metodos para desplazarse en el DOM para ayudarnos a seleccionar elementos del documento al azar asi como en metodo secuencial. La mayor parte de los metodos de desplazamiento del DOM no modifican el objeto jQuery y ellos se utilizan para filtrar los elementos a partir de un documento basado en condiciones dadas.
Buscando elementos por indice
Considere la posibilidad de un simple documento con el siguiente contenido HTML:
<html>
<head>
<title>Titulo</title>
</head>
<body>
<div>
<li>Elemento de la lista 1</li>
<li>Elemento de la lista 2</li>
<li>Elemento de la lista 3</li>
<li>Elemento de la lista 4</li>
<li>Elemento de la lista 5</li>
<li>Elemento de la lista 6</li>
</div>
</body>
</html>
* Cada lista tiene su propio indice y se puede localizar utilizando directamente el metodo eq(indice) del siguiente ejemplo. Cada elemento hijo comienza su indice desde 0, por lo tanto la lista del elemento 2 se accede mediante el uso de $("li").eq(1) y asi sucesivamente. Ejemplo:
A continuacion se presenta un ejemplo sencillo que añade color al tercer elemento de la lista:
<html>
<head>
<title>Titulo</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").eq(2).addClass("seleccionado");
});
</script>
<style type="text/css">
.seleccionado { color: red; }
</style>
</head>
<body>
<div>
<li>Elemento de la lista 1</li>
<li>Elemento de la lista 2</li>
<li>Elemento de la lista 3</li>
<li>Elemento de la lista 4</li>
<li>Elemento de la lista 5</li>
<li>Elemento de la lista 6</li>
</div>
</body>
</html>
Filtrado de elementos
El metodo filter(selector) se puede utilizar para filtrar todos los elementos del conjunto que coincidan con el selector especificado. El selector puede ser escrito utilizando cualquier sintaxis del selector. Ejemplo:
A continuacion se presenta un ejemplo sencillo que aplica color a las listas con la clase .media:
<html>
<head>
<title>Titulo</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").filter(".media").addClass("seleccionado");
});
</script>
<style type="text/css">
.seleccionado { color: red; }
</style>
</head>
<body>
<div>
<li class="arriba">Elemento de la lista 1</li>
<li class="arriba">Elemento de la lista 2</li>
<li class="media">Elemento de la lista 3</li>
<li class="media">Elemento de la lista 4</li>
<li class="abajo">Elemento de la lista 5</li>
<li class="abajo">Elemento de la lista 6</li>
</div>
</body>
</html>
Localizacion de elementos descendientes
El metodo find(selector) se puede utilizar para localizar todos los elementos descendientes de un tipo en particular de elementos. El selector puede ser escrito utilizando cualquier sintaxis de selector. Ejemplo:
A continuacion se presenta un ejemplo que selecciona todos los elementos <span> disponibles dentro de los diferentes elementos <p>:
<html>
<head>
<title>Titulo</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").find("span").addClass("seleccionado");
});
</script>
<style type="text/css">
.seleccionado { color: red; }
</style>
</head>
<body>
<div>
<p>Este es el 1er parrafo y <span>ESTO ES ROJO</span></p>
<p>Este es el 2do parrafo y <span>ESTO TAMBIEN ES ROJO</span></p>
</div>
</body>
</html>
jQuery metodos de desplazamiento
La siguiente tabla enumera abajo metodos utiles que se pueden utilizar para filtrar los diversos elementos de una lista de elementos DOM:
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | Selector | Descripcion | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | add(Selector) | Añade mas elementos, que coincidan con el selector dado, al conjunto de elementos que ya coinciden. Ejemplo: $(".top").add(".middle").addClass("selected"); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | andSelf() | Añade la seleccion anterior a la seleccion actual. Ejemplo: $("div").find("p").andSelf().addClass("border"); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | children([selector]) | Obtener un conjunto de elementos que contengan todos los hijos inmediatos de cada uno del conjunto de elementos que coincidan. Ejemplo: $("div").children(".selected").addClass("blue"); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | closest(selector) | Obtiene un conjunto de elementos que contengan todos los hijos inmediatos unicos de cada uno de los elementos que coincidan en el conjunto. Ejemplo: $( document ).on( "click", function( event ) {,$( event.target ).closest( "li" ).toggleClass( "hilight" );}); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | contents() | Busca todos los nodos secundarios dentro de los elementos coincidentes (incluyendo los nodos de texto), o el documento contenido, si el elemento es un iframe.Ejemplo: $( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" ); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | end() | Revertir la mas reciente 'destructiva' operacion, cambiando el conjunto de elementos coincidentes a su estado anterior. Ejemplo: $("p").find("span").css("border", "2px red solid"); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | find(selector) | Busca los elementos descendientes que coinciden con los selectores especificados. Ejemplo: $("p").find("span").addClass("selected"); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | next([selector]) | Obtener un conjunto de elementos que contienen los unicos proximos hermanos de cada uno del conjunto de los elementos dados. Ejemplo: $("p").next(".selected").addClass("hilight"); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | nextAll([selector]) | Encuentra todos los elementos hermanos despues del elemento actual. Ejemplo: $("div:first").nextAll().addClass("hilight"); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | offsetParent() | Devuelve una coleccion jQuery con el padre posicionado de primer elemento coincidente. Ejemplo: $("p").offsetParent().addClass('hilight'); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | parent([selector]) | Obtiene el padre directo de un elemento. Si se llama a un conjunto de elementos, el padre retorna un conjunto de elementos unicos directo al elemento padre. Ejemplo: $("p").parent().addClass('hilight'); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | parents([selector]) | Obtiene un conjunto de elementos que contiene los antepasados unicos del conjunto combinado de elementos (excepto por el elemento raiz). Ejemplo: var parentEls = $("p").parents(),.map(function () {,return this.tagName;,}).get().join(", ");,$("b").append("" + parentEls + ""); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | prev([selector]) | Obtiene un conjunto de elementos que contiene los hermanos anteriores unicos de cada conjunto de elementos que coinciden.Ejemplo:,$("p").prev(".selected").addClass("hilight"); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | prevAll([selector]) | Encuentra todos los elementos hermanos delante del elemento actual.,Ejemplo: $("div:last").prevAll().addClass("hilight"); | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | siblings([selector]) | Obtener un conjunto de elementos que contengan todos los hermanos unicos de cada uno de un conjunto de elementos que coinciden. | +----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
Esta parte ha sido traducida de TutorialsPoint.
No hay comentarios:
Publicar un comentario