Temas > Programacion > Java script - Java > Manipulacion de los elementos del DOM en jQuery
Julio

Manipulación de los elementos del DOM
jQuery dispone de una serie de métodos que nos 
facilitan el tratamiento de los elementos del Dom.
Confeccionaremos un problema que haga uso de estos 
métodos.
Implementar una página que contenga una lista con cuatro 
items. Probar distintos métodos para manipular la lista 
(borrar, insertar)
pagina1.html
<?php //esto no va
 <html>
 <head>
 <title>Problema</title>
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript" src="funciones.js"></script>
 </head>
 <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>
?>//esto no va
funciones.js
<?php //esto no va
 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();
 }
?>//esto no va
Para borrar todos los elementos contenidos en una lista 
obtenemos la referencia de la lista mediante la función $ y 
seguidamente llamamos al método empty:
<?php //esto no va
function eliminarElementos()
{
   var x;
   x=$("ul");
   x.empty();
}
?>//esto no va
Para restaurar la lista utilizamos el método html insertando
directamente los item a partir del elemento ul:
<?php //esto no va
function restaurarLista()
{
   $("ul").html(`<li>Primer item.</li><li>
       Segundo item.</li><li>Tercer item.</li><li>Cuarto item.</li>`);
}
?>//esto no va
Para añadir un elemento al final de la colección de elementos 
del objeto jQuery disponemos del método append:
<?php //esto no va
function anadirElementoFinal()
{
   var x;
   x=$("ul");
   x.append("<li>otro item al final</li>");
}
?>//esto no va
Para añadir un elemento al principio disponemos de 
un método llamado prepend:
<?php //esto no va
function anadirElementoPrincipio()
{
   var x;
   x=$("ul");
   x.prepend("<li>otro item al principio</li>");
}
?>//esto no va
Para eliminar un elemento del final de la lista, primero 
obtenemos la cantidad de elementos que almacena el 
objeto jQuery por medio de la propiedad length y luego
mediante el método eq (equal) indicamos la posición del 
elemento que necesitamos (el método eq retorna otro 
objeto de tipo jQuery) y por último llamamos al método
remove:
<?php //esto no va
function eliminarElementoFinal()
{
   var x;
   x=$("li");
   var cantidad=x.length;
   x=x.eq(cantidad-1);
   x.remove();
}
?>//esto no va
Para eliminar un elemento del principio es similar a 
borrar el último, pero aquí no necesitamos saber la 
cantidad de elementos que almacena el objeto jQuery 
ya que debemos acceder al primero (el primero se almacena 
en la posición cero):
<?php //esto no va
function eliminarElementoPrincipio()













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar