post thumbnail

jQuery desde Cero: Manipulando Contenido - parte 1

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


Detalles del Curso:

Dificultad: Novato

Duración: 15 min


Más artículos en jQuery desde Cero

Este es el artículo Manipulando Contenido - parte 1 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

En el capítulo anterior estudiamos varias funciones para obtener contenido del documento, veamos ahora como podemos manipular el contenido obtenido.


Introducción

Cuando seleccionamos y filtramos contenido de una página web, lo hacemos normalmente porque queremos hacer algo con el. A veces queremos crear nuevo contenido y agregarlo dinámicamente a la página.

jQuery tiene funciones para crear, copiar, eliminar y moved contenido, incluso para envolver elementos dentro de otros. También provee soporte para trabajar con css.


Creando Contenido

Podemos crear contenido HTML pasando como parámetro el código a la función $().

Por ejemplo:

var p = $('<p>Nuevo Párrafo</p>');

// igualmente se puede
var htmlString = '<p>Nuevo Párrafo</p>';
var p = $(htmlString);

Adicionalmente podemos usar los métodos html() y text() para obtener y asignar contenido:

  • html(): retorna el HTML contenido en el primer elemento seleccionado.
  • html(htmlString): le asigna el valor de la variable htmlString como contenido HTML a todos los elementos encontrados.
  • text(): retorna el texto contenido en el primer elemento seleccionado.
  • text(htmlString): le asigna el valor de la variable htmlString como texto a todos los elementos encontrados.

Si pasamos HTML la función text(), el código será escapado y mostrado como texto.

Por ejemplo, partiendo del siguiente HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Prueba jQuery</title>

  <script type="text/javascript" src="javascript/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>
</body>
</html>

Apliquemos el siguiente javascript:

<script type="text/javascript">

   $('document').ready(function() {

     $('.avengers').html('<li>Black Widow</li>');

   });

</script>

Este código selecciona el elemento con la clase "avengers", y reemplaza su contenido HTML por

  • Black Widow
  • .

    Podemos también crear un elementos primero y luego asignarlo:

    <script type="text/javascript">
    
       $('document').ready(function() {
    
         var blackWidow = $('<li>Black Widow</li>');
    
         $('.avengers').html(blackWidow.html());
    
       });
    
    </script>
    

    Manipulando Atributos

    jQuery permite la manipulación de atributos de uno o varios elementos HTML mediante las siguientes funciones:

    • attr(nombre): Retorna el valor del atributo "nombre" del elemento seleccionado.
    • attr({nombre: valor}): Asigna varios atributos del elemento seleccionado. Para asignar los atributos se usa la notación de objeto de javascript (JSON).
    • attr(nombre, valor): Asigna "valor" al atributo "nombre" del elemento seleccionado.
    • removeAttr(nombre): Elimina el atributo "nombre" del elemento seleccionado.

    Veamos un ejemplo partiendo del siguiente HTML:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Prueba jQuery</title>
    
      <script type="text/javascript" src="javascript/jquery-2.0.3.min.js"></script>
    
    </head>
    <body>
      <h1>The Avengers</h1>
    
      <img src="http://upload.wikimedia.org/wikipedia/en/0/0f/Avs38.jpg"></img>
    
      </br>
    
      <a href="#">Ver en Wikipedia</a>
    
    </body>
    </html>
    
    <script type="text/javascript">
    
      $('document').ready(function() {
    
        $('a').attr('href', 'http://en.wikipedia.org/wiki/Avengers_(comics)');
    
      });
    
    </script>
    

    Con esto asignamos una dirección al link en la página.

    <script type="text/javascript">
    
      $('document').ready(function() {
    
        $('img').attr('alt', 'portada de los avengers');
    
      });
    
    </script>
    

    Ahora aquí agregamos un alt a la imagen.

    <script type="text/javascript">
    
      $('document').ready(function() {
    
        $('img').attr({
          src: 'http://upload.wikimedia.org/wikipedia/en/f/f9/TheAvengers2012Poster.jpg',
          alt: 'Poster de Avengers, la pelicula'
        });
    
        $('a').removeAttr('href');
    
      });
    
    </script>
    

    Asignamos un nuevo source y alt a la imagen, y eliminamos el href del link.


    Insertando Contenido

    Las siguientes funciones son las propuestas por jQuery para agregar contenido a los elementos seleccionados:

    • append(contenido): agrega el contenido dentro del los elementos seleccionados.
    • appendTo(selector): agrega el contenido a otros elementos especificados.
    • prepend(contenido): agrega el contenido de primero dentro de los elementos seleccionados.
    • prependTo(selector): agrega el contenido de primero a otros elementos especificados.
    • after(contenido): agrega el contenido después del elemento seleccionado.
    • before(contenido): agrega el contenido antes del elemento seleccionado.
    • insertAfter(selector): agrega el contenido después de otros elementos elementos seleccionados.
    • insertBefore(contenido): agrega el contenido antes de otros elementos elementos seleccionados.

    Entonces, partiendo del siguiente HTML:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Prueba jQuery</title>
    
      <script type="text/javascript" src="javascript/jquery-2.0.3.min.js"></script>
    
    </head>
    <body>
      <h1>The Avengers</h1>
      <ul class="avengers">
        <li>Ironman</li>
        <li>Thor</li>
        <li>Captain America</li>
        <li>Hulk</li>
      </ul>
    </body>
    </html>
    

    Ejecutemos algunos ejemplos:

    <script type="text/javascript">
    
      $('document').ready(function() {
    
        $('.avengers').append('<li>Black Widow</li>');
    
      });
    
    </script>
    

    Aquí agregamos un elemento al final la lista.

    <script type="text/javascript">
    
      $('document').ready(function() {
    
        $('.avengers').prepend('<li>Black Widow</li>');
    
      });
    
    </script>
    

    Se agrega al principio de la lista.

    <script type="text/javascript">
    
      $('document').ready(function() {
    
        $('h1').appendTo('li:first');
    
      });
    
    </script>
    

    Agregamos el titulo de lao página (h1) al primer elemento de la lista.


    Conclusión

    Aún quedan un par de temas por tocar, como lo son envolver, reemplazar, remover elementos y manipular su CSS. Estos puntos los estaremos desarrollando en el próximo capítulo.

    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