Descubriendo las características ocultas de jQuery

jQuery no es siempre lo que parece. Hay un montón de cosas interesantes bajo la superficie, y hay muchos métodos que esperan ser descubiertos y muchos usos potenciales de la API de jQuery que quizás no hayas considerado antes. En este artículo, te mostraré algunas de las cosas no tan obvias que he descubierto sobre jQuery..

1. Entender jQuery!

Cuando usted llama 'jQuery' lo que pasa?

La función jQuery en sí es muy simple:

 jQuery = function (selector, context) // El objeto jQuery es en realidad solo el constructor init 'mejorado' y devuelve jQuery.fn.init (selector, context); ;

Bajo su aspecto, la función jQuery (comúnmente denominada función "wrapper") simplemente devuelve un objeto jQuery instanciado, es decir, una instancia de 'jQuery.fn.init' constructor.

Esto es útil para saber; Con esta información sabemos que cada vez que llamamos 'jQuery' En realidad estamos creando un objeto totalmente único con un conjunto de propiedades. jQuery es inteligente porque le brinda un objeto que puede tratarse como una matriz. Cada uno de sus elementos (todos juntos, comúnmente conocido como "colección") está referenciado dentro del objeto bajo un índice numérico, al igual que dentro de una matriz. Y jQuery también le da a este objeto una 'longitud' propiedad, tal como cabría esperar de una matriz. Esto abre un mundo de posibilidades. Por un lado, significa que podemos tomar prestada alguna funcionalidad de 'Array.prototype'. jQuery 'rebanada' El método es un buen ejemplo de esto, modificado desde la fuente:

 / *… JQuery.fn.extend (… * / slice: function () return this.pushStack (Array.prototype.slice.apply (this, argumentos), "slice", Array.prototype.slice.call (argumentos) .join (",")); , / *… * /

El nativo 'rebanada' al método no le importa eso 'esta' no es una matriz real-- estará bien con cualquier cosa que tenga un 'longitud' propiedad y [0], [1], [2] etc.

Hay algunas otras propiedades interesantes dentro de este objeto jQuery -- '.selector' y '.contexto' La mayoría de las veces, reflejará los argumentos que usted pasa a 'jQuery (...)'.

 var jqObject = jQuery ('a'); jqObject.selector; // => "a"

Una cosa que es importante tener en cuenta es que jQuery a veces le dará nuevos objetos jQuery para trabajar. Si ejecuta un método que cambia la colección de alguna manera, como '.parents ()', entonces jQuery no modificará el objeto actual; simplemente te pasará una nueva:

 var originalObject = jQuery ('a'); var anotherObject = originalObject.parents (); originalObject === anotherObject; // => falso

Todos los métodos que parecen mutar la colección de alguna manera devuelven un nuevo objeto jQuery, aunque aún puede acceder al objeto anterior a través de '.fin()', o más verbalmente, a través de '.prevObject'.

2. Creación de elementos de pan y mantequilla.

Central a las capacidades DOM de jQuery, es su sintaxis de creación de elementos. 1.4 trajo consigo una forma completamente nueva de crear sus elementos de manera rápida y sucinta. P.ej.

 var myDiv = jQuery ('', id:' my-new-element ', clase:' foo ', css: color:' red ', backgrondColor:' #FFF ', borde:' 1px solid #CCC ', haga clic en: function () alerta ('Clicked!'); , html: jQuery ('', href:' # ', haga clic en: function () // haga algo que devuelva falso; ));

A partir del 1.4, puede pasar un segundo argumento a la función jQuery cuando esté creando un elemento: el objeto que pase, en su mayor parte, actuará como si lo estuviera pasando '.attr (...)'. Sin embargo, jQuery asignará algunas de las propiedades a sus propios métodos, por ejemplo, el 'hacer clic' mapas de propiedad de jQuery 'hacer clic' método (que enlaza un controlador de eventos para el 'hacer clic' evento) y 'css' mapas a jQuery 'css' método etc..

Para ver qué propiedades se asignan a los métodos de jQuery, abra su consola y escriba 'jQuery.attrFn'.

3. Serializa tus entradas

jQuery proporciona un método que puede utilizar para serializar todas las entradas en uno o más formularios. Esto es útil cuando se envían datos a través de XHR ("Ajax"). Ha estado en jQuery durante mucho tiempo, pero no se habla mucho y muchos desarrolladores no se dan cuenta de que está ahí. Enviar un formulario completo a través de Ajax, usando jQuery, no podría ser más sencillo:

 var myForm = $ ('# my-form'); jQuery.post ('submit.php', myForm.serialize (), function () alert ('¡Se han enviado datos!'););

jQuery también proporciona la 'serializeArray' método, que está diseñado para ser utilizado con múltiples formas, y el 'param' función auxiliar (bajo el espacio de nombres jQuery) que toma un objeto normal y devuelve una cadena de consulta, por ejemplo,.

 var data = nombre: 'Joe', edad: 44, profesión: 'Desarrollador Web'; jQuery.param (datos); // => "nombre = Joe & age = 44 & profession =Desarrollador Web + "

4. animar cualquier cosa

jQuery 'animar' El método es probablemente el más flexible de los métodos de jQuery. Se puede usar para animar casi cualquier cosa, no solo las propiedades CSS, y no solo los elementos DOM. Así es como usaría normalmente 'animar':

 jQuery ('# box'). animate (left: 300, top: 300);

Cuando especifique una propiedad para animar (por ejemplo,. 'parte superior') jQuery comprueba si está animando algo con una propiedad de estilo ('elemento.estilo'), y verifica si la propiedad especificada ('parte superior') se define en 'estilo' -- si no es así, jQuery simplemente actualiza 'parte superior' en el elemento en sí. Aquí hay un ejemplo:

 jQuery ('# box'). animate (top: 123, foo: 456);

'parte superior' es una propiedad CSS válida, por lo que jQuery se actualizará 'element.style.top', pero 'foo' es no una propiedad CSS válida, por lo que jQuery simplemente actualizará 'element.foo'.

Podemos usar esto para nuestra ventaja. Digamos, por ejemplo, que quieres animar un cuadrado en un lienzo. Primero definamos un constructor simple y un 'dibujar' Método que se llamará en cada paso de la animación:

 función Cuadrado (cnvs, ancho, alto, color) this.x = 0; esto.y = 0; this.width = ancho; this.height = altura; this.color = color; this.cHeight = cnvs.height; this.cWidth = cnvs.width; this.cntxt = cnvs.getContext ('2d');  Square.prototype.draw = function () this.cntxt.clearRect (0, 0, this.cWidth, this.cHeight); this.cntxt.fillStyle = this.color; this.cntxt.fillRect (this.x, this.y, this.width, this.height); ;

Hemos creado nuestro constructor 'Square', y uno de sus métodos. Crear un lienzo y luego animarlo no podría ser más sencillo:

 // Crear un

Este es un efecto muy simple, pero demuestra claramente las posibilidades. Puede verlo en acción aquí: http://jsbin.com/ocida (esto solo funcionará en los navegadores que admiten el lienzo HTML5)

5. jQuery.ajax devuelve el objeto XHR

Funciones de la utilidad Ajax de jQuery ('jQuery.ajax', 'jQuery.get', 'jQuery.post') todos devuelven un 'XMLHttpRequest' Objeto que puede utilizar para realizar operaciones posteriores en cualquier solicitud. Por ejemplo:

 var curRequest; jQuery ('button.makeRequest').click (function () curRequest = jQuery.get ('foo.php', function (response) alert ('Data:' + response.responseText););); jQuery ('button.cancelRequest').click (function () if (curRequest) curRequest.abort (); // abort () es un método de XMLHttpRequest);

Aquí estamos haciendo una solicitud cada vez que el 'hacer un pedido' se hace clic en el botón, y estamos cancelando la solicitud activa si el usuario hace clic en el botón 'cancelar petición' botón.

Otro uso potencial es para solicitudes síncronas:

 var myRequest = jQuery.ajax (url: 'foo.txt', async: false); console.log (myRequest.responseText);

Lea más sobre el 'XMLHttpRequest' objeto y también asegúrese de revisar las utilidades Ajax de jQuery.

6. Colas personalizadas

jQuery tiene un mecanismo de cola incorporado que es usado por todos sus métodos de animación (todos los cuales usan 'animar()' De Verdad). Esta cola se puede ilustrar fácilmente con una animación simple:

 jQuery ('a'). hover (function () jQuery (this) .animate (paddingLeft: '+ = 15px'); , function () jQuery (this) .animate (paddingLeft: '- = 15px'); );

Al pasar rápidamente sobre un grupo de anclas y luego sobre ellos nuevamente, las animaciones se pondrán en cola y se producirán una a la vez; estoy seguro de que muchos de ustedes han sido testigos de este efecto de cola antes. Si no, chécalo aquí: http://jsbin.com/aqaku

los 'cola' El método es similar al conocido. 'cada' Método en cómo se llama. Pasa una función, que finalmente se llamará para cada uno de los elementos de la colección:

 jQuery ('a'). queue (function () jQuery (this) .addClass ('all-hecho '). dequeue (); );

Pasando solo una función a 'cola' hará que esa función se agregue a la predeterminada 'fx' cola, es decir, la cola utilizada por todas las animaciones realizadas por jQuery. Por lo tanto, esta función no se activará hasta que todas las animaciones actuales que se producen en cada elemento de la colección (en este caso, todas las anclas) se hayan completado..

Note que estamos agregando una clase de 'todo listo' en la función de arriba. Como se indica, esta clase solo se agregará cuando todas las animaciones actuales estén completas. También estamos llamando a la 'dequeue' método. Esto es muy importante, ya que permitirá que jQuery continúe con la cola (es decir, le permite a jQuery saber que has terminado con lo que sea que estés haciendo). jQuery 1.4 proporciona otra forma de continuar la cola; en lugar de llamar 'dequeue', simplemente llame al primer argumento pasado a su función:

 jQuery ('a'). queue (function (nextItemInQueue) // Continuar la cola: nextItemInQueue (); );

Esto hace exactamente lo mismo, aunque es un poco más útil ya que puede llamarse a cualquier lugar dentro de su función, incluso dentro de un lío de cierres (que normalmente destruyen el 'esta' palabra clave). Por supuesto, pre-jQuery-1.4 puede guardar una referencia a 'esta', pero eso se pondría un poco cansado.

Para agregar una función a una cola personalizada, simplemente pase el nombre de su cola personalizada como primer argumento y la función como segundo:

 jQuery ('a'). queue ('customQueueName ', function () // Do stuff jQuery (this) .dequeue ('customQueueName '); );

Tenga en cuenta que, ya que no estamos usando el predeterminado 'fx' cola, también tenemos que pasar el nombre de nuestra cola a la 'dequeue' Método, para permitir que jQuery continúe con nuestra cola personalizada.

Leer más sobre 'cola', 'dequeue' y 'jQuery.queue'.

7. Espacios de nombres de eventos

jQuery proporciona una forma para que los eventos de espacio de nombres, que pueden ser muy útiles al crear complementos y componentes de terceros. Si es necesario, el usuario de su complemento puede deshabilitar efectivamente su complemento desvinculando todos los controladores de eventos que está registrado.

Para agregar un espacio de nombres al registrar un controlador de eventos, simplemente ponga un sufijo en el nombre del evento con un punto y luego su espacio de nombres único (por ejemplo,. '.fooPlugin'):

 jQuery.fn.foo = function () this.bind ('click.fooPlugin', function () // hacer cosas); this.bind ('mouseover.fooPlugin ', function () // hacer cosas); devuelve esto ; // Usa el complemento: jQuery ('a'). Foo (); // Destruye sus controladores de eventos: jQuery ('a'). Unbind ('.fooPlugin ');

Pasando sólo el espacio de nombres a 'desatar' desenlazará todos los controladores de eventos con ese espacio de nombres.

Conclusión

Entonces, ¿cuáles me perdí? ¿Alguna característica útil que crees que jQuery no documenta lo suficientemente bien? Vamos a discutir en los comentarios.!

Código