Jquery
Páginas: 11 (2554 palabras)
Publicado: 30 de noviembre de 2011
-------------------------------------------------
jQuery (Intermedio-Avanzado)
Este documento complementa el anterior en donde veremos algunos conceptos más complejos que son de gran utilidad en el desarrollo de una web dinámica y atractiva. Este tutorial nos brindará conocimientos sobre asignación de evento, Ajax, creación de plugin y otros métodos que nos facilita el framework.
Asignaciónde Eventos
Mantendremos la misma metodología de trabajo en donde explicaremos los métodos de jQuery a través de ejemplos, comencemos…
La librería jQuery nos permite asociar un controlador para el evento que necesitemos con un elemento del DOM. Nuevamente veremos el ejemplo de ejemplos!! El muy querido “Hola Mundo” , el método .bind() nos permite poder realizar esta operación, por ejemplo situviéramos el siguiente código HTML:
-------------------------------------------------
-------------------------------------------------
<A HREF=”javascript: void(0);”>Saludo</A>
-------------------------------------------------
Podríamos asociar un controlador para el evento CLICK del elemento A, de la siguiente forma:
--------------------------------------------------------------------------------------------------
$('a').bind('click', function(){
-------------------------------------------------
alert('Hola Mundo!');
-------------------------------------------------
});
-------------------------------------------------
En el código, anterior estamos asociando en el evento el controlador en el evento onClick de los links en donde cada vez que se presioneveremos un cartel con la frase “Hola Mundo!”, este método nos permite también poder crear nuestros propios eventos por ejemplo:
-------------------------------------------------
-------------------------------------------------
$('a').bind('miEvento', function(){
-------------------------------------------------
alert('Hola mundo');
-------------------------------------------------
});-------------------------------------------------
$('a').trigger('miEvento');
-------------------------------------------------
En el script anterior hemos asociado al los elementos A un controlador para un evento particular que lo llamaremos “miEvento”, nuevamente utilizamos el método .bind() para asociar el controlador que simplemente alerta con el mensaje Hola Mundo, y el método.trigger() es el disparador del evento, en nuestro caso “miEvento”; a partir de ahora de esta misma manera podemos disponer de los eventos que nosotros necesitemos para asociarles los elementos del DOM los controladores.
Delegación de eventos
Veremos técnicas para conectar un controlador con un elemento, del DOM, en donde vamos aprovechar el burbujeo de eventos nativo del navegador, la idea es asignarel controlador a un elemento padre dentro del árbol del DOM para que sus hijos respondan al controlador asociado del padre en el árbol, jQuery nos facilita un método llamado .delegate(), veamos su uso… si disponemos de la siguiente estructura en nuestro HTML:
-------------------------------------------------
-------------------------------------------------
<STYLE TYPE=”text/css”>-------------------------------------------------
.active {
-------------------------------------------------
background: #CCC;
-------------------------------------------------
}
-------------------------------------------------
</STYLE>
-------------------------------------------------
<BODY>
-------------------------------------------------
<TABLE>-------------------------------------------------
<TR>
-------------------------------------------------
<TD>Fila 1 - Columna 1</TD>
-------------------------------------------------
<TD>Fila 1 - Columna 2</TD>
-------------------------------------------------
</TR>
-------------------------------------------------
<TR>...
jQuery (Intermedio-Avanzado)
Este documento complementa el anterior en donde veremos algunos conceptos más complejos que son de gran utilidad en el desarrollo de una web dinámica y atractiva. Este tutorial nos brindará conocimientos sobre asignación de evento, Ajax, creación de plugin y otros métodos que nos facilita el framework.
Asignaciónde Eventos
Mantendremos la misma metodología de trabajo en donde explicaremos los métodos de jQuery a través de ejemplos, comencemos…
La librería jQuery nos permite asociar un controlador para el evento que necesitemos con un elemento del DOM. Nuevamente veremos el ejemplo de ejemplos!! El muy querido “Hola Mundo” , el método .bind() nos permite poder realizar esta operación, por ejemplo situviéramos el siguiente código HTML:
-------------------------------------------------
-------------------------------------------------
<A HREF=”javascript: void(0);”>Saludo</A>
-------------------------------------------------
Podríamos asociar un controlador para el evento CLICK del elemento A, de la siguiente forma:
--------------------------------------------------------------------------------------------------
$('a').bind('click', function(){
-------------------------------------------------
alert('Hola Mundo!');
-------------------------------------------------
});
-------------------------------------------------
En el código, anterior estamos asociando en el evento el controlador en el evento onClick de los links en donde cada vez que se presioneveremos un cartel con la frase “Hola Mundo!”, este método nos permite también poder crear nuestros propios eventos por ejemplo:
-------------------------------------------------
-------------------------------------------------
$('a').bind('miEvento', function(){
-------------------------------------------------
alert('Hola mundo');
-------------------------------------------------
});-------------------------------------------------
$('a').trigger('miEvento');
-------------------------------------------------
En el script anterior hemos asociado al los elementos A un controlador para un evento particular que lo llamaremos “miEvento”, nuevamente utilizamos el método .bind() para asociar el controlador que simplemente alerta con el mensaje Hola Mundo, y el método.trigger() es el disparador del evento, en nuestro caso “miEvento”; a partir de ahora de esta misma manera podemos disponer de los eventos que nosotros necesitemos para asociarles los elementos del DOM los controladores.
Delegación de eventos
Veremos técnicas para conectar un controlador con un elemento, del DOM, en donde vamos aprovechar el burbujeo de eventos nativo del navegador, la idea es asignarel controlador a un elemento padre dentro del árbol del DOM para que sus hijos respondan al controlador asociado del padre en el árbol, jQuery nos facilita un método llamado .delegate(), veamos su uso… si disponemos de la siguiente estructura en nuestro HTML:
-------------------------------------------------
-------------------------------------------------
<STYLE TYPE=”text/css”>-------------------------------------------------
.active {
-------------------------------------------------
background: #CCC;
-------------------------------------------------
}
-------------------------------------------------
</STYLE>
-------------------------------------------------
<BODY>
-------------------------------------------------
<TABLE>-------------------------------------------------
<TR>
-------------------------------------------------
<TD>Fila 1 - Columna 1</TD>
-------------------------------------------------
<TD>Fila 1 - Columna 2</TD>
-------------------------------------------------
</TR>
-------------------------------------------------
<TR>...
Leer documento completo
Regístrate para leer el documento completo.