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

Visitas el mes pasado: 373

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

Código básico en jQuery

imagen jquery

Estructuras básicas


la estructura $(document).ready

Si sigues este manual ya habrás visto en la página anterior la estructura

$(document).ready(function({

// código javascript y jQuery

});

Es decir al trabajar con jQuery llamamos a elementos de la página. Debemos asegurarnos siempre de que esos elementos se han cargado totalmente y están disponibles. Al colocarlos dentro de esta estructura nos aseguramos de que esto es así.

Esta estructura tiene el mismo resultado que cuando se usa el código javascript:

window.onload=function () { ... }

Sin embargo con jQuery debemos usar la estructura "document ready", ya que nos garantiza poder usar correctamente el código con jQuery.

Además la estructura "document ready" podemos ponerla en la página tantas veces como queramos, al contrario de la estructura "window.onload=function()", la cual sólo puede estar una vez en cada página.

Podemos poner también código con jQuery fuera de esta estructura, pero siempre que nos aseguremos de que el código será leído después de haberse cargado la página. Por ejemplo dentro de una función a la que se llama mediante un evento "onclick".

La estructura "document ready tiene también una forma simplificada, en la cual escribimos menos código, que es la siguiente:

$(function(){

// código javascript y jQuery

});

Esta forma funciona exactamente igual que la anterior, con la ventaja de que utilizamos menos código. Si bien esta forma es más rápida nosotros aquí utilizaremos la primera por ser el código más facil de entender. (document ready = documento preparado)


El objeto jQuery

Todo el trabajo con jQuery está basado en el objeto jQuery();, el cual podemos escribir también de forma abreviada $(); .

El objeto admite distintos parámetros dentro del paréntesis, así como gran cantidad de métodos y propiedades. Por lo tanto en el código visto hasta ahora en este manual, cada vez que ponemos un signo dólar seguido de un paréntesis con algo dentro, estamos llamando al objeto jQuery.

Podemos escribir jQuery( ... ); o también $( ... );. Las dos formas tienen el mismo efecto. Sin embargo por su simplicidad y economía nosotros preferimos la segunda.


Selectores

Una de las principales tareas que realiza el objeto jQuery es localizar los elementos en la página (en la estructura DOM). Si has observado el ejemplo de la página anterior, habrás visto cómo para localizar un elemento con atributo id="capa1"", le pasábamos al objeto jQuery dentro del paréntesis el siguinte argumento: $("#capa1"). La coincidencia entre el argumento pasado y el selector que utilizariamos para este elemento en CSS no es casual. jQuery utiliza los selectores de CSS, pasados como primer argumento para localizar los elementos en el DOM.

Observa que el selector debe escribirse dentro del paréntesis y entre comillas. Todos los selectores de CSS son validos con jQuery, incluidos los selectores compuestos, los selectores para atributos, las pseudoclases, incluso los selectores nuevos incluidos en CSS3.

por ejemplo si escribimos (siempre dentro de la estructura "document ready"):

$("h1").attr("align","center");

Centraremos todos los títulos que tengan la etiqueta "h1". Como veremos más adelante, lo que hemos hecho es añadirles un atributo align="center"


El método html()

El método .html() es uno de los más utilizados, ya que permite leer o cambiar el contenido de cualquier etiqueta. Por ejemplo:

lectura=$("#elemento").html();

Aquí guardamos en la variable lectura el contenido de la etiqueta que tiene el atributo id="elemento".

Para cambiar el contenido de un elemento utilizaremos el mismo método, pero pasándole como argumento el nuevo contenido.

Vamos a ver un ejemplo en el que hacemos ambas cosas: Pondremos en primer lugar una línea de una tabla con tres textos diferentes. Tendremos también un elemento para recibir la respuesta. Al pulsar en cualquiera de los elementos de la tabla, el contenido de la celda se copiará en el elemento de la respuesta.

Tenemos por lo tanto el siguiente código html:

<div id="capa1" style="width: 30%; height: 100px; border: 1px solid black; float: right;">

</div>
<p><b>Pulsa en las celdas para copiar su contenido:</b></p>
<br/>
<table border="1px solid black" width="50%">
   <tr>
     <td id="celda1">Este texto puedes copiarlo en el recuadro haciendo click sobre él</td>
     <td id="celda2">Esta es la segunda celda y también puedes copiarla haciendo click</td>
     <td id="celda3">Estás en la tercera celda, <b>para copiarla haz click.</b></td>
   </tr>
</table>

Como ves el código tiene una primera capa id="capa1" donde recibiremos las respuestas, y después la tabla con tres celdas, las cuales vienen identificadas por su atributo "id".

A continuación vemos el código que usamos con javascript y jquery:

$(document).ready(function(){ 
   $("#capa1").html('aún no has pulsado');
   $("#celda1").click(function(){
      texto1=$("#celda1").html();
      $("#capa1").html(texto1);
   });
   $("#celda2").click(function(){
      texto2=$("#celda2").html();
      $("#capa1").html(texto2);
   });
   $("#celda3").click(function(){
      texto3=$("#celda3").html();
      $("#capa1").html(texto3);
   });
});

El resultado del script anterior nos queda de la siguiente manera:


Pulsa en las celdas para copiar su contenido:


Este texto puedes copiarlo en el recuadro haciendo click sobre él Esta es la segunda celda y también puedes copiarla haciendo click Estás en la tercera celda, para copiarla haz click.

Como puedes observar, para cada uno de las celdas, cuando hacemos click, copiamos su contenido y lo pasamos al recuadro que tenemos a la derecha, siempre usando el método .html()

El método .html() lo que hace realmente es leer o cambiar el código html que hay dentro de la etiqueta, por lo que podemos introducir etiquetas anidadas.

Por otra parte vemos que hemos usado también el método click(). Este método crea el evento "onclick" en la etiqueta la que se refiere. Fíjate que para su funcionamiento definimos los eventos dentro de una función anónima. Mas adelante explicaremos con más detalle los eventos con jQuery.






En la próxima página empezaremos a ver cómo se trabaja con jQuery, en concreto como leer y escribir en elementos.

Lectura y escritura



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