Compartir:
Una guía básica de JQuery para programadores de Javascript
JQuery es una de las bibliotecas de JavaScript más populares del planeta (¿qué es JavaScript? ¿Qué es JavaScript? ¿Puede existir Internet sin él? ¿Qué es JavaScript? ¿Puede existir Internet sin él? JavaScript es una de esas cosas que muchos dan por sentado . Todos lo usan. Leer más). En el momento de su creación, 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 admitían partes de él, pero había que implementar muchos trucos y soluciones para el cumplimiento.
JQuery vino y cambió todo. JQuery hizo 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, es jQuery todavía rey, y si nunca lo has usado, ¿qué puedes hacer con él??
Además de mejorar sus habilidades de JavaScript, es posible que desee leer algunos tutoriales de HTML y CSS. Aprenda HTML y CSS con estos tutoriales paso a paso. Aprenda HTML y CSS con estos tutoriales paso a paso. ¿Tiene curiosidad sobre HTML, CSS y JavaScript? Si crees que tienes una habilidad para aprender a crear sitios web desde cero, aquí hay algunos tutoriales paso a paso que vale la pena probar. Lee más primero si no estás familiarizado con ellos tampoco.
Hemos introducido jQuery Making The Web Interactive: una introducción a jQuery Making The Web Interactive: una introducción a jQuery jQuery es una biblioteca de scripts del lado del cliente que utiliza casi todos los sitios web modernos: hace que los sitios web sean interactivos. No es la única biblioteca de Javascript, pero es la más desarrollada, la más compatible y la más utilizada ... Lea más antes, por lo que esta guía de JQuery se centrará en la codificación real..
Empezando
Puede estar familiarizado con la forma en que JS selecciona los 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 seleccionas una identificación:
$ ('# bar');Fácil verdad? Es exactamente la misma sintaxis para seleccionar casi cualquier elemento DOM. Así es como seleccionas las clases:
$ ('. baz');También puede ser creativo para 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 contrapartes de CSS. Puede asignar objetos a regular Variables JS:
var xyzzy = $ ('# parent .child');O puedes usar las 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.
Puedes seleccionar el padre de un elemento:
$ ('hijo'). padre ();O los hermanos:
$ ('niño'). hermanos ();Debe ejecutar su código una vez que el navegador esté listo. Así es como haces eso:
$ (document) .ready (function () console.log ('ready!'););Más poder
Ahora que sabes lo básico, 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 quieres que cada fila sea de un color diferente (conocido como Rayas de cebra). Ahora podrías 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 la parada completa antes del nombre de clase. Estos son generalmente Solo requerido para el selector principal. Lo ideal sería utilizar CSS para esto, aunque no es un gran problema..
JQuery también puede ocultar o eliminar filas:
$ ('# fordCortina'). hide (); $ ('# fordCortina'). remove ();No es necesario ocultar un elemento antes de eliminarlo..
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 ejecutarse 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 ejecutara de manera lineal, JS continuaría ejecutando la siguiente línea de código mientras esperaba la anterior. Las devoluciones de llamada aseguran que el código solo se ejecuta una vez que se completa la tarea original. Aquí hay un ejemplo:
$ ('tabla'). hide (function () alert ('MUO rules!'););Tenga cuidado: este código ejecuta una alerta para cada elemento. Si su selector aparece en la página más de una vez, recibirá varias alertas..
Puede utilizar 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 todavía se considera que está 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. Puedes desvanecer elementos dentro o fuera:
$ ('. fade1'). fadeIn ('slow'); $ ('# 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 (width: '250px');No es posible animar colores. También puede utilizar devoluciones de llamada con animación:
$ ('bar'). animate (height: '250px', function () $ ('bar'). animate (width: '50px');Bucles
Los bucles realmente brillan en jQuery. Cada() se utiliza para iterar sobre cada elemento de un tipo dado:
$ ('li'). each (function () console.log ($ (this)););También puedes usar un índice:
$ ('li'). each (función (i) console.log (i + '-' + $ (this)););Esto imprimiría 0, entonces 1 y así.
También puedes usar cada() para iterar sobre matrices, como en JS:
var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (coches, función (i, valor) console.log (valor););Note el argumento extra llamado valor - Este es el valor del elemento array..
Vale la pena señalar que cada() puede algunas veces Ser más lento que los bucles de vainilla JS. 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 está preocupado por el rendimiento, o está trabajando con grandes conjuntos de datos, considere primero comparar su código con jsPerf.
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 la parte 5 Tutorial de jQuery (Parte 5): ¡AJAX es todo! Tutorial de jQuery (Parte 5): ¡AJAX todos ellos! A medida que nos acercamos al final de nuestra serie de mini tutoriales de jQuery, es hora de que echemos un vistazo más a fondo a una de las características más utilizadas de jQuery. AJAX permite que un sitio web se comunique con ... Leer más de nuestro tutorial de jQuery Tutorial de jQuery - Introducción: Conceptos básicos y selectores Tutorial de jQuery - Introducción: Fundamentos y selectores La semana pasada, hablé sobre la importancia de jQuery para cualquier desarrollador web moderno y por qué increíble. Esta semana, creo que es hora de que nos ensuciemos las manos con algo de código y aprendamos cómo ... Leer más. Proporciona una forma de cargar parcialmente una página web, por lo que no hay razón para volver a cargar toda la página cuando solo desea actualizar la puntuación de fútbol, por ejemplo. jQuery tiene varios métodos AJAX, el más fácil de ser carga():
$ ('# baz'). load ('some / url / page.html');Esto realiza una llamada AJAX a la página especificada (algo / 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 la 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 introduce promesas nativas a JS, sin embargo, el soporte del navegador es inestable en el mejor de los casos. Por ahora, las promesas de jQuery son mucho mejores en la compatibilidad con varios navegadores.
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 continuará ejecutando algún otro código. Una vez que la promesa resuelve (devoluciones), se puede ejecutar alguna otra pieza de código. Las promesas se pueden pensar como devoluciones de llamada. La documentación de jQuery se explica con mayor detalle..
Aquí hay un ejemplo:
// dfd == var. diferida dfd = $ .Deferred (); función doThing () $ .get ('some / slow / url', function () dfd.resolve ();); devolver dfd.promise (); $ .cuando (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. Podría usar una variable para realizar un seguimiento de múltiples llamadas AJAX, y solo completar otra tarea una vez que se hayan realizado todas.
Consejos de rendimiento
La clave para exprimir el rendimiento de su navegador es limitar el acceso al DOM. Muchos de estos consejos podrían aplicarse también a JS, y es posible que desee crear un perfil de su código para ver si es inaceptablemente lento. En la era actual de los motores JavaScript de alto rendimiento, los cuellos de botella menores en el código a menudo pasan desapercibidos. A pesar de esto, todavía vale la pena intentar escribir el código de mayor rendimiento que pueda.
En lugar de buscar el DOM para cada acción:
$ ('foo'). css ('background-color', 'red'); $ ('foo'). css ('color', 'verde'); $ ('foo'). css ('width', '100px');Almacena el objeto en una variable:
$ bar = $ ('foo'); $ bar.css ('background-color', 'red'); $ bar.css ('color', 'verde'); $ bar.css ('width', '100px');Optimiza tus bucles. Dada una vainilla por bucle:
var cars = ['Mini', 'Ford', 'Jaguar']; para (int i = 0; i < cars.length; ++i) // do something Si bien no es inherentemente malo, este bucle se puede hacer más rápido. Para cada iteración, el bucle tiene que calcular el valor de la matriz de coches (cars.length). 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 < j; ++i) // do something Ahora la longitud de la matriz de coches se almacena en j. Esto ya no tiene que calcularse en cada iteración. Si estas usando cada(), no necesita hacer esto, aunque la JS de vainilla correctamente optimizada 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 debes saber lo suficiente para ser un ninja de jQuery!
¿Usas jQuery regularmente? ¿Has dejado de usarlo por alguna razón? Háganos saber sus pensamientos en los comentarios a continuación.!
Explorar más sobre: JavaScript, jQuery.