Lo que necesitas saber sobre jQuery 1.3

La comunidad de desarrollo web se entusiasmó intensamente el 14 de enero de 2009, cuando se lanzó oficialmente la versión 1.3.0 de jQuery. jQuery 1.3 trae consigo mejoras significativas, especialmente cuando se trata de velocidad. Además, los desarrolladores pudieron mantener jQuery tan pequeño como siempre al tiempo que agregaron algunas funciones geniales ya menudo solicitadas. Hoy, analizaremos en profundidad las nuevas características y cómo puede aprovechar al máximo.

Primeros pasos y actualización

Si es nuevo en jQuery y necesita descargar la última versión, visite la página de inicio de jQuery y haga clic en el enlace de descarga para comenzar. Si está actualizando desde una versión anterior, le complacerá observar que la API se ha mantenido consistente y compatible con versiones anteriores. Para actualizar, simplemente actualice la versión jQuery en su servidor y haga un enlace a la misma properl.y Más adelante en este artículo, analizaremos cualquier cambio que pueda causar problemas con cualquier código actual.

Sizzle CSS Selector Engine

Los desarrolladores de jQuery han dado un gran paso adelante con su motor de selección de css y han iniciado un proyecto independiente conocido como 'Sizzle'. Sizzle es ahora el motor de selección de CSS para jQuery y está dirigido por la Fundación Dojo. Sizzle ya parece prometedor para más marcos que jQuery, ya que está abierto y disponible para cualquier desarrollador que desee utilizarlo en sus proyectos. Puede obtener más información sobre sizzle en la página de lanzamiento de jQuery y en la página de inicio de Sizzle. jQuery está colaborando actualmente con Prototype, Dojo, Yahoo UI, MochiKit, TinyMCE y muchas más bibliotecas para hacer que este motor sea aún más poderoso.

Rendimiento del selector mucho más rápido

Con el lanzamiento de un nuevo motor viene un rendimiento mucho más rápido; en algunos casos, más del 400% más rápido, dependiendo del navegador utilizado. jQuery publicó los resultados de sus pruebas utilizando selectores que las personas realmente usan (que hemos trazado en la siguiente sección). Vea el gráfico directamente debajo para los nuevos resultados del rendimiento del selector.

Selectores comunes y su velocidad

Como se mencionó anteriormente, las pruebas de rendimiento del selector se basaron en los selectores que las personas realmente utilizaron. Encontré esta información en sí misma como interesante, y puede encontrarla aquí. Sin embargo, está en un formato de solo texto y me gustan los gráficos y tablas. Una de las cosas que más me sorprendió fue cómo un porcentaje tan pequeño de personas aprovechaban el selector visible. A continuación, encontrará los selectores que los desarrolladores utilizan con más frecuencia en los scripts de jQuery hoy..

jQuery API por Remy Sharp

Otra cosa realmente emocionante sobre el lanzamiento de jQuery 1.3 es el lanzamiento de un nuevo navegador jQuery API, creado por Remy Sharp. Puede acceder a él a través de Internet para buscar cualquier método o función de jQuery que desee. Aún mejor, está disponible para descargar como un navegador fuera de línea utilizando el instalador de Adobe Air Flash. Básicamente, la API de jQuery hace que cualquier información o documentación sea accesible con unos pocos clics, con o sin conexión a Internet..

Encima:navegador fuera de línea en funcionamiento.

No más rastreo del navegador!

Hasta ahora, jQuery ha estado realizando un proceso conocido como rastreo del navegador para determinar la acción que debe tomar el código. La desventaja de esto es que la suposición de que existe un error o una característica siempre existirá. jQuery supera esto mediante el uso de un único objeto conocido como jQuery.support, y ya no selecciona a un agente de usuario cantante. John explica cómo funciona mejor jQuery.support:

Utilizamos una técnica llamada detección de características en la que simulamos una característica o error del navegador en particular para verificar su existencia. Hemos encapsulado todos los controles que usamos en jQuery en un solo objeto: jQuery.support. En la documentación de jQuery.support se puede encontrar más información al respecto, la detección de características y lo que proporciona esta característica..

Entonces, ¿qué significa esto al final? Esto significa que los complementos de jQuery y jQuery con el tiempo serán mucho más confiables, ya que ya no tenemos que depender de la detección del navegador para determinar un agente de usuario / navegador específico. John también señala que jQuery.browser aún permanece en jQuery y permanecerá durante bastante tiempo. Está en desuso y se recomienda utilizar la detección de funciones en su lugar..

Nuevos eventos en vivo y delegación de eventos

Una característica emocionante y ciertamente útil lanzada con 1.3 es la nueva característica de 'eventos en vivo'. La delegación de eventos en vivo significa que si un elemento tiene un controlador de eventos adjunto, cualquier otro elemento creado también tendrá ese controlador de eventos adjunto. Tome el código siguiente que se encuentra en la documentación en vivo ().

 $ ("p"). live ("click", function () $ (this) .after ("

Otro párrafo!

"););

A primera vista, podría preguntarse: '¿Por qué no debería adjuntar un controlador de eventos de clic a la etiqueta p?'. Con una inspección adicional, nos damos cuenta de que cualquier elemento p insertado después del párrafo actual también tendrá el controlador de eventos adjunto, lo que otorga al efecto un uso ilimitado. Puede leer más sobre los eventos en vivo y ver la demostración en los documentos de jQuery.

Introducción más cercana ()

Al acumularse en otra gran característica de la versión 1.3, los desarrolladores nos dieron el más cercano (), que hace exactamente lo que crees que haría. La función más cercana () se puede usar para encontrar el elemento más cercano dentro de un conjunto dado de parámetros. De nuevo, echemos un vistazo a la demo..

 $ (document) .bind ("click", function (e) $ (e.target) .closest ("li"). toggleClass ("highlight"););

En el código anterior, vinculamos una función de clic al documento actual y agregamos / eliminamos el 'resaltado' de la clase al elemento li más cercano cuando un usuario hace clic. Si no se encuentra ningún elemento, continúa desplazándose hacia arriba en el documento hasta que encuentra una coincidencia. Si no se encuentra ninguna coincidencia, no se ejecuta nada. Obtenga más información sobre el desplazamiento mediante el uso de closest ()..

Manipulación de DOM más rápida e inserción de HTML

jQuery vio una mejora significativa en la velocidad cuando se trata de la manipulación de DOM y la inserción / creación de nuevos elementos HTML. Esto se aplicaría al uso de métodos como .insertBefore () y append (), etc. Para obtener una mejor idea de los cambios de velocidad, veremos otro gráfico súper sorprendente..

Más rápido Ocultar / Mostrar resultados

Tiene sentido que los desarrolladores se tomaron el tiempo para concentrarse en aumentar la velocidad de los efectos de ocultar / mostrar. Estos son dos de los efectos jQuery más utilizados. Resultados de velocidad vistos abajo.

Resultados offset más rápidos ()

Si te encuentras usando offset () con frecuencia en tus scripts de jQuery, te alegrará saber que la velocidad de desplazamiento también ha mejorado enormemente. En caso de que se lo pregunte, offset () simplemente obtiene el desplazamiento actual del elemento coincidente en relación con el documento. Resultados vistos abajo.

Otras características que vale la pena destacar

  • El método ready () ya no espera a que se cargue el css. El script debe colocarse después de los archivos css..
  • El '@' en [@attr] ha sido eliminado en 1.3 y ha quedado en desuso mucho antes. Para actualizar, simplemente necesita eliminar la @.
  • John recomienda hacer todo lo posible para asegurarse de que sus páginas se ejecutan en modo estándar. Si se ejecuta en modo peculiar, corre el riesgo de encontrar algunos errores, especialmente en Safari..
  • Safari 2 ya no es compatible.
  • Directamente de la documentación: "A partir de jQuery 1.3, si especifica una duración de animación de 0, la animación establecerá los elementos de forma síncrona en su estado final (esto es diferente de las versiones antiguas donde habría un breve retraso asíncrono antes del se establecería el estado final) ".
  • Toggle () ahora acepta un valor booleano.
  • De la documentación: "Las expresiones complejas: no () ahora son válidas. Por ejemplo:: no (a, b) y: no (div a)".

Recursos adicionales

  • Documentación de lanzamiento de jQuery 1.3

    Su primera parada para descubrir todo y todo lo que se incluyó en esta versión. Y si aún estás deseando más gráficos y tablas, también puedes encontrarlos allí..

    Visita la página web

  • API de jQuery

    No se olvide de revisar el nuevo API de jQuery / navegador sin conexión, le ahorrará un montón de tiempo y preguntas cuando se atasque.

    Visita la página web

  • Serie de videos de jQuery for Absolute Beginners

    Jeffrey realizó una excelente serie de 15 partes en el blog ThemeForest que cubre una gran cantidad de consejos, trucos y técnicas de jQuery. No te lo pierdas!

    Visita la página web