Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de jQuery

Programar en javascript puede ser más fácil sabiendo utilizar jQuery


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 122

Visitas el mes pasado: 145

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual jQuery : desarrollo web
Desarrollo Web
jQuery Tutorial
w3schools.com
jQuery API - (página oficial)
jquery.com
Manual de jQuery
lawebera.es
Fundamentos de jQuery
librojquery.com
Introducción al jQuery
www.comocreartuweb.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




jQuery (IV)

Lectura y escritura

imagen jquery

introducción

En javascript tenemos diversos métodos para manipular la página. Gran parte de estos métodos se basan en leer el contenido de la misma, o en sobreescribir o cambiar su contenido. Bastantes métodos pueden usarse a la vez como lectura y como escritura. El uso del método en uno u otro sentido dependerá del número de parámetros que le pasemos en el paréntesis.


métodos .html() y .text()

Ya hemos visto el método .html() en páginas anteriores. Este método lee o cambia el contenido HTML de dentro de su etiqueta, de forma similar a como lo hace la propiedad de javascript .innerHTML.

para leer el contenido de un elemento (con id="elemento") escribiremos:

contenido=$(#elemento).html();

Tal como vemos aquí podemos guardar el contenido de la lectura del elemento en una variable para utilizarlo más adelante.

Para escribir algo en el elemento que sustituya a su contenido escribiremos:

$(#elemento).html("nuevo contenido del elemento");

De forma similar funciona el método .text() con la diferencia de que aquí se copia sólo el texto del elemento, deshechando el contenido de las etiquetas html.

para lectura del contenido escribiremos:

contenido=$(#elemento).text();

y para escritura, reemplazando el contenido anterior escribiremos:

$(#elemento).text("nuevo contenido del elemento");

Veamos aquí un ejemplo en el que tenemos un texto de prueba y dos botones, el primero de ellos nos muestra en una ventana de alerta la lectura con .html() y el segundo con .text();

texto con una palabra en negrita y otra en cursiva.

...



Como puede observarse la diferencia entre uno y otro es que "html" conserva las etiquetas que puede haber en el texto, mientras que "text" copia sólo el texto, eliminando las etiquetas.

El ejemplo anterior tiene el siguiente código, en el cual el texto tiene un id="texto1", el primer boton tiene un id="html" y el segundo botón un id="text".

$(document).ready(function(){ 
   $("#html").click(function() {
      alert($("#texto1").html())
   });
   $("#text").click(function() {
      alert($("#texto1").text())
   });
});


Método .each()

Hasta ahora hemos visto varios métodos, como "html" y "text" que tienen a la vez función de lectura y escritura. Estos métodos hasta ahora los hemos usado siempre con selectores que nos devuelven un sólo elemento, pero ¿Qué pasa si utilizamos estos métodos con selectores que devuelven varios elementos?. (por ejemplo $("h2").html()

Si utilizamos el modo escritura éste afectará a todos los elementos que tengan este selector, sin embargo si utilizamos el modo lectura éste sólo afectará al primer elemento que encuentre. de manera que el resto de elementos con el mismo selector no se leeran.

Para corregir este problema y poder leer todos los elementos tenemos el método .each() éste actúa igual que un bucle, de manera que podemos usarlo para recorrer todos los elementos seleccionados y pedir que se lean. Veamos su funcionamiento con un ejemplo:

Tenemos por ejemplo el siguiente código de html:

<p class="clase1">este es el primer elemento de la clase 1.</p>
<p class="clase1">aquí tenemos el segundo elemento de la clase 1.</p>
<p class="clase1"> y también hay un tercer elemento de la clase 1.</p>

Esto podemos verlo en la página de la siguiente manera (aquí hemos puesto un estilo .clase1 {color: purle;} para distinguirlo).

este es el primer elemento de la clase 1.

aquí tenemos el segundo elemento de la clase 1.

y también hay un tercer elemento de la clase 1.

Ponemos aquí un boton (con id="boton1") similar al usado en el ejemplo anterior para leer el contenido, y el código: (el cual pondremos dentro de la estructura "document ready")

   $("#boton1").click(function() {
      alert($(".clase1").html())
   });

Este es el botón ...

Al pulsarlo vemos que sólo obtenemos el primer elemento de la serie, para obtenerlos todos ponemos otro botón con id="boton2".

Este es el botón ...

Para que funcione el botón anterior hemos puesto el siguiente código.

$(document).ready(function(){ 
   $("#boton2").click(function() {
      lectura="";
      $(".clase1").each(function(i){
         lectura+=i+".- "+$(this).html()+"\n";
      });
      alert(lectura);
   });
});

Analicemos el código anterior para ver cómo funciona el método .each().

  • El método "each" crea un bucle que recorre todos elementos marcados en el selector.
  • Para poder trabajar con cada elemento creamos dentro del paréntesis una funcion : .each(function(i) { ... });
  • El parámetro (i) que ponemos dentro de la función es el contador del bucle, éste tiene inicialmente un valor 0, y va aumentando una unidad cada vuelta del bucle. Podemos utilizarlo para variar los elementos del bucle en cada vuelta.
  • al recorrer el bucle, tenemos que hacer referencia a cada elemento seleccionado mediante $(this). al cual le añadiremos luego las propiedades o métodos que queramos.

Por tanto, el método .each() funciona como un bucle que recorre cada uno de los elementos de un selector, dentro del bucle para referirnos a cada elemento lo haremos mediante $(this).

Existen más métodos en los que, dependiendo de los parámetros que pasemos en el paréntesis, pueden ser de lectura o de escritura. Los iremos viendo a lo largo de este manual. La función .each() puede sernos muy útil, para poder trabajar con este tipo de métodos y manipular varios elementos a la vez.




En la próxima página seguiremos viendo métodos de jQuery relacionados con la manipulación de los elementos de la página.

Métodos del DOM



Manual de jQuery

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com