Sol dom II
De wikiserver
La revisió el 15:13, 6 abr 2016 per Jnoguera (Discussió | contribucions)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#boton1");
x.click(eliminarElementos)
x=$("#boton2");
x.click(restaurarLista)
x=$("#boton3");
x.click(anadirElementoFinal)
x=$("#boton4");
x.click(anadirElementoPrincipio)
x=$("#boton5");
x.click(eliminarElementoFinal)
x=$("#boton6");
x.click(eliminarElementoPrincipio)
x=$("#boton7");
x.click(eliminarPrimeroSegundo)
x=$("#boton8");
x.click(eliminarDosUltimos)
}
function eliminarElementos()
{
var x;
x=$("ul");
x.empty();
}
function restaurarLista()
{
$("ul").html('<li>Primer item.</li><li>Segundo item.</li><li>Tercer item.</li><li>Cuarto item.</li>');
}
function anadirElementoFinal()
{
var x;
x=$("ul");
x.append("<li>otro item al final</li>");
}
function anadirElementoPrincipio()
{
var x;
x=$("ul");
x.prepend("<li>otro item al principio</li>");
}
function eliminarElementoFinal()
{
var x;
x=$("li");
var cantidad=x.length;
x=x.eq(cantidad-1);
x.remove();
}
function eliminarElementoPrincipio()
{
var x;
x=$("li");
x=x.eq(0);
x.remove();
}
function eliminarPrimeroSegundo()
{
var x;
x=$("li");
x=x.lt(2);
x.remove();
}
function eliminarDosUltimos()
{
var x;
x=$("li");
x=x.gt(x.length-3);
x.remove();
}
</script>
<body>
<h1>M�todos para manipular nodos del DOM con jQuery.</h1>
<ul>
<li>Primer item.</li>
<li>Segundo item.</li>
<li>Tercer item.</li>
<li>Cuarto item.</li>
</ul>
<input type="button" id="boton1" value="Eliminar la lista completa."><br>
<input type="button" id="boton2" value="Restaurar Lista"><br>
<input type="button" id="boton3" value="A�adir un elemento al final de la lista"><br>
<input type="button" id="boton4" value="A�adir un elemento al principio de la lista"><br>
<input type="button" id="boton5" value="Eliminar el �ltimo elemento."><br>
<input type="button" id="boton6" value="Eliminar el primer elemento."><br>
<input type="button" id="boton7" value="Eliminar el primero y segundo elemento."><br>
<input type="button" id="boton8" value="Eliminar los dos �ltimos."><br>
</body>
</html>
