Una guía básica de JQuery para programadores de Javascript

Anuncio

JQuery es una de las bibliotecas de JavaScript más populares del planeta (¿Qué es JavaScript? ¿Qué es JavaScript, y puede existir Internet sin él?JavaScript es una de esas cosas que muchos dan por sentado. Todos lo usan. Lee mas ). En el momento de su inicio, JavaScript (se denominará JS de aquí en adelante) estaba en un lugar muy diferente. El 14 de enero de 2006 fue el día en que se anunció jQuery en BarCampNYC. A JS todavía le faltaba algo: todos los navegadores soportaban partes de él, pero muchos hacks y soluciones tuvieron que implementarse para su cumplimiento.

JQuery apareció y cambió todo. JQuery hizo que fuera muy fácil escribir código compatible con el navegador. Podrías animar páginas web sin tener un título en informática - ¡hurra! Diez años después, jQuery sigue siendo el rey, y si nunca lo ha usado antes, ¿qué puede hacer con él?

Además de repasar sus habilidades de JavaScript, es posible que desee leer algunos Tutoriales HTML y CSS Aprenda HTML y CSS con estos tutoriales paso a paso

¿Tienes curiosidad por HTML, CSS y JavaScript? Si cree que tiene una habilidad especial para aprender a crear sitios web desde cero, aquí hay algunos tutoriales paso a paso que vale la pena probar. Lee mas primero si tampoco estás familiarizado con ellos.

Tenemos introdujo jQuery Hacer que la web sea interactiva: una introducción a jQueryjQuery es una biblioteca de secuencias de comandos del lado del cliente que casi todos los sitios web modernos utilizan: hace que los sitios web sean interactivos. No es la única biblioteca de Javascript, pero es la más desarrollada, más compatible y más utilizada ... Lee mas antes, por lo que esta guía de JQuery se centrará en la codificación real.

Empezando

Es posible que esté familiarizado con la forma JS de seleccionar identificadores del Modelo de objetos de documento (DOM):

document.getElementById ('foo');

Bueno, JQuery lleva esto un paso más allá. No tiene que llamar a diferentes métodos para seleccionar clases, identificadores o elementos múltiples. Así es como selecciona una identificación:

$ ('# bar');

Fácil verdad? Es exactamente la misma sintaxis para seleccionar casi cualquier elemento DOM. Así es como selecciona las clases:

$ ('. baz');

También puedes ser creativo para obtener un poder real. Esto selecciona todo td elementos dentro de un mesa excepto el primero.

$ ('table td'). not (': first');

Observe cómo los nombres del selector coinciden casi exactamente con sus homólogos CSS. Puedes asignar objetos a regular Variables JS:

var xyzzy = $ ('# parent .child');

O puede usar variables jQuery:

var $ xyzzy = $ ('# parent .child');

El signo de dólar se usa únicamente para indicar que esta variable es un objeto jQuery, algo que es muy útil en proyectos complejos.

Puede seleccionar el padre de un elemento:

$ ('hijo'). parent ();

O los hermanos:

$ ('child'). siblings ();

Debe ejecutar su código una vez que el navegador esté listo. Así es como lo haces:

$ (document) .ready (function () {console.log ('ready!'); });

Más poder

Ahora que conoce los conceptos básicos, pasemos a algunas cosas más complejas. Dada una tabla html:

Hacer
Modelo
Color


Vado
Escolta
Negro


Mini
cobre
rojo


Vado
Cortina
Blanco

Digamos que desea hacer que cada otra fila tenga un color diferente (conocido como Rayas de cebra). Ahora puedes usar CSS para esto:

#cars tr: nth-child (even) {background-color: red; }

Así es como se podría lograr con jQuery:

$ ('tr: even'). addClass ('even');

Esto logrará lo mismo, siempre que incluso es una clase definida en CSS. Observe cómo no se necesita el punto final antes del nombre de la clase. Estos son generalmente solo requerido para el selector principal. Para empezar, lo ideal sería utilizar CSS, aunque no es gran cosa.

JQuery también puede ocultar o eliminar filas:

$ ('# fordCortina'). hide (); $ ('# fordCortina'). remove ();

No tiene que ocultar un elemento antes de eliminarlo.

Las funciones

Las funciones de JQuery son como JS. Usan llaves y pueden aceptar argumentos. Donde se pone realmente interesante es a través de devoluciones de llamada. Las devoluciones de llamada se pueden aplicar a casi cualquier función jQuery. Especifican un fragmento de código para ejecutar una vez que se completa la acción principal. Esto proporciona una gran funcionalidad. Si no existieran, y usted escribió su código esperando que se ejecute de manera lineal, JS continuará ejecutando la siguiente línea de código mientras espera la anterior. Las devoluciones de llamada aseguran que el código solo se ejecute una vez que se complete la tarea original. Aquí hay un ejemplo:

$ ('tabla'). hide (function () {alert ('¡Reglas de MUO!'); });

Tenga cuidado: este código ejecuta una alerta para cada elemento. Si su selector está en la página más de una vez, recibirá múltiples alertas.

Puede usar devoluciones de llamada con otros argumentos:

$ ('tr: even'). addClass ('even', function () {console.log ('Hello'); });

Observe cómo hay un punto y coma después de las llaves de cierre. Esto normalmente no sería necesario para una función JS, sin embargo, este código aún se considera en una línea (ya que la devolución de llamada está entre paréntesis).

Animación

JQuery hace que sea muy fácil animar páginas web. Puede desvanecer elementos dentro o fuera:

$ ('. fade1'). fadeIn ('lento'); $ ('# fade2'). fadeOut (500);

Puede especificar tres velocidades (lenta, media, rápida) o un número que represente la velocidad en milisegundos (1000 ms = 1 segundo). Puedes animar casi cualquier elemento CSS Esto anima el ancho del selector desde su ancho actual hasta 250px.

$ ('foo'). animate ({ancho: '250px'});

No es posible animar colores. También puede usar devoluciones de llamada con animación:

$ ('bar'). animate ({height: '250px'}, function () {$ ('bar'). animate ({width: '50px'} });

Bucles

Los bucles realmente brillan en jQuery. Cada() se usa para iterar sobre cada elemento de un tipo dado:

$ ('li'). each (function () {console.log ($ (this)); });

También puedes usar un índice:

$ ('li'). each (function (i) {console.log (i + '-' + $ (this)); });

Esto imprimiría 0, entonces 1 y así.

También puedes usar cada() iterar sobre matrices, al igual que en JS:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (automóviles, función (i, valor) {console.log (valor); });

Tenga en cuenta el argumento adicional llamado valor - este es el valor del elemento de matriz.

Vale la pena señalar que cada() puede algunas veces ser más lento que los loops JS de vainilla Esto se debe a la sobrecarga de procesamiento adicional que realiza jQuery. Para la mayoría de las veces, esto no es un problema. Si le preocupa el rendimiento o está trabajando con grandes conjuntos de datos, considere comparar su código con jsPerf primero.

AJAX

JavaScript asíncrono y XML o AJAX Es realmente muy fácil con jQuery. AJAX alimenta una gran cantidad de Internet, y es algo que hemos cubierto en parte 5 Tutorial de jQuery (Parte 5): ¡AJAX a todos!A medida que nos acercamos al final de nuestra serie de mini-tutoriales jQuery, ya es hora de que analicemos en profundidad una de las características más utilizadas de jQuery. AJAX permite que un sitio web se comunique con ... Lee mas de nuestro tutorial de jQuery Tutorial de jQuery - Introducción: conceptos básicos y selectoresLa semana pasada, hablé sobre la importancia de jQuery para cualquier desarrollador web moderno y por qué es increíble. Esta semana, creo que es hora de que nos ensuciemos las manos con algo de código y aprendamos cómo ... Lee mas . Proporciona una manera de cargar parcialmente una página web; no hay razón para volver a cargar toda la página cuando solo desea actualizar el puntaje de fútbol, ​​por ejemplo. jQuery tiene varios métodos AJAX, siendo el más fácil carga():

$ ('# baz'). load ('some / url / page.html');

Esto realiza una llamada AJAX a la página especificada (some / url / page.html) y mete los datos en el selector. ¡Sencillo!

Puedes realizar HTTP GET peticiones:

$ .get ('some / url', function (result) {console.log (result); });

También puede enviar datos usando ENVIAR:

$ .post ('some / other / url', {'make': 'Ford', 'model': 'Cortina'});

Es muy fácil enviar datos del formulario:

$ .post ('url', $ ('form'). serialize (), function (result) {console.log (result); }

los publicar por fascículos() La función obtiene todos los datos del formulario y los prepara para su transmisión.

Promesas

Las promesas se utilizan para la ejecución diferida. Pueden ser difíciles de aprender, sin embargo, jQuery lo hace un poco menos problemático. ECMAScript 6 presenta promesas nativas a JS, sin embargo, el soporte del navegador es escaso en el mejor de los casos. Por ahora, las promesas de jQuery son mucho mejores en el soporte de navegador cruzado.

Una promesa es casi exactamente como suena. El código hará una promesa de regresar en una etapa posterior cuando esté completo. Su motor de JavaScript pasará a ejecutar algún otro código. Una vez que la promesa resuelve (vuelve), se puede ejecutar algún otro fragmento de código. Las promesas pueden considerarse como devoluciones de llamada. los Documentación de jQuery explica con mayor detalle.

Aquí hay un ejemplo:

// dfd == diferido. var dfd = $ .Deferred (); function doThing () {$ .get ('some / slow / url', function () {dfd.resolve (); }); return dfd.promise (); } $ .when (doThing ()). then (function () {console.log ('YAY, está terminado'); });

Observe cómo se hace la promesa (dfd.promise ()), y se resuelve solo cuando se completa la llamada AJAX. Puede usar una variable para realizar un seguimiento de múltiples llamadas AJAX, y solo completar otra tarea una vez que todas se hayan realizado.

Consejos de rendimiento

La clave para exprimir el rendimiento de su navegador es limitar el acceso al DOM. Muchos de estos consejos también podrían aplicarse a JS, y es posible que desee perfilar su código para ver si es inaceptablemente lento. En la era actual de los motores JavaScript de alto rendimiento, los pequeños cuellos de botella en el código pueden pasar desapercibidos. A pesar de esto, aún vale la pena intentar escribir el código de mayor rendimiento posible.

En lugar de buscar el DOM para cada acción:

$ ('foo'). css ('color de fondo', 'rojo'); $ ('foo'). css ('color', 'verde'); $ ('foo'). css ('ancho', '100px');

Almacene el objeto en una variable:

$ bar = $ ('foo'); $ bar.css ('color de fondo', 'rojo'); $ bar.css ('color', 'verde'); $ bar.css ('ancho', '100px');

Optimiza tus bucles. Dado un vainilla para loop:

var cars = ['Mini', 'Ford', 'Jaguar']; para (int i = 0; i 

Si bien no es inherentemente malo, este bucle se puede hacer más rápido. Para cada iteración, el ciclo debe calcular el valor de la matriz de automóviles (longitud de coches). Si almacena esto en otra variable, se puede obtener rendimiento, especialmente si está trabajando con grandes conjuntos de datos:

para (int i = 0, j = cars.length; i 

Ahora la longitud de la matriz de autos se almacena en j. Esto ya no tiene que calcularse en cada iteración. Si estas usando cada(), no es necesario que haga esto, aunque el JS de vainilla correctamente optimizado puede superar a jQuery. Donde jQuery realmente brilla es a través de la velocidad de desarrollo y depuración. Si no está trabajando en big data, jQuery suele ser más que rápido.

¡Ahora deberías saber lo suficiente para ser un jQuery ninja!

¿Usas jQuery regularmente? ¿Has dejado de usarlo por alguna razón? ¡Háganos saber sus pensamientos en los comentarios a continuación!