Diferència entre revisions de la pàgina «Sol dom II»
De wikiserver
(Es crea la pàgina amb «<source lang="java"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>manipulaci�n del DOM con jQuery | Pablo Monteser�n</title> <script sr…».) |
|||
| Línia 4: | Línia 4: | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
| − | |||
| − | |||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> | ||
Revisió de 15:13, 6 abr 2016
<!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>
