javascript - change - ¿De qué estás más entusiasmado con las nuevas versiones de jQuery?
jquery replace html (15)
Se ha lanzado una nueva versión reciente de jQuery, la jQuery v1.4. Puedes leer todo sobre esto here . Te permite hacer algunas cosas bonitas como:
$("div.test").bind({
click: function(){
$(this).addClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});
¿Qué es lo que más te gusta de esta nueva versión? ¿Qué es lo que te hizo ir "FINALMENTE"?
Se agregó una recompensa para obtener más comentarios y aceptar una respuesta.
Bueno, las mejoras en el rendimiento son, por supuesto, algo que aprecio, pero supongo que no puedo decir que sea un "finalmente", ya que es algo que está sujeto a una mejora constante :) La sintaxis de DOM Building (Quick Element Construction) parece muy conveniente, y la detach método detach también parece bastante útil: le permite eliminar temporalmente un objeto del DOM, pero mantiene todos los controladores asignados a él, de modo que funcione de la misma manera, cuando se vuelva a insertar.
Supongo que no hay muchas cosas que me haya estado perdiendo, pero ahora que estas nuevas funciones están ahí, hay un montón de cosas que estoy ansioso por comenzar a usar :)
Creo que unwrap () es simple, elegante, ¡y al final obtienes un HTML interno!
El nuevo método de desempaquetar llevará a los hijos de un padre dado y reemplazará a dicho padre con ellos. Al igual que:
<body>
<div>
<p>this</p> <p>is</p> <p>fun</p>
</div>
</body>
$(''div'').unwrap();
<body>
<p>this</p> <p>is</p> <p>fun</p>
</body>
Delegación de eventos para eventos focales y de burbujas:
En mi opinión, la mejor característica es permitir funciones en los configuradores:
jQuery(''li.selected'').html(function(i, li) {
return "<strong>" + li + "</strong>";
});
Una gran cantidad de código que requiere $. Cada uno puede ser eliminado ahora.
Ha sido muy modular desde 1.3+. Por ejemplo, cuando no necesita la biblioteca ajax, es bueno construirla sin ella. Mantenga el tamaño de los archivos hacia abajo.
La capacidad de crear elementos sobre la marcha de una manera más concisa, pasando todos los atributos como el segundo argumento a jQuery() :
jQuery(''<div/>'', {
id: ''foo'',
mouseenter: function() {
// do stuff
},
html: jQuery(''<a/>'', {
href: ''http://google.com'',
click: function() {
// do stuff
}
})
});
Todas las propiedades que no son atributos se asignan al método jQuery correspondiente. Entonces, al tener html se llamará .html() y al click se vinculará un nuevo evento de click través de .click() ...
Las llamadas en vivo () con eventos como el cambio son muy importantes para mí. He estado queriendo esto desde hace algún tiempo.
Llámame loco, pero solo el número adicional de pruebas me da una sensación de calidez borrosa. Casi quiero votar cada respuesta:) _
Lo creas o no, el momento "FINALMENTE" para mí fue la adición de delay() :
$("#notice").slideDown(''500'').delay(4000).slideUp(''500''); // = Pure awesome :)
Me gusta mucho retrasar () y separar () lo más, para ser honesto. Las mejoras en el rendimiento también son una gran ventaja, pero el retraso () es probablemente la parte más sorprendente. Sencillo pero ultra útil. No más setTimeouts ().
Para mí, es la capacidad de escribir ahora controladores de eventos con el controlador live() . Sé que live estuvo presente en la última versión (1.3.2), pero no fue totalmente compatible.
Esto hace que el código sea infinitamente más simple, especialmente si tiene la mayoría del DOM que se está creando sobre la marcha o mediante solicitudes Ajax.
Más sobre live aquí: http://api.jquery.com/live/
Para mi fue esto:
"Todos los eventos pueden ser eventos en vivo"
"Estamos muy orgullosos de contar algunos eventos adicionales entre los admitidos por live (). 1.4 introduce la compatibilidad con varios navegadores para cambios, envío, enfoque, enfoque, mouseenter y mouseleave a través de la delegación de eventos en .live ()".
¡He estado esperando esto en el evento de cambio por años!
Realmente no tengo un favorito, aquí hay una descripción general de 15 nuevas características para aquellos que no saben de qué se trata:
Soy un fanático de la velocidad por lo que cualquier mejora de velocidad siempre es bienvenida por mí
$.proxy()
Para asegurarse de que esto siempre significa esto en lugar de eso ...
Ejemplo desde here
MyModule = function() {
this.$div = $(''#testdiv'');
this.myString = "Hi! I''m an object property!";
this.$div.click($.proxy(this.handleClick, this));
};
MyModule.prototype.handleClick = function() {
console.log(this.myString); // Hi! I''m an object property!
};
var m = new MyModule();