jQuery - Manipulación DOM
JQuery proporciona métodos para manipular DOM de manera eficiente. No es necesario escribir código grande para modificar el valor del atributo de ningún elemento o para extraer código HTML de un párrafo o división.
JQuery proporciona métodos como .attr (), .html () y .val () que actúan como captadores, recuperando información de los elementos DOM para su uso posterior.
Manipulación de contenido
los html( ) El método obtiene el contenido html (innerHTML) del primer elemento coincidente.
Aquí está la sintaxis del método:
selector.html( )Ejemplo
A continuación se muestra un ejemplo que utiliza los métodos .html () y .text (val). Aquí .html () recupera contenido HTML del objeto y luego el método .text (val) establece el valor del objeto usando el parámetro pasado -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
var content = $(this).html();
$("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Esto producirá el siguiente resultado:
Reemplazo del elemento DOM
Puede reemplazar un elemento DOM completo con los elementos HTML o DOM especificados. losreplaceWith( content ) El método sirve muy bien para este propósito.
Aquí está la sintaxis del método:
selector.replaceWith( content )Aquí el contenido es lo que quieres tener en lugar del elemento original. Puede ser HTML o texto simple.
Ejemplo
A continuación se muestra un ejemplo que reemplazaría el elemento de división con "<h1> JQuery is Great </h1>" -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Esto producirá el siguiente resultado:
Eliminar elementos DOM
Puede haber una situación en la que desee eliminar uno o más elementos DOM del documento. JQuery proporciona dos métodos para manejar la situación.
los empty( ) método elimina todos los nodos secundarios del conjunto de elementos coincidentes donde como método remove( expr ) El método elimina todos los elementos coincidentes del DOM.
Aquí está la sintaxis del método:
selector.remove( [ expr ])
or
selector.empty( )Puede pasar el parámetro opcional expr para filtrar el conjunto de elementos que se eliminarán.
Ejemplo
A continuación se muestra un ejemplo en el que los elementos se eliminan tan pronto como se hace clic en ellos:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Esto producirá el siguiente resultado:
Insertar elementos DOM
Puede haber una situación en la que desee insertar uno o más elementos DOM nuevos en su documento existente. JQuery proporciona varios métodos para insertar elementos en varias ubicaciones.
los after( content ) método inserta contenido después de cada uno de los elementos coincidentes donde como método before( content ) El método inserta contenido antes de cada uno de los elementos coincidentes.
Aquí está la sintaxis del método:
selector.after( content )
or
selector.before( content )Aquí el contenido es lo que desea insertar. Puede ser HTML o texto simple.
Ejemplo
A continuación se muestra un ejemplo en el que se insertan elementos <div> justo antes del elemento en el que se hace clic:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).before('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Esto producirá el siguiente resultado:
Métodos de manipulación DOM
La siguiente tabla enumera todos los métodos que puede usar para manipular elementos DOM:
| No Señor. | Método y descripción |
|---|---|
| 1 | después (contenido)
Inserte contenido después de cada uno de los elementos coincidentes. |
| 2 |
añadir (contenido)
Agrega contenido al interior de cada elemento coincidente. |
| 3 | appendTo (selector)
Agregue todos los elementos coincidentes a otro conjunto de elementos especificado. |
| 4 | antes (contenido)
Inserte contenido antes de cada uno de los elementos coincidentes. |
| 5 | clon (bool)
Clone los elementos DOM coincidentes y todos sus controladores de eventos, y seleccione los clones. |
| 6 | clon ()
Clonar elementos DOM coincidentes y seleccionar los clones. |
| 7 | vacío ()
Elimine todos los nodos secundarios del conjunto de elementos coincidentes. |
| 8 | html (val)
Establezca el contenido html de cada elemento coincidente. |
| 9 | html ()
Obtenga el contenido html (innerHTML) del primer elemento coincidente. |
| 10 | insertAfter (selector)
Inserte todos los elementos coincidentes después de otro conjunto de elementos especificado. |
| 11 | insertBefore (selector)
Inserte todos los elementos coincidentes antes de otro conjunto de elementos especificado. |
| 12 | anteponer (contenido)
Añada contenido al interior de cada elemento coincidente. |
| 13 | prependTo (selector)
Anteponer todos los elementos coincidentes a otro conjunto de elementos especificado. |
| 14 | eliminar (expr)
Elimina todos los elementos coincidentes del DOM. |
| 15 | replaceAll (selector)
Reemplaza los elementos emparejados por el selector especificado con los elementos emparejados. |
| dieciséis | replaceWith (contenido)
Reemplaza todos los elementos coincidentes con los elementos HTML o DOM especificados. |
| 17 | texto (val)
Establezca el contenido de texto de todos los elementos coincidentes. |
| 18 | texto ()
Obtenga el contenido de texto combinado de todos los elementos coincidentes. |
| 19 | envolver (elem)
Envuelva cada elemento coincidente con el elemento especificado. |
| 20 | envolver (html)
Envuelva cada elemento coincidente con el contenido HTML especificado. |
| 21 | wrapAll (elem)
Envuelva todos los elementos del conjunto combinado en un solo elemento contenedor. |
| 22 | wrapAll (html)
Envuelva todos los elementos del conjunto combinado en un solo elemento contenedor. |
| 23 | wrapInner (elem)
Envuelva el contenido secundario interno de cada elemento coincidente (incluidos los nodos de texto) con un elemento DOM. |
| 24 | wrapInner (html)
Envuelva el contenido secundario interno de cada elemento coincidente (incluidos los nodos de texto) con una estructura HTML. |