Programar en javascript puede ser más fácil sabiendo utilizar jQuery
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 32
Visitas el mes pasado: 44
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Si este sitio te parece interesante puedes contribuir con una pequeña aportació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.
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()) }); });
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().
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.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com