Hemos hecho un rápido script que prueba los selectores de jerarquía que están disponibles en jQuery. Es una simple página
que tiene una serie de elementos y un script para seleccionar y alterar su estilo. Los elementos los vamos seleccionando con
diversos tipos de selectores de Jerarquía que hemos visto en este artículo de DesarrolloWeb.com. El ejemplo tendría el
siguiente código:
<html>
<head>
<title>Probando </title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//selectores ancestor descendant
$("p i").css("color", "#66F");
$("table.mitabla td").css("background-color", "#55ff00");
//selectores parent > child
$("p.parraforojo > b").css("color", "red");
$(".mitd > *").css("border", "1px solid #ff9900");
//selectores prev + next
$("i + b").css("font-size", "40px");
$(".elemlista + li").css("opacity", 0.2);
//selectores prev ~ siblings
$("#a2 ~ div.clase").css("font-size", "180%");
$("#miparrafo ~ table").css("border", "3px dotted #dd6600");
});
</script>
</head>
<body>
<p class="parraforojo">
<i>Hola</i> <b>esto</b> es un <b>párrafo</b> rojo <i>donde</i> he <b>puesto</b> unas <b>negritas</b>
</p>
<p class="parraforojo">Otro <b>con</b> clase class="parraforojo" <span class="unspan"><b>(esto está
dentro de unspan B, no depende directamente -no child- del párrafo)</b></span></p>
<p>Hola <b>esto</b> es otro <b>párrafo </b>para <i>poner</i> otras <b>negritas</b></p>
<p>hola!!!</p>
<table border=1>
<tr>
<td><i>Tabla cualquiera</i></td>
<td>Esta tabla <b>no tiene</b> class de <b>CSS</b></td>
</tr>
</table>
<p id="miparrafo">Este es el párrafo con id="miparrafo"</p>
<table class="mitabla" border=1>
<tr>
<td colspan=2>Esta tabla tiene una <b>clase CSS</b></td>
</tr>
<tr>
<td><i>class="mitabla"</i></td>
<td class="mitd">Y este <b>td</b> le he puesto <i>class="mitd"</i> <span>Una cosa<span>otra
cosa</span></span></td>
</tr>
</table>
<p><b>Párrafo</b> que tiene alguna <b>negrita</b> e <span class="algo"><i>itálica</i></span> para
seleccionar</p>
<div>
<div id="a1">hola</div> <div id="a2">dos</div> <div id="a3">3</div> <span>Cuatro (no es un div)???
</span> <div id="a4" class="clase">Cuatro de verdad</div>
</div>
<ul>
<li>Elem 1</li>
<li class="elemlista">Elem 2</li>
<li>Elem 3</li>
<li>Elem 4</li>
<li class="elemlista">Elem 5</li>
<li class="elemlista">Elem 6</li>
<li>Elem 7</li>
</ul>
</body>
</html>
No hay comentarios:
Publicar un comentario