post thumbnail

jQuery desde Cero: Manipulando Contenido - parte 2

Publicado Por: Oscar González, El 27/01/2014


Detalles del Curso:

Dificultad: Novato

Duración: 10 min


Más artículos en jQuery desde Cero

Este es el artículo Manipulando Contenido - parte 2 de la serie jQuery desde Cero - Mostrar todos

  1. Introducción
  2. Selectores y Filtros Básicos
  3. Filtros Avanzados
  4. Recorriendo el Documento
  5. Manipulando Contenido - parte 1
  6. Manipulando Contenido - parte 2
  7. Eventos
  8. Animaciones y Efectos
  9. AJAX

Ya hemos visto como crear, obtener, y asignar contenido, manipular atributos, insertar contenido. Ahora veamos otro grupo de operaciones que nos permiten envolver, copiar y reemplazar contenido, además de algunas otras que involucran css.


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>

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>');

});

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>');

});

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>');

});

Ahora voy a reemplazar los elementos seleccionados con los buscados.

$('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();

});

Vaciemos el "ul" con la clase "avengers":

$('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);

});

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.
$('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'): Retorna true o false si 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.
$('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.


¿Te ha gustado esta publicación?

Compártela:

Por Oscar González

Conoce más sobre este autor aquí


comments powered by Disqus