Índice

Los selectores jerárquicos

La notación DOM con sus padres, descendientes, hijos y hermanos (siblings) está muy relacionada con la escritura de JavaScript. La librería jQuery utiliza estas posibilidades.

1. Selección de los descendientes

$("ascendiente descendiente")

Selecciona todos los descendientes del elemento "descendiente" con respecto al elemento padre "ascendiente".

$("#box p"): selecciona todos los descendientes de <p> contenidos en el elemento ascendiente identificado por box.

Los descendientes pueden ser los hijos o los nietos, a cualquier nivel.

Ejemplo

Estudiamos las capas que contienen varios elementos. Buscaremos todos los descendientes del elemento identificado por id="box".

images/2_3_1_V4.png
<html lang="es"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function() { 
        $("#box *").css("border", "2px dashed black"); 
        $("br").css("border", "0"); 
    }); 
</script> 
<style> 
    span#box { 
        display: block; 
    } 
    }div { 
        width: 200px; 
        height: 100px; 
        margin: 5px;  ...