Manipulacion de los elementos del DOM en jQuery

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

Julio(Admin)

Fecha de registro: 2011-01-21 21:33:50
Total temas creados: 446
Total mensajes enviados: 21

Fecha del Tema: 2013-04-17 19:39:04

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()

Si quieres dejar un comentario registrate o inicia sesión pulsando aquí

¿Has olviado tu contraseña?
¿Todavia no te has registrado?
Pulsa aquí para registrate

Visitas: 1179390
Usuarios en linea:

Google

Calendario

Lun	Mar	Mie	Jue	Vie	Sab	Dom
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Martes 28 de Septiembre 2021
Semana 39

Enlaces de interes

Todos los viernes a las 23:30 hs

Java script - Java

-Form con una ventana nueva
-Seleccionar un elemento html mediante su id
-Convertidor de divisas en java
-Programa para contar vocales de un fichero en java
-Entrada y salida estandar en Java
-Lectura y escritura de archivos en java
-Que es JavaScript
-Variables en java script
-Entrada de datos por teclado en java script
-Estructuras secuenciales en java script
-Estructuras condicionales simples en java script
-Estructuras condicionales compuesta en jaca script
-Estructuras condicionales anidadas en java script
-Operadores logicos (and) en las estructuras java s
-Operadores logicos or en las estructuras java s
-Estructura repetitiva (while) en java script
-Concepto de acumulador en java script
-Estructura repetitiva do while en java script
-Estructura repetitiva for en java script
-Funciones en java script
-Funciones con parametros en java script
-Funciones que retornan un valor en java script
-Programacion orientada a objetos en java script
-Clase Date en java script
-Clase Array en java script
-Clase String en java script
-Clase Math en java script
-Formularios y Eventos en java script
-Controles FORM, BUTTON y TEXT en java script
-Control PASSWORD en java script
-Control SELECT en java script
-Control CHECKBOX en java script
-Control RADIO en java script
-Control TEXTAREA en java script
-Eventos onFocus y onBlur en java script
-Eventos onMouseOver y onMouseOut en java script
-El objeto window en java script
-Propiedad location de objeto window en java script
-Propiedad screen del objeto window en java script
-Archivo JavaScript externo
-Que es el jQuery
-Seleccion de un elemento mediante el id jQuery
-Seleccion de elementos por el tipo de elementos jQ
-Nueva manera de programar JavaScript con jQuery
-Seleccion de elementos utilizando el selector CSS
-Seleccion de elementos con la clase CSS definida
-Metodos text, text valor en jQuery
-Metodos attr y removeAttr en jQuery
-Metodos addClass y removeClass en jQuery
-Metodos html y html valor en jQuery
-Administracion de eventos con jQuery
-Eventos mouseover y mouseout en jQuery
-Evento hover en jQuery
-Evento mousemove en jQuery
-Eventos mousedown y mouseup en jQuery
-Evento dblclick en jQuery
-Evento focus en jQuery
-Evento blur en jQuery
-Efectos con los metodos show y hide en jQuery
-Efectos con los metodos fadeIn y fadeOut en jQuery
-Efecto con el metodo fadeTo en jQuery
-Efecto con el metodo toggle en jQuery
-Iteracion por los elementos each en jQuery
-Ajax metodo load en jQuery
-Ajax metodos ajaxStart y ajaxStop en jQuery
-Pasando datos por los metodos GET y POST en jQuery
-JSON en jQuery
-Funcion ajax en jQuery
-Llamadas encadenadas de metodos del objeto jQuery
-Menu desplegable en jQuery
-Mostrar un tooltip con datos recuperados en jQuery
-Producir JSON desde PHP
-Consumir un JSON desde PHP
-Sintaxis de un list array en java
-Maneras de salir de un iframe con java script
-Input type submit con evento onclick

..............................................................................................................................................................................................................................................

Foro creado y diseñado para compartir conocimientos
Derechos reservados. Autor: Julio Tortosa (Contacto)..