Envolviendo contenido
Envolver contenido significa introducir un elemento seleccionado, dentro de otro nuevo. Para eso contamos con las siguientes funciones:
wrap(html): Envuelve cada elemento seleccionado con el html especificado.wrap(elemento): Envuelve cada elemento seleccionado con el elemento especificado.wrapAll(html): Envuelve el grupo de elementos seleccionados con el html especificado.wrapAll(elemento): Envuelve el grupo de elementos seleccionados con el elemento especificado.wrapInner(html): Envuelve los elementos hijos de cada elemento seleccionado con el html especificado.wrapInner(elemento): Envuelve los elementos hijos de cada elemento seleccionado con el elemento especificado.
Hagamos unas pruebas dado el siguiente html:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery desde Cero</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> </head> <body> <ul class="avengers"> <li>Ironman</li> <li>Thor</li> <li>Captain America</li> <li>Hulk</li> </ul> <p>texto de prueba</p> <p>texto de prueba 2</p> <p>texto de prueba 3</p> <p>texto de prueba 4</p> </body> </html>12345678910111213141516171819202122232425 <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>jQuerydesdeCero</title> <script type="text/javascript"src="http://code.jquery.com/jquery-2.0.3.min.js"></script> </head> <body> <ul class="avengers"> <li>Ironman</li> <li>Thor</li> <li>Captain America</li> <li>Hulk</li> </ul> <p>texto de prueba</p> <p>texto de prueba2</p> <p>texto de prueba3</p> <p>texto de prueba4</p> </body></html>
En este ejemplo envolvemos todos los elementos “p” (párrafo) y los envolvemos en un “div” con borde de color rojo.
$('document').ready(function() { $('p').wrapAll('<div style="border:3px solid red"></div>'); });12345 $('document')ready(function(){ $('p')wrapAll('<div style="border:3px solid red"></div>'); });
También podemos seleccionar el elemento que tenga la clase de css “avengers” y envolverla con el mismo “div”.
$('document').ready(function() { $('.avengers').wrap('<div style="border:3px solid red"></div>'); });12345 $('document')ready(function(){ $('.avengers')wrap('<div style="border:3px solid red"></div>'); });
Reemplazando contenido
Con jQuery también podemos reemplazar contenido. Esto significa que podemos cambiar el contenido de un elemento por otro nuevo designado arbitrariamente. Para esto contamos con las siguiente funciones:
replaceWith(contenido): Reemplaza el elemento seleccionado con el contenido de parámetro.replaceAll(selector): Reemplaza todos los elementos seleccionados con los elementos buscados.
Por ejemplo, Seleccionaré el primer “li” del “ul” de clase “avengers” y lo reemplazaré por otro:
$('document').ready(function() { $('.avengers li').first().replaceWith('<li>Ironman reemplazado por Oscar</li>'); });12345 $('document')ready(function(){ $('.avengers li')first()replaceWith('<li>Ironman reemplazado por Oscar</li>'); });
Ahora voy a reemplazar los elementos seleccionados con los buscados.
$('document').ready(function() { $('<p>nadie</p>').replaceAll('.avengers li'); });12345 $('document')ready(function(){ $('<p>nadie</p>')replaceAll('.avengers li'); });
Vaciando y removiendo elementos
Con la función empty vaciamos y con la función remove removemos, muy revelador.
Eliminemos el primer “li” del “ul”:
$('document').ready(function() { // debería desaparecer "ironman" $('.avengers li').first().remove(); });123456 $('document')ready(function(){ // debería desaparecer "ironman" $('.avengers li')first()remove(); });
Vaciemos el “ul” con la clase “avengers”:
$('document').ready(function() { // debería eliminar todos los avengers de la lista $('.avengers').empty(); });123456 $('document')ready(function(){ // debería eliminar todos los avengers de la lista $('.avengers')empty(); });
Clonando elementos
La función clone copia elementos y los retorna, de modo que se puede agregar otro elemento al DOM idéntico al orinal.
Clonemos a “ironman” en la lista con clase “avengers”:
$('document').ready(function() { // debería haber 2 ironmans $('.avengers li').first().clone().prependTo(.avengers); });123456 $('document')ready(function(){ // debería haber 2 ironmans $('.avengers li')first()clone()prependTo(avengers); });
En este ejemplo encadené toda la sentencia. De modo que cloné y agregué en un solo paso.
Trabajando con CSS
Las funciones de css nos permiten agregar propiedades de estilo a los elementos seleccionados del DOM. Para ello contamos con las siguientes funciones:
css('nombre'): Retorna el valor de la propiedad css llamada “nombre” elemento seleccionado.css(propiedades): Asigna un conjunto de propiedades css enviadas en un objeto de javascript.css(propiedad, valor): Asigna “valor” la “propiedad” del elemento seleccionado.
12345678 $('document')ready(function(){ $('p')first()css({ 'border':'3px solid green', 'background-color':'blue' }); });
También tenemos funciones para gestionar clases de css:
addClass('clase'): Agrega la “clase” a cada elemento seleccionado.hasClass('clase'): Retornatrueofalsesi tiene o no tiene la clase propuesta.removeClass('class'): Elimina la “clase”.toggleClass('clase'): Agrega la “clase” si no esta presente en el elemento o la elimina en caso de estar presente.toggleClass('clase'): Agrega la “clase” si no esta presente en el elemento o la elimina en caso de estar presente.
123456 $('document')ready(function(){ // debería quitarle la clase avengers al elemento "ul" $('ul')toggleClass('avengers'); });
Conclusión
En este tutorial hemos aprendido los puntos destacados que faltaban sobre la manipulación de contenido.
En próximos capítulos estaremos hablando sobre eventos, animaciones, efectos, etc.
Sigue aprendiendo más con Codehero y colabora con la expansión de la comunidad. Comparte este artículo si te parece si te parece útil, comenta si tienes dudas o quieres aportar algo.
Saludos y hasta la próxima.