Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

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

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

jQuery (IV)

Lectura y escritura

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()

<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>

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

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