jQuery 1.4 Lanzamiento Las 15 nuevas características que debes conocer

Puede que hayas notado el "texto"atributo, probablemente te estarás preguntando qué está haciendo allí, después de todo no hay"texto"atributo para los anclajes. Bueno, jQuery 1.4 utiliza sus propios métodos cuando se pasan ciertos atributos. Por lo tanto, el atributo" texto "especificado anteriormente haría que jQuery llame a".texto()"Método, pasando" Go to Google! "como su único argumento.

Un mejor ejemplo de esto en acción:

 jQuery ('
', id:' foo ', css: fontWeight: 700, color:' green ', haga clic en: function () alert (' ¡Se ha hecho clic en Foo! '); );

El "id" se agrega como un atributo regular, pero las propiedades "css" y "click" activan las llamadas de cada método respectivo. El código anterior, antes de la versión 1.4, se habría escrito así:

 jQuery ('
') .attr (' id ',' foo ') .css (fontWeight: 700, color:' green ') .click (function () alert (' ¡Se ha hecho clic en Foo! '););

Leer más sobre jQuery (…)

2. Todo "hasta"!

Tres nuevos métodos se han agregado al arsenal transversal de DOM en 1.4, "siguientehasta"prev Hasta que"y"padres hasta". Cada uno de estos métodos atravesará el DOM en una dirección determinada hasta que el selector pasado esté satisfecho. Entonces, digamos que tiene una lista de frutos:

 
 
manzana
 
Plátano
 
Uva
 
fresa
 
Pera
 
melocotón
 

Desea seleccionar todos los elementos después de "Apple", pero desea detenerse una vez que llegue a "Fresa". No podría ser más simple:

 jQuery ('ul li: contiene (Apple)'). nextUntil (': contiene (Pear)'); // Selecciona Banana, Uva, Fresa

Lea más sobre: ​​prev Hasta que, después hasta que, padres hasta que

3. Encuadernación de múltiples controladores de eventos

En lugar de encadenar un montón de métodos de enlace de eventos, puede agruparlos en la misma llamada, así:

 jQuery ('# foo) .bind (click: function () // hacer algo, mouseover: function () // hacer algo, mouseout: function () // hacer algo)

Esto también funciona con ".uno()".

Leer más sobre .bind (…)

4. Facilitación por propiedad

En lugar de solo definir una función de suavizado para una sola animación, ahora puede definir una función de suavizado diferente para cada propiedad que esté animando. jQuery incluye dos funciones de aceleración, swing (predeterminado) y lineal. Para otros deberás descargarlos por separado.!

Para especificar una función de aceleración para cada propiedad, simplemente defina la propiedad como una matriz, con el primer valor como desea animar esa propiedad, y el segundo es la función de flexibilización que debe usar:

 jQuery ('# foo'). animate (left: 500, top: [500, 'easeOutBounce'], 2000);

Ver este código en acción.!

También puede definir funciones de aceleración por propiedad en el objeto de opciones opcionales como pares nombre-valor de propiedad en el objeto "specialEasing":

 jQuery ('# foo'). animate (left: 500, top: 500, duration: 2000, specialEasing: top: 'easeOutBounce');

Nota del editor: el autor de este artículo, James Padolsey, está siendo modesto. Esta nueva característica fue su idea.!

Lea más sobre la mejora por propiedad

5. Nuevos eventos en vivo!

jQuery 1.4 agrega soporte para delegar el "enviar"cambio"atención"y"difuminar"eventos. En jQuery, usamos el".vivir()"método para delegar eventos. Esto es útil cuando tiene que registrar controladores de eventos en muchos elementos, y cuando se pueden agregar nuevos elementos con el tiempo (usando".vivir()"es menos costoso que volver a enlazar continuamente).

Pero ten cuidado! Debes usar los nombres de los eventos, "concéntrate en"y"enfoque"Si desea delegar los eventos" foco "y" desenfoque "!

 jQuery ('input'). live ('focusin', function () // haz algo con esto);

6. Controlando el contexto de una función

jQuery 1.4 proporciona una nueva "apoderado"función bajo el espacio de nombres de jQuery. Esta función toma dos argumentos, ya sea un" alcance "y un nombre de método, o una función y el alcance deseado. La palabra clave" esto "de JavaScript puede ser bastante difícil de mantener. Algunas veces no". t quiere que sea un elemento, sino un objeto que haya creado anteriormente.

Por ejemplo, aquí tenemos un "aplicación"objeto que tiene dos propiedades, una"clickHandler"método y un objeto de configuración:

 var app = config: clickMessage: 'Hola!' , haga clic enHandler: function () alert (this.config.clickMessage); ;

Los "clickHandler"método, cuando se llama como"app.clickHandler ()" tendrá "aplicación"como su contexto, lo que significa que el"esta"La palabra clave le permitirá acceder a"aplicación". Esto funciona bastante bien si simplemente llamamos:

 app.clickHandler (); // "¡Hola!" está alerta

Intentemos enlazarlo como un controlador de eventos:

 jQuery ('a'). bind ('clic', app.clickHandler);

Cuando hacemos clic en un ancla, no parece funcionar (no se alerta nada). Esto se debe a que jQuery (y la mayoría de los modelos de eventos sanos), de manera predeterminada, establecerá el contexto del controlador como el elemento de destino, es decir, se podrá acceder al elemento que se acaba de hacer clic a través de "esta". Pero no queremos eso, queremos"esta"para ser configurado a"aplicación". Lograr esto en jQuery 1.4 no podría ser más sencillo:

 jQuery ('a'). bind ('clic', jQuery.proxy (aplicación, 'clickHandler'));

Ahora cada vez que se hace clic en un ancla, "¡Hola!" será alertado!

La función proxy devuelve una versión "ajustada" de su función, con "esta"configurado a lo que usted especifique. También es útil en otros contextos, como pasar devoluciones de llamadas a otros métodos jQuery o a complementos.

Leer más sobre jQuery.proxy

7. Retrasar una cola de animación

Ahora puede agregar un retraso a sus colas de animación. De hecho, esto funciona en cualquier cola, pero su caso de uso más común probablemente será con la cola "fx". Esto le permite pausar entre animaciones sin tener que meterse con devoluciones de llamada y llamadas a "setTimeout". El primer argumento para".retrasar()"es la cantidad de milisegundos que desea retrasar.

 jQuery ('# foo') .slideDown () // Deslice hacia abajo .delay (200) // No haga nada durante 200 ms .fadeIn (); // Fundirse

Si desea retrasar una cola que no sea la cola predeterminada "fx", deberá pasar el nombre de la cola como el segundo argumento a ".retrasar()".

Leer más sobre .retraso (…)

8. Comprueba si un elemento Tiene Alguna cosa

jQuery 1.4 facilita la verificación de un elemento (o colección) ".tiene()"algo. Este es el equivalente programático al filtro de selección de jQuery":tiene()". Este método seleccionará todos los elementos de la colección actual que contengan al menos un elemento que cumpla con el selector pasado.

 jQuery ('div'). tiene ('ul');

Eso seleccionaría todos los elementos DIV que contienen elementos UL. En esta situación, probablemente solo utilizaría el filtro selector (":tiene()"), pero este método sigue siendo útil cuando necesita filtrar una colección mediante programación.

jQuery 1.4 también revela el "contiene"función bajo el espacio de nombres jQuery. Esta es una función de bajo nivel que acepta dos nodos DOM. Devolverá un valor booleano que indica si el segundo elemento está contenido dentro del primer elemento. E.g.

 jQuery.contains (document.documentElement, document.body); // Devuelve true -  está dentro 

Leer más sobre: .tiene(… ), jQuery.contains (…)

9. Desenvolver elementos!

Hemos tenido el ".envolver()"Método por un tiempo ahora. jQuery 1.4 agrega el".desenvolver()"método que hace todo lo contrario. Si asumimos la siguiente estructura DOM:

 
 
Foo
 

Podemos desenvolver el elemento de párrafo así:

 jQuery ('p'). unwrap ();

La estructura DOM resultante sería:

 
Foo

Esencialmente, este método simplemente elimina el padre de cualquier elemento.

Leer más sobre .desenvolver (…)

10. Eliminar elementos sin borrar datos

El nuevo ".despegar()"el método le permite eliminar elementos del DOM, al igual que el".retirar()"método. La diferencia clave con este nuevo método es que no destruye los datos almacenados por jQuery en ese elemento. Esto incluye los datos agregados a través de".datos()"y cualquier controlador de eventos agregado a través del sistema de eventos de jQuery.

Esto puede ser útil cuando necesita eliminar un elemento del DOM, pero sabe que tendrá que volver a agregarlo en una etapa posterior. Sus manejadores de eventos y cualquier otro dato persistirán..

 var foo = jQuery ('# foo'); // Enlazar un manejador de eventos importantes foo.click (function () alert ('Foo!');); foo.detach (); // Eliminar de DOM // ... hacer cosas foo.appendTo ('cuerpo'); // Agregarlo de nuevo al DOM foo.click (); // alertas "¡Foo!"

Leer más sobre .separar (…)

11. Mejoras en el índice (…)

jQuery 1.4 te ofrece dos nuevas formas de usar el ".índice()"método. Anteriormente, solo podía pasar un elemento como argumento y esperaría que se devolviera un número que indicara el índice de ese elemento dentro de la colección actual.

Sin pasar argumentos, ahora devuelve el índice de un elemento entre sus hermanos. Entonces, asumiendo la siguiente estructura DOM:

 
 
manzana
 
Plátano
 
Uva
 
fresa
 
Pera
 
melocotón
 

Cuando se hace clic en un elemento de la lista, desea averiguar el índice del elemento pulsado entre todos los demás elementos de la lista. Es tan simple como:

 jQuery ('li'). click (function () alert (jQuery (this) .index ()););

jQuery 1.4 también le permite especificar un selector como el primer argumento para ".índice()", al hacerlo le dará el índice del elemento actual entre la colección producida desde ese selector.

Debe tener en cuenta que lo que se devuelve de este método es un número entero, y devolverá -1 si el elemento / selector pasado no se encuentra en el documento..

Leer más sobre .índice (…)

12. Los métodos de manipulación de DOM aceptan devoluciones de llamada

La mayoría de los métodos de manipulación de DOM ahora admiten pasar una función como único argumento (o segundo, en el caso de ".css ()"&".attr ()"). Esta función se ejecutará en todos los elementos de la colección para determinar qué se debe utilizar como valor real para ese método..

Los siguientes métodos tienen esta capacidad:

• después
• antes de
• adjuntar
• anteponer
• addClass
• toggleClass
• removeClass
• envolver
• envolver todo
• wrapInner
• val
• texto
• reemplazar con
• css
• attr
• html

Dentro de la función de devolución de llamada, tendrá acceso al elemento actual en la colección a través de "esta"y su índice a través del primer argumento.

 jQuery ('li'). html (function (i) return 'Índice de este elemento de la lista:' + i;);

Además, con algunos de los métodos anteriores también obtendrá un segundo argumento. Si estás llamando a un método setter (como ".html ()"o".attr ('href)") tendrás acceso al valor actual. E.g.

 jQuery ('a'). attr ('href', function (i, currentHref) return currentHref + '? foo = bar';);

Como puedes ver, con el.css ()"y".attr ()"métodos, pasaría la función como segundo argumento, ya que el primero se usaría para nombrar la propiedad que desea cambiar:

 jQuery ('li'). css ('color', función (i, currentCssColor) return i% 2? 'red': 'blue';);

13. Determine el tipo de objeto

jQuery 1.4 agrega dos nuevas funciones de ayuda (almacenadas directamente debajo del espacio de nombres de jQuery) que le ayudan a determinar con qué tipo de objeto está tratando.

Primero, hay "isEmptyObject", esta función devuelve un valor booleano que indica si el objeto pasado está vacío o no (sin propiedades - directo y heredado). Segundo, hay "isPlainObject", que devolverá un valor booleano que indica si el objeto pasado es un objeto JavaScript simple, es decir, uno creado mediante""o"nuevo objeto ()".

 jQuery.isEmptyObject (); // true jQuery.isEmptyObject (foo: 1); // false jQuery.isPlainObject (); // true jQuery.isPlainObject (window); // false jQuery.isPlainObject (jQuery ()); // falso

Leer más sobre: isPlainObject (…), isEmptyObject (…)

14. Mejoras más cercanas (...)

jQuery ".más cercano ()"el método ahora acepta una matriz de selectores. Esto es útil cuando quiere recorrer los ancestros de un elemento, buscando (más de uno) elementos más cercanos con ciertas características.

Además, ahora acepta un contexto como segundo argumento, lo que significa que puede controlar hasta qué punto o qué tan cerca quiere que se mueva el DOM. Estas dos mejoras se adaptan a casos de uso poco frecuentes, pero se utilizan internamente con gran efecto!

Leer más sobre .más cercano (…)

15. Nuevos eventos! FocusIn y FocusOut

Como se mencionó, para delegar los eventos de "enfoque" y "desenfoque", debe usar estos nuevos eventos, llamados "enfoque en" y "enfoque". Estos eventos le permiten actuar cuando un elemento, o un descendiente de un elemento, se enfoca.

 jQuery ('form') .focusin (function () jQuery (this) .addClass ('focus');); .focusout (function () jQuery (this) .removeClass ('focus'););

También debe tener en cuenta que estos dos eventos no se propagan ("burbuja"); son capturados Esto significa que el elemento más externo (ancestro) se activará antes que el elemento causal "objetivo".

Lea más sobre el concéntrate en y enfoque fuera eventos.

Disfrute de jQuery 1.4, la versión de jQuery más esperada, con más funciones y con mejor rendimiento.!

¡Bueno, eso es todo! He tratado de cubrir los cambios que creo que tendrán un impacto en ti!

Si aún no lo has hecho, deberías revisar el14 días de jQuery", un increíble evento en línea que marca el lanzamiento de jQuery 1.4 y el cuarto cumpleaños de jQuery!

Y no te olvides de revisar el nuevo Documentación de la API!

Escribe un Tutorial Plus