Hogar › Ajustes › Mover elementos jquery. Aprendamos Java. Eliminar elementos de una página

Mover elementos jquery. Aprendamos Java. Eliminar elementos de una página

EN esta lección analiza los problemas de manipulación de elementos existentes en la página:

Eliminar elementos de una página usando los métodos vacío(), remove(), detach() y unwrap()
Reemplazar elementos con nuevos elementos usando los métodos replaceWith() y replaceAll()
Mover elementos de un elemento principal a otro en una página

Eliminar elementos de una página Eliminar todo lo que hay dentro de un elemento: vacío()

El método vacío() es la forma más sencilla eliminar contenido de la página. Llamar al método vacío() en un objeto jQuery elimina todo el contenido del conjunto correspondiente al elemento (o elementos) en el objeto jQuery.

En otras palabras, el método vacío() elimina todos los elementos y nodos heredados (como los nodos de texto) de cada elemento del conjunto, dejando el elemento vacío.

El ejemplo elimina contenido de dos elementos div:

$(inicio); function init() ( // Elimina el contenido de #myDiv1 y #myDiv2 $(".emptyMe").empty(); )

Párrafo con texto

Otro párrafo con texto.

Después de ejecutar el código anterior, el contenido de la página cambiará a:

Eliminar un elemento completo: remove()

Mientras que el método vacío() elimina todo lo que hay dentro de un elemento, el método remove() elimina todo, incluido el elemento mismo. Por ejemplo:

$(inicio); function init() ( // Elimina #myDiv1 y #myDiv2 por completo $(".removeMe").remove(); )

Párrafo con texto

Otro párrafo con texto.

Nodo de texto tal como está

Después de ejecutar el código anterior, ambos elementos div se eliminarán de la página:

Puede pasar una cadena con un selector condicional al método remove(). En este caso, los elementos a eliminar serán filtrados por el selector. Por ejemplo:

$(inicio); function init() ( // Eliminar solo #myDiv2 $(".removeMe").remove(":contains("Otro párrafo")"); )

Párrafo con texto

Otro párrafo con texto.

Nodo de texto tal como está

En el ejemplo anterior, sólo elemento div, para el cual está configurada la clase removeMe Y que contiene el texto "Otro párrafo". Todo lo demás permanecerá en la página:

Párrafo con texto

Eliminar un elemento sin destruir sus datos: detach()

El método remove() devuelve objeto jQuery, que contiene los elementos eliminados. En teoría, podrías eliminar elementos de un lugar de la página y luego volver a adjuntarlos en cualquier lugar más adelante.

Sin embargo, para conservar recursos y evitar posibles problemas de pérdida de memoria, el método remove() elimina todo datos jQuery y eventos asociados con el elemento eliminado. Por ejemplo, si a un elemento se le asignó un evento de clic de jQuery y luego el elemento se eliminó de la página usando el método remove(), el evento de clic se eliminará del elemento. Esto puede causar un problema si luego desea devolver el elemento a la página y restaurar su funcionalidad.

EN en este caso El método detach() (introducido en jQuery 1.4) puede ayudar. Funciona casi exactamente igual que el método remove(), excepto por una cosa: no elimina Datos jQuery y eventos asociados con el elemento eliminado. Esto significa que luego puede volver a adjuntar los elementos eliminados conservando sus metadatos jQuery.

Ejemplo. El siguiente script asigna un evento de clic de jQuery a cada uno de los dos párrafos de la página. Ambos controladores de eventos simplemente alternan la clase CSS "roja" del párrafo para cambiar de color de rojo a negro o viceversa cada vez que se hace clic en él.

Luego, el script elimina el primer párrafo de la página usando el método remove() y almacena el objeto jQuery que contenía el párrafo en la variable myDiv1Para. Luego volvemos a adjuntar el párrafo al div principal usando el método appendTo().

Hacemos lo mismo con el segundo párrafo, pero usamos el método detach() en lugar del método remove().

< p.red { color: red; } $(init); function init() { // Назначаем событие click каждому параграфу div $("#myDiv1>p").click(function() ( $(this).toggleClass("rojo"); )); $("#myDiv2>p").click(function() ( $(this).toggleClass("rojo "); )); // Eliminar y restaurar el párrafo #myDiv1 var myDiv1Para = $("#myDiv1>p").remove(); myDiv1Para.appendTo("#myDiv1"); // Eliminar y restaurar el párrafo #myDiv2 var miDiv2Para = $("#myDiv2>p").detach(); myDiv2Para.appendTo("#myDiv2" )

Párrafo con texto

Otro párrafo con texto.

Después de ejecutar este script, el primer párrafo perderá su controlador. haga clic en eventos, y el segundo párrafo conservará su funcionalidad por completo. Puede comprobarlo abriendo la página en su navegador. Si presiona el botón del mouse en el segundo párrafo, cambiará de color, pero el primero no reaccionará de ninguna manera a las acciones del mouse.

Esto se debe a que el método remove() eliminó el controlador de eventos para el primer párrafo, pero el método detach() retuvo el controlador de eventos click para el segundo párrafo.

Eliminar un elemento padre: desenvolver()

El método unwrap() elimina el padre de un elemento (o un conjunto de padres de elementos) del DOM. El elemento ocupará el lugar de su elemento padre en el DOM.

El siguiente ejemplo expande el contenido de un div. En otras palabras, el div se reemplaza con su contenido:

$(inicio); function init() ( // Elimina el elemento #myDiv, pero conserva su contenido $("#myPara").unwrap(); )

Párrafo con texto

Otro párrafo con texto.

Después de ejecutar el código anterior, el contenido de la página se verá así:

Párrafo con texto

Otro párrafo con texto.

Reemplazar elementos Reemplaza un elemento con contenido nuevo: reemplazarCon()

El método replaceWith() le permite reemplazar un elemento o conjunto de elementos con contenido nuevo. Puede enviar contenido de reemplazo en cualquiera de las siguientes formas:

Un objeto de elemento que se crea utilizando una función DOM de JavaScript como document.getElementById() o document.createElement()
Cadena HTML que representa contenido de reemplazo
Un objeto jQuery que contiene el elemento (o elementos) que se utilizarán para el reemplazo.
Una función de devolución de llamada que debería devolver código HTML de reemplazo

A continuación se muestra un ejemplo que muestra el método replaceWith() en acción. El primer párrafo está siendo reemplazado. nueva linea HTML, el segundo párrafo se reemplaza por el elemento objeto y el tercer párrafo se reemplaza por el resultado de una función que devuelve la hora actual:

$(inicio); function init() ( // Reemplazar el párrafo en #myDiv1 con un nuevo párrafo $("#myDiv1>p").replaceWith("

Nuevo párrafo con texto.

"); // Reemplazar el párrafo en #myDiv2 con una línea horizontal var hr = document.createElement("hr"); $("#myDiv2>p").replaceWith(hr); // Reemplazar el párrafo en #myDiv3 con una línea con la hora actual $("#myDiv3>p").replaceWith(currentTime function currentTime() ( var currentTime = new Date(); var currentHours = currentTime.getHours(); var currentMinutes = currentTime.getMinutes (); var currentSeconds = currentTime .getSeconds(); // Rellena los minutos y segundos con ceros a la izquierda, si es necesario currentMinutes = (currentMinutes< 10 ? "0" : "") + currentMinutes; currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds; return ("

Hora actual: " + HorasActuales + ":" + MinutosActuales + ":" + SegundosActuales + "

"); } }

Párrafo con texto

Después de ejecutar el código, el contenido de la página se verá así:

Nuevo párrafo con texto.

Hora actual: 13:52:17

replaceAll(): alternativa al método replaceWith()

El método replaceAll() hace el mismo trabajo que el método replaceWith(), pero en lugar de pasar el contenido de reemplazo como argumento, debe pasar el elemento a reemplazar.

Por ejemplo, las siguientes 2 líneas de código hacen lo mismo:

$("#myDiv").replaceWith("

Aquí está el nuevo texto.

"); $("

Aquí está el nuevo texto.

").replaceAll("#myDiv");

Elementos móviles

Ahora ya sabes cómo quitar y reemplazar elementos. La pregunta sigue siendo: ¿cómo mover elementos? árbol DOM? Por ejemplo, hay un párrafo dentro de un elemento div y debes moverlo a otro div.

Aunque jQuery no tiene un método específico para mover elementos alrededor del DOM, en realidad es muy fácil de hacer. Todo lo que tienes que hacer es resaltar los elementos que deseas mover; luego llame a un método "append", como append() , appendTo() o prepend() , para agregar el elemento seleccionado a otro elemento principal. jQuery reconocerá automáticamente que los elementos ya existen en la página y los moverá al nuevo padre.

El ejemplo reproduce el proceso descrito. El párrafo se mueve desde el primero. div en el segundo:

$(inicio); function init() ( // Mueve el párrafo de #myDiv1 a #myDiv2 $("#myDiv2").append($("#myDiv1>p")); )

Párrafo con texto

Después de ejecutar el código, la página se verá así:

Párrafo con texto

Y aquí hay otra forma de mover un elemento:

// Mueve el párrafo de #myDiv1 a #myDiv2 $("#myDiv1>p").appendTo($("#myDiv2"));

// Mueve el párrafo de #myDiv1 a #myDiv2 var para = $("#myDiv1>p"); para.prependTo("#myDiv2");// Mueve el párrafo de #myDiv1 a #myDiv2 // separándolo explícitamente y agregándolo a una nueva ubicación $("#myDiv1>p").detach().prependTo("#myDiv2");

El ejemplo 3 demuestra muy

tecnología útil

jQuery: enlace de método. Dado que la mayoría de los métodos jQuery devuelven objetos, puedes llamar a otro método en el objeto devuelto. Lo que a su vez devolverá el siguiente objeto jQuery, y así sucesivamente.

Párrafo con texto

Entonces, en el ejemplo anterior, el objeto jQuery es devuelto por el método detach(), que se llama para eliminar el párrafo. Y se llama al método prependTo() en el objeto jQuery devuelto para agregar el párrafo eliminado al nuevo elemento principal.

Párrafo con texto

¿Qué sucede si intentas mover algún contenido a más de un elemento principal al mismo tiempo? Si hace esto, jQuery primero eliminará el contenido del elemento principal anterior, luego clonará el contenido tantas veces como sea necesario y agregará los clones a cada elemento principal especificado. Por ejemplo:

$(inicio); function init() ( // Mueve el párrafo de #myDiv1 a #myDiv2 y #myDiv3 $("#myDiv2, #myDiv3").append($("#myDiv1>p")); )

Otro capítulo del libro “jQuery in Action” (de Bear Bibeault y Yehuda Katz). En primer lugar, pido disculpas a los lectores por el intervalo tan largo entre las publicaciones de los capítulos. Pero lo hice de todos modos, lo cual, por supuesto, me alegro. Espero que usted tampoco quede indiferente. Entonces, vendamos.

Capítulo 3. Dar vida a la página con jQuery.3.1. Manipular propiedades y atributos de los objetos.3.1.1. Manipulación de propiedades de objetos. La forma más sencilla de comprobar o cambiar los elementos del conjunto que hemos seleccionado es con el comando each():

$('img').cada uno(función(n)(
this.alt=’Esta es la imagen[’+n+’] con id igual a ‘+this.id;
});

Esta expresión se aplicará función especificada a cada elemento en la página, será cambiado atributo alternativo utilizando el número de serie del elemento y su id.

3.1.2, 3.1.3 Obtener y cambiar valores de atributos. Como veremos más adelante, muchos métodos en jQuery se utilizan tanto para lectura como para escritura, dependiendo de los atributos y la cantidad de atributos pasados al método.

Por tanto, el método attr() se puede utilizar tanto para obtener los valores de los atributos como para establecerlos. Si al método se le pasa solo el nombre del atributo, devolverá su valor, por ejemplo:

$(“#miImagen”).attr(“alt”)

Así es como obtenemos el alt para el elemento con id #myImage.

$(“#myImage”).attr(“alt”,”Mi imagen”)

Como probablemente ya habrás adivinado, establezcamos la opción alternativa "Mi imagen" en el mismo elemento.

Vale la pena señalar que en lugar de un nuevo valor de atributo, puede pasar una función a este método. Ejemplo:

$('*').attr('título',función(índice) (
devuelve 'Soy elemento'+índice+' y mi nombre es '+
(este.id? este.id: 'desarmado');
});

Esta función, que todavía nos resulta complicada, recorre todos los elementos del conjunto en la página, cambiando el atributo del título de acuerdo con el índice del elemento y su id.

Además, el método attr() te permite cambiar múltiples atributos al mismo tiempo:

$('input').attr((valor: '', título: 'Ingrese un valor'));

De esta manera podemos borrar todos los valores de entrada y establecer su título en "Ingrese un valor".

3.1.4 Eliminación de atributos. Para eliminar un atributo de un elemento DOM, jQuery tiene un método especial removeAttr(). Por ejemplo:

$('img').removeAttr('alt');

Esto eliminará el atributo alt de todos los elementos img seleccionados.

3.2 Trabajar con estilos de elementos 3.2.1 Agregar y eliminar nombres de clases. La definición de una clase se realiza de forma muy sencilla utilizando el método addClass(), que asigna el nombre de clase dado a todos los elementos del conjunto. Por ejemplo:

$('img').addClass('noBorder');

La eliminación de una clase se realiza con el comando removeClass():

$('img'). removeClass('noBorder');

El siguiente método es bastante interesante: toggleClass() asigna una clase a un elemento del conjunto si esta clase no ha sido definida para él y, a la inversa, elimina la clase de un elemento del conjunto si la clase ha sido asignada.

Puede resultar muy útil utilizar este método en tablas donde, por ejemplo, necesitamos cambiar las filas sombreadas a blancas y las filas blancas a sombreadas. Esto se hace así:

$('tr').toggleClass('despojado');

Donde rayado estaba el nombre de clase de la línea rayada.

3.2.2 Obtención e instalación de estilos. Trabajar directamente con estilos nos brinda grandes oportunidades.

El método css() funciona de manera similar al método attr(), permitiéndonos configurar Propiedades CSS para un elemento pasando un par nombre-valor a un método, o incluso cambiar varias propiedades pasando nuevos valores para ellas en el objeto.

Además, el método también maneja perfectamente las funciones que se le pasan como un valor de propiedad. Por ejemplo, aumentemos el ancho de los elementos del conjunto en 20 píxeles:

$('div.expandable').css('ancho', función())(
devolver $(esto).width() + 20 + “px”;
});

El siguiente ejemplo muestra la posibilidad de pasar un grupo de parámetros como objetos a un método:

$('div.example').css((ancho: '100px', alto: '200px'));

Finalmente, el método css() le permite obtener el valor de la propiedad pasada al método. Por ejemplo, puedes averiguar el ancho de un elemento de esta manera:

$('div.examle').css('ancho');

jQuery tiene comandos especiales para propiedades de uso frecuente. Entonces, podemos averiguar o cambiar la altura y el ancho de los objetos usando los métodos especiales height() y width(). En consecuencia, si pasamos un valor a un método, establecemos este valor de acuerdo con el método que lo recibió, y si simplemente llamamos al método, recibiremos el valor que necesitamos (en este caso, el valor pasado se establecerá en píxeles), es decir:

$('div.ejemplo').width(500)

Establece el ancho del bloque en 500 píxeles. Por cierto, esto es lo mismo que

$('div.ejemplo').css(“ancho”,”500px”)

Ahora puedes averiguar el ancho del bloque de esta manera:

$('div.ejemplo').width()

3.2.3 Un poco más comandos útiles para trabajar con estilos. A veces es necesario comprobar si un elemento pertenece a una determinada clase o no. La función hasClass() te ayudará a hacer esto:

$('p:primero').hasClass('sorpresaMe')

Si algún elemento del conjunto pertenece a clase especificada, la función devolverá verdadero.

3.3 Configuración del contenido de elementos 3.3.1 Reemplazo de HTML o texto. lo mas comando simple– html() – nos devuelve el código HTML del primer elemento coincidente si no se especificó el parámetro, o establece el fragmento HTML pasado como parámetro para el contenido de todos los elementos seleccionados.

Además, es posible obtener sólo el contenido textual de los elementos. Hay un comando text() para esto.

Tres

cuatro

Var texto=$("#laLista’).text();

Como resultado, la variable de texto contendrá la cadena "OneTwoThreeFour".

Al igual que con la función anterior, podemos establecer el contenido del texto para un elemento proporcionando a la función test() el texto requerido como parámetro. Además, si el texto contiene caracteres< или >serán reemplazados por caracteres especiales.

Vale la pena señalar que el uso de estos dos comandos para configurar el contenido de los elementos eliminará el contenido anterior, así que use estos comandos con cuidado.

3.3.2 Mover y copiar elementos. Para agregar contenido al final del contenido existente, use el comando append().

La función agrega la cadena o fragmento HTML que se le pasa como parámetros a un elemento DOM nuevo o existente, o a un conjunto de elementos jQuery anidados. Veamos algunos ejemplos.

$("p").append("algo de texto");

Esta expresión agregará el fragmento HTML creado a partir de la cadena pasada a la función al final del contenido ya existente de todos los elementos.

En la página.

El uso más complejo de este comando le permite designar elementos DOM existentes como hijos de otros elementos. Eso es:

$("p.appendToMe").append($("a.appendMe"))

Le permite asignar todos los enlaces de la clase appendMe elementos secundarios todos

A la página de clase appendToMe. En este caso, la posición final de los elementos asignados depende del número de elementos de destino. Si solo hay uno, los elementos asignados se moverán de su posición original en la página, pero si hay varios elementos de destino, los elementos asignados permanecerán en su lugar original y sus copias se asignarán a los elementos de destino. .

Para mover o copiar un elemento de una ubicación a otra, también puede usar el comando appendTo(), que mueve todos los elementos de un conjunto anidado al final del contenido del elemento de destino especificado como parámetro de función. Veamos el ejemplo para ver la diferencia con la función anterior:

$(" a.appendMe").appendTo($("p.appendToMe "))

El objetivo puede ser nuevamente un selector o un elemento DOM. Como en la función anterior, si solo hay un elemento de destino, se realizará una operación de movimiento, si hay varios objetos de destino, se realizará la copia.

Los siguientes comandos funcionan de manera similar a append() y appendTo():
anteponer() y anteponerTo() – inserciones elemento fuente antes del objetivo, no después.
before() e insertBefore(): inserta un elemento antes de los elementos de destino, no antes del primer hijo.
after() e insertAfter(): inserta el elemento después de los elementos de destino, en lugar de después del último elemento secundario.

Considere el siguiente ejemplo:

$(‘

¡Hola!

').insertAfter('p img');

Esta expresión creará un nuevo párrafo e insertará copias del mismo después de cada imagen dentro del párrafo.

3.3.3 Anidar elementos Otro tipo de manipulación DOM al que recurrimos a menudo es anidar elementos (o un grupo de elementos) dentro de algún otro elemento. Por ejemplo, podríamos querer poner todos los enlaces cierta clase adentro. Esto se puede hacer usando el comando wrap(). Este método anida el conjunto seleccionado de elementos dentro del código HTML pasado o un clon del elemento pasado.

$(“una.sorpresa”).wrap(“”);

$(“a.sorpresa”).wrap($(“div:first”));

¿Qué debemos hacer si necesitamos colocar todos los elementos seleccionados no uno por uno, sino juntos en algún tipo de contenedor compartido? La función wrapAll() nos ayudará con esto.

Bueno, cuando queremos colocar no todos los elementos, sino solo su contenido, en el contenedor que necesitamos, usamos la función wrapInner().

3.3.4 Eliminar elementos Si queremos borrar o eliminar un conjunto de elementos, esto se puede hacer fácilmente usando el comando remove(), que elimina todos los elementos de un conjunto anidado del DOM de la página.

Vale la pena considerar que, como muchos otros comandos de jQuery, el resultado de este comando vuelve a ser un conjunto de elementos. Y aunque lo hayamos eliminado del DOM, todavía podemos usarlo en otras funciones, por ejemplo, la misma appendTo() o insertAfter() u otras similares.

Para borrar elementos de su contenido, puede utilizar el comando vacío(). Elimina el contenido de todos los elementos DOM del conjunto.

Repartido eliminar aplicación() y after() para la operación de reemplazo. Esto se hace así:

$('div.elementToReplace').después('

estoy reemplazando el bloque

').eliminar();

Dado que after() devuelve el elemento original, simplemente podemos eliminarlo, dejando solo el nuevo párrafo.

Si te gusta la idea, puedes refinarla y escribir la siguiente función:

$.fn.replaceWith = función(html) (
devolver this.after(html).remove();
}

Luego realizaremos la operación anterior así:

$('div.elementToReplace').replaceWith('

estoy reemplazando el bloque

’);

¿Pero qué hacer cuando no queremos mover elementos, sino sólo copiarlos?

3.3.5 Clonación de elementos Para hacer esto, jQuery tiene el comando clone(). Crea y devuelve una copia del conjunto. Todos los elementos y niños se copian. Si se pasa el parámetro verdadero, también se copian todos los controladores.

La clonación de elementos tiene poco efecto hasta que hagamos algo con la copia. Aquí todo depende de nuestra imaginación. Aquí hay un par de ejemplos:

$('img').clone().appendTo('fieldset .photo');

Esta expresión hace una copia de todas las imágenes y las coloca en todos los elementos de la clase de fotografía.

Otro ejemplo:

$('ul').clone().insertBefore('#aquí');

Realiza una operación similar. Vale la pena señalar aquí que todos los elementos están clonados.

(si los hay, claro).
Y el último ejemplo:
$('ul').clone().insertBefore('#aquí').end().hide();
Esta expresión es similar a la operación anterior, pero después de insertar la copia, el comando end() selecciona el conjunto original, después de lo cual se oculta con el comando hide().
3.4 Operaciones con elementos de formulario La principal acción que se realiza con los formularios es trabajar con sus datos. El comando val() devuelve el contenido del atributo de valor del primer elemento de un conjunto. Cuando un elemento de formulario contiene varias opciones, se devuelve una matriz de los valores de todas esas opciones.
Este comando, aunque bastante útil, tiene una serie de limitaciones. Si el primer elemento del conjunto no es un elemento de formulario, recibiremos un mensaje de error. Además, este comando no distingue entre elementos marcados y no marcados de casillas de verificación o botones de opción.
Para el caso de un bastón de radio, se puede proceder de la siguiente manera:
$(':marcado').val()
Esta expresión devolverá el valor del único botón de opción seleccionado llamado radioGroup (o devolverá el valor indefinido si no se seleccionó ningún botón de opción). Este ejemplo no se puede aplicar a las casillas de verificación porque puede haber más de un valor seleccionado y, como se indicó, val() devuelve el contenido del atributo de valor del primer elemento del conjunto.
Al pasar un parámetro al comando, se establecerá como el valor para todos los elementos seleccionados del conjunto. Sin embargo, nuevamente existen una serie de restricciones. Por ejemplo, no puede establecer varios valores para un elemento de selección múltiple.
Otro uso de val() es configurar casillas de verificación y botones de opción o seleccionar opciones. Esto pasa una matriz de valores, y si alguno de ellos coincide con el valor del elemento, el elemento será seleccionado (marcado). Por ejemplo:
$('input,select').val(['uno','dos','tres']);
Esta expresión comprobará todos los elementos y si sus valores coinciden con alguna de las cadenas pasadas: una, dos o tres. Si los valores coinciden, se marcarán las casillas de verificación o botones de opción y se seleccionará la opción de selección.
Otro capítulo ha llegado a su fin. Una vez más, agradeceré las críticas saludables. Gracias.
Déjame recordarte también que siempre podrás encontrar este y otros artículos.

Cómo cambiar el contenido del elemento en jQuery

En este tutorial, intentaremos cambiar el contenido de los elementos en jQuery.

Entonces, la operación más utilizada es cambiar el contenido de los elementos. Fuera de la biblioteca jQuery, la propiedad InnerHTML se utiliza para este propósito. objeto del documento. Por ejemplo, para insertar un nuevo fragmento en un elemento con ID divl, puede utilizar el siguiente código.

alerta($("div").eq(0).text());

Nuevo valor

alerta($("div").html());

$("div").text("Nuevo valor");

$("#divl").append(" Nuevo texto");

Texto

Texto
Nuevo texto

Ahora agreguemos un elemento DOM.

$("#divl").append($(" Nuevo texto").get(0));
$("#divl").append($(" Nuevo texto")) ;

Anteponer (Expresión): agrega una expresión al comienzo del contenido del elemento seleccionado. El parámetro puede ser código HTML, un elemento DOM o una colección de elementos jQuery. El método es completamente idéntico al método appendO, excepto que agrega la Expresión no al final del elemento, sino al principio. Por ejemplo, agreguemos código HTML al comienzo del elemento.

$("#divl").prepend(" Nuevo texto");

Texto

El resultado se verá así.
Nuevo texto
Texto

$("Nuevo texto").appendTo("#divl");
$("#divl").append(" Nuevo texto");

$("Nuevo texto").prependTo("#divl");
$("#divl").prepend(" Nuevo texto");

Cómo agregar contenido antes o después de un elemento

En la sección anterior, analizamos cómo cambiar el contenido interno de un elemento. La biblioteca jQuery también proporciona métodos que le permiten agregar contenido antes o después de un elemento. Veamos estos métodos.

Aftag (Expresión): agrega una expresión después de todos los elementos de la colección. El parámetro puede ser código HTML, un elemento DOM o una colección de elementos jQuery. Por ejemplo, agreguemos código HTML después del elemento.

$("#divl").después(" Nuevo texto");
texto
El resultado se verá así.
texto Nuevo texto
Ahora agreguemos un elemento DOM.
$("#divl").después($(" Nuevo texto").get(0));

Ahora agreguemos el elemento de colección jQuery creado. $("#divl").después($(" Nuevo texto"));

Antes (Expresión): agrega una expresión antes de todos los elementos de la colección. El parámetro puede ser código HTML, un elemento DOM o una colección de elementos jQuery. El método es completamente idéntico al método after(), excepto que agrega la Expresión no después del elemento, sino antes de él. Por ejemplo, agreguemos código HTML antes del elemento.

$("#divl").antes(" Nuevo texto");
texto

El resultado se verá así.
Nuevo texto texto

InsertAfter (Selector): agrega una colección de elementos jQuery después de todos los elementos que coinciden con el selector especificado. Por ejemplo, agreguemos código HTML después del elemento con el identificador divl.

$("Nuevo texto").insertAfter("#divl");

El resultado será el mismo que usar el método after().
$("#divl").después(" Nuevo texto");

InsertBefore (Selector): agrega una colección de elementos jQuery antes de todos los elementos que coinciden con el selector especificado. Por ejemplo, agreguemos código HTML antes del elemento con el identificador divl.

$("Nuevo texto").insertBefore("#divl");

El resultado será el mismo que cuando se utiliza el método before().
$("#divl").antes(" Nuevo texto");

Elementos de anidamiento

Todos los elementos de la colección se pueden colocar en algún otro elemento. Los siguientes métodos están disponibles para anidar elementos.

Wraplnner (elemento HTML o elemento BOM): envuelve el contenido interno de cada elemento de la colección en otro elemento. Como ejemplo, resaltemos el contenido de todas las etiquetas div.

$ (“div”) .wraplnner (“”) ;
texto l texto 2
El resultado se verá así.
texto l
Texto 2

Se puede lograr el mismo efecto pasando un elemento DOM como parámetro.

$("div") .wraplnner(document.createElement("b"));

También puede pasar un elemento creado usando la función $().

$("div").wraplnner($(MM));

Wrap (elemento HTML o elemento BOM): encierra completamente cada elemento de la colección dentro de otro elemento.

$("div") .wrap("") ;
Texto l Texto 2

El resultado de la ejecución es este:
Texto l
Texto 2

WrapAll (elemento HTML o elemento BOM): recopila todos los elementos de la colección en un lugar y los anida en otro elemento.

$("div").wrapAll(" H);
Algún texto 1
Texto
Algún texto Texto 2
Algún texto 3 Texto 3

El resultado se verá así.
Algún texto 1
Texto lTexto 2Texto 3
Algún texto 2 Algún texto 3

Como puede ver en el ejemplo, todos los elementos de la colección se colocaron después del primer elemento y están ubicados dentro de la etiqueta u.

Mover y clonar elementos

Si especifica una colección de elementos jQuery existentes como parámetro para los métodos before(), prepend(), append() y after(), se moverán. El lugar donde se insertan los elementos depende del método específico: before() (antes del elemento), pend() (al principio del contenido), append() (al final del contenido), after() (después del elemento ). Por ejemplo, busquemos todos los enlaces de la página y agréguelos al final del elemento.

$("ttdivl").append($("a"));

Texto

yo

Texto 1

Como puede ver en el ejemplo, después de eliminar el contenido del elemento con el identificador divl, el elemento en sí sigue estando disponible para su manipulación.

Eliminar ([Selector]): elimina completamente elementos del modelo de objetos del documento.

Este artículo será eliminado por completo.

Este ejemplo demuestra la ausencia de un elemento después de hacer clic en el botón Eliminar. Al hacer clic en el botón Número de elementos por primera vez nos dará el número 1, y si hacemos clic en él después de eliminar el elemento, obtendremos el número 0.

Si la colección consta de más de un elemento, se eliminarán todos los elementos. El método remove() le permite configurar condición adicional, que deben coincidir los elementos a eliminar. Como ejemplo, eliminemos todos los enlaces con la extensión. php.

$("a") . eliminar(" ");

Cambiar el contenido de los elementos.

Ya hemos aprendido cómo obtener una colección de elementos y acceder a su elemento individual. Ahora consideremos varios metodos, permitiéndole cambiar las propiedades y valores de los elementos de la colección. Ya hemos utilizado algunos métodos en nuestros ejemplos para mostrar el resultado o cambiar las propiedades de los elementos.

La operación más utilizada es cambiar el contenido de los elementos. Fuera de la biblioteca jQuery, la propiedad internalHTML del objeto del documento se utiliza para este propósito. Por ejemplo, para insertar un nuevo fragmento en un elemento con ID divl, puede utilizar el siguiente código.

document.getElementByld("divl").innerHTML = "Nuevo texto";

La biblioteca jQuery también le permite utilizar esta propiedad. Para hacer esto, encontramos el elemento usando la función $() y luego convertimos la colección de elementos jQuery en un conjunto de elementos DOM.

$("#divl").innerHTML = "Nuevo texto";

También puedes utilizar el método get() para este propósito.

$("#divl").get(0).innerHTML = "Nuevo texto";

La biblioteca jQuery proporciona los siguientes métodos para cambiar el contenido de los elementos:

Texto(): le permite obtener o configurar el texto de un elemento. Si no se especifica el parámetro, el método devuelve valor de texto sin etiquetas. Si hay varios elementos en la colección, todos los valores se devolverán como una cadena. Si necesita obtener el valor sólo del primer elemento de una colección, puede utilizar el método eq().

alerta($("div").eq(0).text());

También puedes restringir el conjunto usando un selector:

primero. alerta($("div:first").text());

Cuando especifica una cadena como parámetro, reemplazará el contenido de todos los elementos de la colección. Si hay caracteres especiales en la línea, serán reemplazados por equivalentes HTML.

$("div").text("Nuevo valor");

En este ejemplo, la línea del código fuente HTML tendría este aspecto.

Nuevo significado

Html(): le permite obtener o configurar el código HTML de un elemento. Si no se especifica el parámetro, el método devuelve el valor junto con las etiquetas. Si hay varios elementos en la colección, solo se devolverá el valor del primer elemento.

alerta($("div").html());

Cuando especifica código HTML como parámetro, reemplazará el contenido de todos los elementos de la colección y modelo de objeto el documento será actualizado. Generaremos el código HTML en todas las etiquetas div.

$("div").text("Nuevo valor");

Si necesita cambiar el valor solo del primer elemento de la colección, puede usar el método eq() o el selector: first.

$("div:first").html("Nuevo valor");

Agregar: agrega una expresión al final del contenido del elemento seleccionado. El parámetro puede ser código HTML, un elemento DOM o una colección de elementos jQuery. Por ejemplo, agreguemos código HTML al final del elemento.

$("#divl").append(" Nuevo texto");

Texto

El resultado se verá así.

Texto
Nuevo texto

Ahora agreguemos un elemento DOM.

$("#divl").append($(" Nuevo texto").get(0));
Ahora agreguemos el elemento de colección jQuery creado.
$("#divl").append($(" Nuevo texto")) ;

Anteponer (Expresión): agrega una expresión al comienzo del contenido del elemento seleccionado. El parámetro puede ser código HTML, un elemento DOM o una colección de elementos jQuery. El método es completamente idéntico al método append(), excepto que agrega la Expresión no al final del elemento, sino al principio. Por ejemplo, agreguemos código HTML al comienzo del elemento.

$("#divl").prepend(" Nuevo texto");

Texto

El resultado se verá así.
Nuevo texto
Texto

AppendTo (Selector): agrega una colección de elementos jQuery al final de todos los elementos que coinciden con el selector especificado. Por ejemplo, agreguemos código HTML al final del elemento con el identificador divl.

$("Nuevo texto").appendTo("#divl");

El resultado será el mismo que si se utilizara el método append().
$("#divl").append(" Nuevo texto");

Como puede ver en el ejemplo, intercambiamos los parámetros y usamos el método append() en lugar del método appendTo().

PrependTo (Selector): agrega una colección de elementos jQuery al comienzo de todos los elementos que coinciden con el selector especificado. Por ejemplo, agreguemos código HTML al comienzo del elemento con el identificador divl.

$("Nuevo texto").prependTo("#divl");

El resultado será el mismo que si se utilizara el método prepend().
$("#divl").prepend(" Nuevo texto");

Hay ocasiones en las que es posible que necesites crear un elemento arrastrable dentro de tu aplicación web. Esta es una gran funcionalidad; sin embargo, es posible que desee que el elemento permanezca en su nueva ubicación después de arrastrarlo. En el artículo de hoy, aprenderá cómo arrastrar y acoplar fácilmente a una nueva ubicación. elemento requerido incluso después de recargar la página, capturando y almacenando sus coordenadas X e Y.
Guión
Entonces tienes un elemento en la página. Puedes arrastrarlo hacia adelante y hacia atrás. Pero cuando se recarga la página, el elemento vuelve a su posición original. Y aunque necesitamos que el elemento se pueda arrastrar, queremos que nuestro elemento solo deba arrastrarse una vez. Veamos una solución simple que implementa esta funcionalidad.
Comenzar
Para este ejemplo necesitaremos la biblioteca y el complemento JQuery-JSON. Aparte de esto, también usaremos PHP y base de datos. datos mysql para analizar y almacenar nuestros datos. Si eres nuevo en jQuery, no te preocupes. JQuery es una biblioteca de JavaScript extensible, rápida y liviana que es fácil y divertida de usar. La biblioteca tiene documentación bien estructurada y una gran comunidad.
HTML y CSS
Comencemos con el marcado y los estilos HTML de nuestro ejemplo. Primero el CSS:
HTML, cuerpo (fondo:#151515; margen:0 0 0 0; relleno:0 0 0 0; ) #glassbox (fondo:#333; borde:1px sólido #000; altura:400px; margen:30px auto auto auto; posición: relativa; ancho: 960 px; -moz-border-radius: 10 px; -moz-border-radius: 10 px; radio: 10px; ) #responder( color:#fff; margen:0 auto 0 auto; ancho:960px; )
CSS es muy simple. Asignamos propiedades nulas de html y body para limpiar elementos externos y relleno, luego configuramos la altura, el ancho y otras propiedades de nuestros elementos. - moz-border-radius y -webkit-border-radius son dos propiedades que nos permiten crear esquinas redondeadas(actualmente solo funciona en Firefox y Safari 3) para nuestros elementos. Ahora, echemos un vistazo al HTML:
Persistencia simple de elementos arrastrables con jQuery Mover la caja
Como puedes ver, hemos creado un muy pagina sencilla, que incluía nuestro CSS, biblioteca de javascript y complementos, además, la página contiene elementos a los que aplicaremos algunos efectos y eventos. Tenga en cuenta que el archivo jquery-ui es una compilación personalizada que solo incluye la funcionalidad principal y de arrastrar y soltar.

javascript
¡Ahora viene la parte divertida! Primero veamos las funciones básicas que usaremos para aplicar algunos efectos a nuestros elementos. Analicemos todo hasta el fondo.
$(documento).ready(function() ( $("#element").draggable(( contención: "#glassbox", desplazamiento: false ))
Primero le decimos al navegador: “Oye, este es el código que queremos ejecutar; No es HTML, es JavaScript." Luego, esperamos a que el documento se cargue por completo, después de que esto haya sucedido, llamamos a una función para obtener nuestro bloque #element y le agregamos un controlador de arrastre con configuraciones básicas. La opción de contención contiene nuestro elemento dentro del bloque principal y configuramos el valor de desplazamiento en falso porque no necesitamos desplazarnos.

Mousemove(función())( var coord = $(this).position(); $("p:last").text("left: " + coord.left + ", top: " + coord.top); ) )
Dentro de este fragmento, llamamos al controlador de eventos mousemove y le decimos: "Cuando el mouse se mueve, establezca la variable coord en el valor de la posición actual de nuestro bloque #elemento". Luego obtenemos el último párrafo del bloque #(“). p: last”) e imprima el texto, generando los valores de las propiedades left(x) y top(y) de nuestro elemento, en relación con el objeto principal (que es el bloque #glassbox).
Mouseup(función())( var coords=; var coord = $(this).position(); var item=( coordTop: coord.left, coordLeft: coord.top ); coords.push(item); var orden = (coords: coords); $.post("updatecoords.php", "data="+$.toJSON(orden), función(respuesta)( if(response=="éxito") $("#respond"). html ("¡Coordenadas X e Y guardadas!").hide().fadeIn(1000); setTimeout(function())( $("#respond").fadeOut(1000); , 2000)); )); es;/script>
Bueno, sí, esto es más complicado. Vamos a hacer un montón de cosas en este fragmento. Primero, configuramos una matriz vacía y luego obtenemos algunos valores para llenarla. Al llamar al controlador de eventos .mouseup(), le decimos al navegador que escuche un evento cuando suelta el botón del mouse. Especificamos que la variable coords es una matriz vacía y nuevamente establecemos su valor en la posición de nuestro bloque #element.

A continuación, necesitamos crear una lista de dos líneas, que serán coordTop: y coordLeft:, correspondientes a las posiciones izquierda y superior de nuestro bloque. Usando la línea coords.push(item) , completaremos nuestra lista con una matriz de coordenadas. Luego configuramos la variable de orden como una nueva lista en la que la clave de coordenadas corresponderá a nuestra matriz de coordenadas. Ahora un poco de Ajax.

$.post es un controlador solicitud AJAX que cargas pagina eliminada, mediante el uso método HTTP CORREO. Esta función toma siguientes parámetros: url, fecha, respuesta y tipo de datos a devolver. En este ejemplo, señalaremos el archivo updatecoords.php como nuestra URL porque es allí donde queremos enviar nuestros datos. A continuación, definiremos el tipo de datos incluyendo la función $.toJSON definida en el complemento JSON y asignaremos la variable de orden para que sean los datos que .toJSON debería devolver.

A continuación, creamos una respuesta que verifica que devuelva una respuesta exitosa desde nuestro archivo PHP. Si se recibe una respuesta exitosa, mostramos un mensaje sobre el guardado exitoso de las coordenadas usando el método .fadeIn() y una velocidad de 1000 milisegundos, luego configuramos un temporizador para 2000 milisegundos y nuevamente ocultamos lentamente este mensaje usando .fadeOut( ) método. Así se verá nuestro JavaScript en su totalidad:
$(documento).ready(function() ( $("#element").draggable(( contención: "#glassbox", desplazamiento: false )).mousemove(function())( var coord = $(this). posición (); $("p:último").text("izquierda: " + coord.left + ", arriba: " + coord.top )).mouseup(función())( var coords=; var coord = $(this).position(); var item=( coordTop: coord.left, coordLeft: coords.push(item); var order = ( $.post("updatecoords.php); ", "data="+$ .toJSON(orden), función(respuesta)( if(respuesta=="éxito") $("#respond").html("¡Coordenadas X e Y guardadas!").hide( ).fadeIn(1000); setTimeout (función())( $("#respond").fadeOut(1000); ));
Coloque este código debajo del HTML, justo después de la etiqueta del cuerpo de cierre.
PHP
Bien, hagamos algo con los datos que provienen de nuestro JQuery. Primero necesitamos crear una base de datos simple para almacenar nuestras coordenadas, que luego usaremos para determinar la posición de nuestro elemento. A continuación, necesitaremos un archivo config.php, que registrará los parámetros para conectarse a la base de datos, y luego pasaremos a updatecords.php.

Base de datos: "xycoords" CREAR TABLA SI NO EXISTE coords (id int(11) NOT NULL AUTO_INCREMENT, x_pos int(4) NOT NULL, y_pos int(4) NOT NULL, PRIMARY KEY (id)) MOTOR=MyISAM DEFAULT CHARSET=latin1 ;
configuración.php

actualizarcoords.php

Aquí todo es bastante sencillo. Lo primero que hacemos es comprobar si los datos han sido transferidos al fichero. Si esto sucede, incluimos nuestro archivo de configuración config.php y asignamos a la variable $data el valor json_decode (variable de publicación pasada); json_decode es una función PHP introducida en PHP 5.2.0 que le permite decodificar una cadena JSON.

Dado que nuestra variable $data contiene una matriz de datos, debemos analizarla en partes para obtener valores requeridos. Para hacer esto, recorreremos la matriz $data->coords() (que se obtuvo de la variable de orden en JavaScript) y procesaremos cada elemento. Como resultado, de cada par clave-valor se creará un objeto de lista, que luego especificaremos y crearemos una variable para mostrarlo. En este caso, usaremos la función preg_replace para excluir caracteres innecesarios. Además, prepararemos nuestros valores para insertarlos en la base de datos escapando de comillas y apóstrofos usando la función mysqli_real_escape_string. Si todo salió bien, necesitaremos devolver un resultado de JavaScript exitoso.

En conclusión
Ahora que tenemos todo listo, para obtener las coordenadas del elemento y pasarlas a PHP para escribirlas, necesitaremos cambiar nuestro marcado HTML para mostrar la posición del elemento. Para hacer esto, eliminaremos el marcado HTML simple y lo crearemos usando PHP: