Conferencia #mejorandola: Introducción a jQuery por Miguelangel alvarez
jQuery es un nuevo tipo de JavaScript Library rápida y concisa que simplifica atravesando documento HTML, manejo de eventos, animación, y las interacciones Ajax para el desarrollo web rápido. jQuery está diseñado para cambiar la forma en que escribes JavaScript.
jQuery: Los Fundamentos
Este es un tutorial básico, diseñado para ayudarle a empezar a usar jQuery. Si usted no tiene una configuración de página de prueba, sin embargo, empezar por crear una nueva página HTML con el siguiente contenido:
<! DOCTYPE html><html> <head> <meta charset="utf-8"> <title> demostración </ title> </ Head> <body> <a href="http://jquery.com/"> jQuery </ a> <script src="jquery.js"> </ script> <script> </ Script> </ Body></ Html>
Editar la
src atributo en la etiqueta script para que apunte a su copia de jquery.js. Por ejemplo, si jquery.js está en el mismo directorio que el archivo HTML, puede utilizar: <script src="jquery.js"> </ script>
Código de lanzamiento en el documento preparado
La primera cosa que la mayoría de los programadores Javascript terminan haciendo es añadir algo de código a su programa, similar a esta:
window.onload = function () {alert ("Bienvenido");}
Dentro de los cuales es el código que desea ejecutar la derecha cuando se carga la página.Problemática, sin embargo, el código JavaScript no se ejecuta hasta que todas las imágenes se termine de descargar (esto incluye los anuncios de banner). La razón para usar window.onload en el primer lugar es que "documento" el código HTML no se termina de cargar, sin embargo, la primera vez que intenta ejecutar el código.
Para evitar ambos problemas, jQuery tiene una simple declaración de que comprueba el
$ (Document). Ready (function () { / / El código aquídocumento y espera hasta que está listo para ser manipulado, conocido como el caso de listas :});
Dentro del evento listo, agregar un controlador, haga clic en el enlace:
$ (Document). Ready (function () { $ ("a"). click (function (evento) { alert ("Gracias por su visita!"); });});
Guarde el archivo HTML y volver a cargar la página de prueba en su navegador. Al hacer clic en el enlace de la página se debe hacer un navegador de alerta pop-up, antes de salir para ir a la página principal de jQuery.
Para hacer clic y otros más eventos , se puede evitar el comportamiento por defecto - aquí, siguiendo el enlace a jquery.com - llamando event.preventDefault () en el controlador de eventos:
$ (Document). Ready (function () { $ ("A"). Click (function ( evento ) { alert ("Como puede ver, el enlace ya no se llevó a jquery.com"); event.preventDefault (); });});
Ejemplo completo
El siguiente es un ejemplo de lo que el archivo HTML completo tendría un aspecto como si usted fuera a utilizar la escritura en su propio archivo. Tenga en cuenta que la une a Google de CDNpara cargar el archivo central de jQuery. Además, mientras que la secuencia de comandos personalizada está incluido en el head, en general es preferible colocarlo en un archivo separado y se refieren el archivo con el atributo src del elemento script
<! DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> demostración <title> jQuery </ title> </ Head> <body> <A href = " http://jquery.com/ "> jQuery </ a> <Script src = " http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js "> </ script> <script> $ (Document). Ready (function () { $ ("A"). Click (function (evento) { alert ("Como puede ver, el enlace ya no se llevó a jquery.com"); event.preventDefault (); }); }); </ Script> </ Body></ Html>
Adición y eliminación de una clase de HTML
Importante: Los ejemplos de jQuery restante tendrá que ser colocado dentro de la lista de eventos a fin de que se ejecutan cuando el documento está listo para ser trabajado. VerLanzamiento del Código en el documento preparado arriba para más detalles.
Otra tarea común es añadir (o eliminar) una
clase .
En primer lugar, añadir un poco de información de estilo en el head de tu documento, así:
<style> a.test {font-weight: bold;}</ Style>
$ ("A") addClass ("test").;
Todos tus
un elementos que ahora se mostrará en negrita. $ ("A") removeClass ("test").;
- (HTML permite múltiples clases que se añade a un elemento.)
Efectos especiales
En jQuery, un par de útiles efectos se proporcionan, para realmente hacer de su sitio web se destaque. Para poner esto a prueba, haga clic en cambiar el que agregó anteriormente a esto:
$ ("A"). Click (function (evento) { event.preventDefault (); . $ (This) ocultar ("lento");});
Ahora bien, si hace clic en cualquier vínculo, debe hacerse poco a poco desaparecen.
DEVOLUCIÓN DE LLAMADA Y FUNCIONES
Un callback es una función que se pasa como argumento a otra función y es ejecutado después de la función principal se ha completado. Lo especial de una devolución de llamada es que las funciones que aparecen después de que el "padre" puede ejecutar antes de la devolución de llamada se ejecuta. Otra cosa importante a saber es cómo pasar correctamente la devolución de llamada. Aquí es donde tengo a menudo se olvida la sintaxis correcta.
Devolución de llamada sin argumentos
Una devolución de llamada sin argumentos que se pasa de esta manera:
. $ Get ('myhtmlpage.html, MyCallback);
Tenga en cuenta que el segundo parámetro es simplemente el nombre de función (pero no como una cadena y sin paréntesis). Funciones en Javascript son "ciudadanos de primera clase", y así se pueden pasar por ahí como referencias a variables y ejecutado en un momento posterior.
Devolución de llamada con los argumentos
"¿Qué hacer si tiene argumentos que desea pasar?", Usted puede preguntarse.
Mal
La forma incorrecta (se que no funciona!)
. $ Get ('myhtmlpage.html, MyCallback (param1, param2));
MyCallback (param1, param2)
y luego pasa el valor de retorno como el segundo parámetro de
$. get ()Derecho
El problema con el ejemplo anterior es que MyCallback (param1, param2) es evaluada antes de ser pasado como una función. Javascript y jQuery extensión espera un puntero a función en casos como estos. IE setTimeout función.
En el uso más adelante, una función anónima se crea (tan sólo un bloque de instrucciones) y está registrada como la función de devolución de llamada. Observe el uso de la función '(){'. La función anónima hace exactamente una cosa: MyCallback llamadas, con los valores de param1 y param2 en el ámbito exterior.
$. Get ('myhtmlpage.html', function () { MyCallback (param1, param2);});
param1 y param2 son evaluados como una devolución de llamada cuando el '$. get' se hace llegar a la página.
LEER MÁS
A partir de aquí, probablemente debería empezar a mirar el resto de la documentación - que es muy amplio y abarca todos los aspectos de jQuery. Si usted tiene alguna pregunta, por favor no dude en enviarnos un mensaje a los foros de jQuery
No hay comentarios:
Publicar un comentario