jQuery 1.8 publicado: Mejor CSS3, modularidad y velocidad

Ha salido una nueva versión de jQuery, la 1.8. Antes de arrancar, puedes descargarla e implementarla en tus sitios:

http://code.jquery.com/jquery-1.8.0.min.js

Los cambios son muchos, pero la mayoría son de estabilidad y bugs. jQuery ha llegado a un nivel de maduración donde ya no hay tanta magia por release, pero sí una plataforma mucho más robusta. Entre los cambios más importantes, resaltamos:

Prefijos CSS3 automáticos

No hay nada más horrible que agregar todos estos prefijos para poder trabajar con CSS3:

Código :

-webkit-
-moz-
-o-
-ms-

Para el CSS normal tenemos una solución usando prefix-free, pero si agregabas código CSS3 con jQuery usando la función .css(), estos no se incluían automáticamente ni con esa función, por lo que había que agregarlos a mano.

Ahora con jQuery 1.8, los prefijos son automáticamente detectados y agregados.

Mejora de velocidad en el motor de selectores

jQuery es famoso por su capacidad de llegar a cualquier parte del DOM usando selectores CSS. Esa habilidad requiere código pesado que en jQuery 1.8 ha sido ampliamente optimizado, especialmente para IDs.

Las animaciones ahora tienen un evento de progreso

El core de animaciones se ha reescrito bastante para ser más veloz, aun no es 100% CS3 (Eso es una promesa de jQuery 2.0) pero, entre lo nuevo, destaca un nuevo callback para saber el progreso de la animación.

Modularidad

Ahora puedes bajar y usar solo ciertos pedazos de jQuery. Si nunca usas animation, si jamás te metes con AJAX, entre otros modulos, construye tu propio jQuery compacto usando grunt.

Recordatorio del nuevo modelo de eventos de jQuery

Desde jQuery 1.6 hay un nuevo modelo de eventos recomendado, pero aun muchas personas siguen usando el viejo (e incorrecto) modelo de:

Código :

$(document).ready( function ()
{
    //NO no no no.
});

El nuevo y correcto modelo de eventos de jQuery, recomendado para todos los casos, es este:

Código :

$(document).on("ready", evento);
function evento (ev)
{
    // Clever girl. 
}

Nada de usar los eventos como función del objeto, nada de usar live o bind. "on" y "off" suplen todas las necesidades y funcionan para todos los casos.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Este es local descargue el 1.8 <!DOCTYPE HTML> <html> <head> <script src="Ultimojqueryv1.8.0.js" type="text/javascript"></script> <script type="text/javascript"> $(document).on("ready", evento); function evento (ev) { alert('hola'); } </script> </head> <body> </body> </html> Este es con el de internet <!DOCTYPE HTML> <html> <head> <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).on("ready", evento); function evento (ev) { alert('hola'); } </script> </head> <body> </body> </html>

Por skaterseba el 10 de Agosto de 2012

nice, a probarlo, seguro que vuela.
Por spyder el 10 de Agosto de 2012

muy interezante espero que pronto la documentación en el sitio de Jquery (como empezar ) corrijan y pongan este nuevo metodo mencionado ya uqe mucha gente nueva se acostumbra al clasico $(document).ready( function ()
Por syslock64 el 10 de Agosto de 2012

que bueno que hallan mejorado el animate el proceso de la animacion era posible con codigo a mano, pero ahora que sera propio del core, sera mucho mas liviano y limpio =)
Por Lexas el 10 de Agosto de 2012

No comprendo algo, cuál es el beneficio de .on sobre .bind?
Por roger_oe el 10 de Agosto de 2012

parece muy interezante pero la declaracion tambien me parece mas facil y ordenada pero $(document).ready sera dificil de dejarlo
Por Dark Musician el 11 de Agosto de 2012

Parece que la ventaja de usar .on() en lugar de .bind() es que .on() también ata el handler a los elementos que se añadan dinámicamente a la página de la forma en que lo hacía el método .live(), es un método más completo.
Por Lexas el 11 de Agosto de 2012

Dark Musician-blog :
Parece que la ventaja de usar .on() en lugar de .bind() es que .on() también ata el handler a los elementos que se añadan dinámicamente a la página de la forma en que lo hacía el método .live(), es un método más completo.

Gracias por tu respuesta, no lo sabía.
Por Freddie el 11 de Agosto de 2012

Dark Musician-blog :
Parece que la ventaja de usar .on() en lugar de .bind() es que .on() también ata el handler a los elementos que se añadan dinámicamente a la página de la forma en que lo hacía el método .live(), es un método más completo.
Exactamente eso. Sumado a que off es super útil y funciona para múltiples funciones asignadas a múltiples eventos.
Por Lexas el 11 de Agosto de 2012

Ya me leí la documentación, está bien interesante el .on (soy newbie en JQuery -_-)
Por Alejandro el 12 de Agosto de 2012

¿En dónde puedo encontrar información sobre el uso del $(document).on("ready", evento); dentro del sitio de jquery?

He estado buscando y no he encontrado nada sobre esta recomendación. Todo lo que encuentro es http://api.jquery.com/ready/ en donde siguen mencionando $(document).ready(function() { … }); y nada de la nueva recomendación, a pesar de que ese documento fue actualizado con la salida de la versión 1.8.

¿Alguien me podría explicar el por qué de este cambio?
Por joanmunoz el 12 de Agosto de 2012

Yo siempre he estado acostumbrado a utilizar el DOM ready de jQuery de está forma.

jQuery(function($){
// DOM ready
});

¿Esa forma ya es retrograda?
Por Jbeja el 12 de Agosto de 2012

Yo tabien lo uso asi:

$(fucntion(){
// x funcion
});

me es mucho mas comodo.
Por Freddie el 13 de Agosto de 2012

joanmunoz :
Yo siempre he estado acostumbrado a utilizar el DOM ready de jQuery de está forma.

jQuery(function($){
// DOM ready
});

¿Esa forma ya es retrograda?
No es que sea retrogada, sólo altamente limitada y probablemente, a futuro, será incompatible. Yo migraría al nuevo sistema pronto.
Por Night~ el 13 de Agosto de 2012

bind o live si no me equivoco hacen llamada a .on y parecidos. Los que se usan ahora son .on y .delegate
Por elporfirio el 13 de Agosto de 2012

super los cambiazos.. no llevo mucho usando Jquery, supongo que asimilare los nuevos cambios facilmente.
Por RZ el 14 de Agosto de 2012

pues yo implemente esto en 1.7.2 y 1.8.0 y no jalo

$(document).on("ready", evento);
function evento (ev)
{
// Clever girl.
}
Por Otaku RzO el 14 de Agosto de 2012
El evento "ready" se ejecutará solo una vez, deberían usar el método "one".
Para los que usan $(function(){ o jQuery(function($){ deberían usar:
Código :
```
;(function($){

   $(document).one('ready', init);
   function init(){
      // Clabie~!
   }
   
})(jQuery);
```
Por Otaku RzO el 14 de Agosto de 2012
Y mejor si agregan el "use strict" de ECMAScript5 para que vayan dejando atrás las malas practicas:
Código :
```
;(function($){
   "use strict";

   $(document).one('ready', init);
   function init(){
      // Clabie~!
   }
   
})(jQuery);
```
Por elporfirio el 14 de Agosto de 2012

Ah yo creo que ese strict esta ya demasiado Pro... ni siquiera se que hace ¿documentación?
Por Freddie el 14 de Agosto de 2012

RZ :
pues yo implemente esto en 1.7.2 y 1.8.0 y no jalo

$(document).on("ready", evento);
function evento (ev)
{
// Clever girl.
}
Si lo implementaste así tal cual ¿Qué esperabas que hiciera? Es solo un comentario
Por caotz el 14 de Agosto de 2012

elporfirio :
Ah yo creo que ese strict esta ya demasiado Pro... ni siquiera se que hace ¿documentación?

Aquí la tienes: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode?redirectlocale=en-US&redirectslug=JavaScript%2FStrict_mode
Por RZ el 14 de Agosto de 2012

Freddie :
RZ :
pues yo implemente esto en 1.7.2 y 1.8.0 y no jalo

$(document).on("ready", evento);
function evento (ev)
{
// Clever girl.
}
Si lo implementaste así tal cual ¿Qué esperabas que hiciera? Es solo un comentario

Te has vuelto muy gracioso despues de que te dijeron tantas cosas aqui
[url=http://www.cristalab.com/blog/una-explicacion-honesta-del-clusterfuck-de-adobe-flash-y-flex-c102072l/][/url]

no ya enserio jaja, no me funciono esa parte .
Por Freddie el 14 de Agosto de 2012

RZ :
no ya enserio jaja, no me funciono esa parte .
De nuevo ¿Qué esperabas qué hiciera? ¿Qué no funciona? Es en serio, si pusiste sólo ese código, es un comentario, no va a pasar nada. Sube a algun lado un HTML y JS con lo que quieres hacer, pon la URL y miramos.
Por coso30 el 14 de Agosto de 2012

"Clever girl." JAJAJAJAJA ok hoy como siempre que paso por @cristalab aprendi algo nuevo bienvenido jQuery 1.8 a probarlo
Por RZ el 15 de Agosto de 2012

Freddie :
RZ :
no ya enserio jaja, no me funciono esa parte .
De nuevo ¿Qué esperabas qué hiciera? ¿Qué no funciona? Es en serio, si pusiste sólo ese código, es un comentario, no va a pasar nada. Sube a algun lado un HTML y JS con lo que quieres hacer, pon la URL y miramos.

jaja creo que es claro que no puse solo eso y ya , lo puse con el js, como indique en mi primer post, en la 1.7.2 y en el 1.8.0 y no funciono .
Por Freddie el 15 de Agosto de 2012

RZ :
Freddie :
RZ :
no ya enserio jaja, no me funciono esa parte .
De nuevo ¿Qué esperabas qué hiciera? ¿Qué no funciona? Es en serio, si pusiste sólo ese código, es un comentario, no va a pasar nada. Sube a algun lado un HTML y JS con lo que quieres hacer, pon la URL y miramos.

jaja creo que es claro que no puse solo eso y ya , lo puse con el js, como indique en mi primer post, en la 1.7.2 y en el 1.8.0 y no funciono .
RZ, el código funciona. Reitero: ¿Puedes postear acá el código que escribiste?
Por talentocomputo el 15 de Agosto de 2012

Freddie eres mi heroe jajaja >.<
Por dweb3dcom el 15 de Agosto de 2012

Muy interesante aporte, que bueno tener una nueva version de Jquery, vamos a ver que nuevas funcionalidades tiene , lo empezaré a probar ya mismo, saludos
Por elizabeth el 16 de Agosto de 2012

Entonces con jquery 1.8 ya no tendremos que usar prefijos?
Por RZ el 17 de Agosto de 2012
Freddie :
RZ :
Freddie :
RZ :
no ya enserio jaja, no me funciono esa parte .
De nuevo ¿Qué esperabas qué hiciera? ¿Qué no funciona? Es en serio, si pusiste sólo ese código, es un comentario, no va a pasar nada. Sube a algun lado un HTML y JS con lo que quieres hacer, pon la URL y miramos.

jaja creo que es claro que no puse solo eso y ya , lo puse con el js, como indique en mi primer post, en la 1.7.2 y en el 1.8.0 y no funciono .
RZ, el código funciona. Reitero: ¿Puedes postear acá el código que escribiste?

Aqui esta ahora si funciona pero la primera ves que lo hice no funciono .

Código :
```
Este es local descargue el 1.8
<!DOCTYPE HTML>
<html>
   <head>
<script src="Ultimojqueryv1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).on("ready", evento);
function evento (ev)
{
   alert('hola');
}
</script>
   </head>
   <body>
   </body>
</html>

Este es con el de internet

<!DOCTYPE HTML>
<html>
   <head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).on("ready", evento);
function evento (ev)
{
   alert('hola');
}
</script>
   </head>
   <body>
   </body>
</html>
```
Por Freddie el 17 de Agosto de 2012

elizabeth-blog :
Entonces con jquery 1.8 ya no tendremos que usar prefijos?
Nope
Pero sólo al usar .css(). Si quieres no usarlo con CSS normal usa prefix-free.

Y para RZ, se ve bien. Si ya te funciona, sé feliz
Por RZ el 17 de Agosto de 2012

Freddie :
elizabeth-blog :
Entonces con jquery 1.8 ya no tendremos que usar prefijos?
Nope
Pero sólo al usar .css(). Si quieres no usarlo con CSS normal usa prefix-free.

Y para RZ, se ve bien. Si ya te funciona, sé feliz

Sere feliz ., y que ha pasado con la seccion de SEO que te mencione,? se planea algo?
Por Freddie el 17 de Agosto de 2012

RZ :
Sere feliz ., y que ha pasado con la seccion de SEO que te mencione,? se planea algo?
Estoy estudiando montones, porque el SEO cambió demasiado este 2012.
Por RZ el 17 de Agosto de 2012

Freddie :
RZ :
Sere feliz ., y que ha pasado con la seccion de SEO que te mencione,? se planea algo?
Estoy estudiando montones, porque el SEO cambió demasiado este 2012.

Ok, se que haras un buen trabajo como lo has hecho hasta ahora saludos te dejo trabajar en paz ...
y con esperando con ansias el tema . saludos.
Por Elizabeth el 18 de Agosto de 2012

Gracias por la aclaración =)
Por Nader Antonio Malfit el 02 de Noviembre de 2012

hola.
Tengo un pequeño problema con jquery 1.8.0 y posteriores
cuando hago el llamado a funciones, estas se ejecutan dos veces, asi que por ahora sigo usando el
jquery 1.7.2 porque en este no tengo ese error
Por cesarpino547 el 04 de Marzo de 2013

Hola, @freddier usar .ready(handler) es la forma correcta, no .on("ready", handler). Por favor revisa la documentación oficial, ya que esto está generando muchas dudas. es más, .on("ready", handler) es obsoleto a partir de la versión 1.8. Este es el link de la documentación oficial api.jquery.com/ready/. Saludos.

jQuery 1.8 publicado: Mejor CSS3, modularidad y velocidad

Prefijos CSS3 automáticos

Mejora de velocidad en el motor de selectores

Las animaciones ahora tienen un evento de progreso

Modularidad

Recordatorio del nuevo modelo de eventos de jQuery

Publica tu comentario

o puedes...