Share
Si usted, como muchos desarrolladores de Flash, está considerando usar HTML5 para sus aplicaciones web, es casi seguro que se haya topado con jQuery. Es una biblioteca de JavaScript muy popular, utilizada por un gran porcentaje de los sitios web más visitados, pero ¿a qué se debe tanto alboroto??
Si conoces AS3, básicamente ya conoces mucho JavaScript; Los dos idiomas son muy similares. Por lo tanto, es tentador simplemente saltar directamente al código, pero hay algunos conceptos importantes que debe comprender primero. Una de ellas es la idea del DOM..
Cuando carga una página web, su navegador convierte HTML plano en una estructura similar a un árbol de objetos de JavaScript llamada DOM (Document Object Model). El DOM de JavaScript, entonces, es muy similar a la Lista de visualización de ActionScript; y si eres un desarrollador de Flex, podrás ver las similitudes entre MXML y HTML.
En Flash, podemos acceder a objetos de visualización específicos al navegar a través de la lista de visualización, como stage.getChildAt (3) .getChildAt (0), Pero esto es bastante ridículo. En cambio, es más probable que proporcionemos nombres de instancia de objetos de visualización (a través del IDE de Flash) o que almacenemos referencias a ellos en variables, matrices o propiedades de objetos, como dialogBox.okButton = nuevo SimpleButton ().
En JavaScript, nosotros podría construya nuestro DOM completamente a través de JS y luego diga al navegador que lo genere, pero este es un enfoque inusual; es mucho más probable que definamos el DOM a través de HTML, quizás con un pequeño aumento de JS. Por lo tanto, JavaScript tiene varios métodos diferentes para acceder a los elementos del DOM.
El más simple de estos es document.getElementById (). Si tenemos un documento HTML definido así:
Página de ejemplo Aquí hay un texto de ejemplo.
… entonces document.getElementById ("ejemplo") nos dará el resaltado lapso objeto del DOM. Entonces podríamos añadir un segundo pag etiqueta como así:
Accentsconagua
var newPara = document.createElement ("p"); var newTextNode = document.createTextNode ("Más texto de ejemplo que creamos al vuelo"); newPara.appendChild (newTextNode); document.getElementById ("example"). appendChild (newPara); Esto actualizaría el DOM, haciéndolo equivalente a lo que se habría creado si el HTML original fuera el siguiente:
Página de ejemplo Aquí hay un texto de ejemplo.
Más texto de ejemplo que creamos sobre la marcha..
¿Y si quisieras entonces acceder a los dos? pag ¿elementos? No podemos acceder a ellos directamente con document.getElementById (), Ya que no tienen identificación, pero podemos usar document.getElementsByTagName ("p") para obtener una matriz que contiene a ambos.
Y si hubiéramos tenido otra lapso, Me gusta esto:
Aquí hay un texto de ejemplo.
Más texto de ejemplo que creamos sobre la marcha..
Un segundo lapso.
No nos importan estos párrafos..
… Y solo queríamos obtener los dos primeros. pag etiquetas, podríamos llamar document.getElementById ("example1"). getElementsByTagName ("p") solo para recuperar esos dos: todas estas funciones DOM funcionan en cualquier nivel de la estructura de árbol, al igual que cada Flash DisplayObjectContainer tiene métodos como getChildAt ().
Esto es bastante simple de entender, pero hay problemas. El primero, puede que no se sorprenda al escucharlo, se refiere a Internet Explorer..
Impresionantes webs tiene una gran descripción de Internet Explorer getElementById () problema. Esencialmente, si tienes un elemento HTML como este:
... entonces, en la mayoría de los navegadores, document.getElementById ("exampleName") será no darte el lapso en cuestión, pero en IE7, será. (Otros navegadores podrían usar document.getElementsByName ("exampleName") [0] para devolver este particular lapso.)
Esto significa que, para ser coherentes en todos los navegadores (y suponiendo que no podamos cambiar el HTML), tendremos que escribir un código como este:
var theSpan; if (usingIE) // No explicaré cómo detectar el navegador aquí var temp = document.getElementById ("exampleId"); // esto podría haber devuelto un elemento con un nombre de "exampleId", por lo que debemos verificar: if (temp.getAttribute ("id") == "exampleId") theSpan = temp; else else theSpan = document.getElementById ("exampleId"); De manera más general, podríamos envolver eso en una función reutilizable:
función getElById (id) if (usingIE) var temp = document.getElementById (id); if (temp.getAttribute ("id") == id) return temp; else else theSpan = document.getElementById (id); ¡Genial! Pero, desafortunadamente, hay muchas de estas pequeñas diferencias irritantes; probablemente te sorprenderá, si vienes de un fondo de Flash directo, donde "problema de compatibilidad" generalmente significa que Flash Player es un poco lento en ciertas plataformas.
jQuery resuelve esto. Repasa las grietas entre diferentes navegadores con su propio conjunto de funciones, por lo que si el navegador del usuario es al menos tan nuevo como IE6, su código puede tener una interfaz consistente.
Esa no es la única manera en que jQuery hace que JavaScript sea más simple ...
Volvamos a este fragmento de HTML y asumamos que queremos recuperar el resaltado. pag elementos del DOM:
Aquí hay un texto de ejemplo.
Más texto de ejemplo que creamos sobre la marcha..
Un segundo lapso.
No nos importan estos párrafos..
Con jQuery, simplemente podemos escribir:
jQuery ("# example1 p") Eso es todo lo que necesitamos! #Ejemplo 1 dice "obtener el elemento con un ID de Ejemplo 1"y pag dice "obtener todos los pag elementos que son hijos de ese elemento ". Devuelve un" objeto jQuery ", que es un objeto de JavaScript que contiene los dos pag elementos propios del JS DOM, más algunas propiedades y métodos adicionales específicos de jQuery.
Podemos hacerlo aún más corto, reemplazando jQuery con PS - no hay misterio aquí; PS Es solo un nombre corto de variable. Compáralo con el código JavaScript nativo:
// JS regular, sin compatibilidad entre navegadores: document.getElementById ("example1"). getElementsByTagName ("p") // jQuery, con compatibilidad incorporada entre navegadores: $ ("# example1 p") No solo es más corto, sino que es consistente con CSS, lo que facilita su recogida. Podríamos usar el mismo selector como dentro de nuestro jQuery () Convocatoria de estilo de estos párrafos específicos en una hoja de estilo CSS:
# example1 p color: rojo
Eso es solo un ejemplo muy simple; No voy a entrar en detalles, pero estoy seguro de que puedes ver el beneficio de poder usar los mismos selectores tanto en CSS como en jQuery.
Mencioné que los objetos jQuery devueltos por un PS llamada tenía métodos y propiedades adicionales. Estos le proporcionan una sintaxis sencilla para escribir otras piezas de código comunes..
Por ejemplo, podríamos agregar una función de escucha y control de eventos al hacer clic con el mouse en ambos pag Elementos así:
$ ("# example1 p"). click (función () alert ("¡Has hecho clic en un párrafo!");); O bien, podrías hacerlos todos invisibles:
$ ("# example1 p"). hide (); O, podría ejecutar un JavaScript más general en ellos:
var allText = ""; $ ("# example1 p"). each (function () allText + = $ (this) .text ();); En cada caso, jQuery proporciona una forma simple, breve y consistente de escribir. Esto significa que es más rápido llevar el código de la cabeza al navegador, y no solo porque requiere menos caracteres..
Como Flash tiene sus raíces en la animación, estamos acostumbrados a tener muchas capacidades de interpolación integradas, tanto en el IDE de Flash como en el Tween clase, por no mencionar las diversas bibliotecas de interpolación disponibles.
JavaScript es diferente; La animación no es una parte intrínseca de la plataforma. Pero pequeñas interpolaciones y transiciones son partes esperadas de la interacción del usuario de la aplicación web moderna: si agrego un nuevo comentario en un hilo, se desliza en su lugar; Si elimino un artículo de mi cesta de la compra, parpadea en rojo y desaparece. Sin estos, las aplicaciones se ven sin pulir..
jQuery añade estas pequeñas transiciones.
Por ejemplo, digamos que queremos que cualquiera de los párrafos mencionados se desvanezca al hacer clic. Fácil:
$ ("# example1 p"). click (función () $ (this) .fadeOut ();); ¡Nada de eso! Y puedes pasar un duración y llamar de vuelta al fadeOut () Función, si no te gustan los valores por defecto..
Para algo un poco más potente, podemos usar el animar() método. Esto es esencialmente el equivalente a una interpolación; pásele un conjunto de propiedades y valores CSS para animar, una duración, un tipo de relajación y una devolución de llamada, y se encarga de todo por usted..
No es exactamente Greensock, pero es mucho más conveniente que escribir estos efectos desde cero, e ideal para las interfaces de aplicaciones web.
Hablando de que…
HTML tiene algunos componentes de interfaz de usuario integrados, por supuesto: botones, campos de texto, etc. HTML5 define algunos nuevos, como un selector de calendario emergente y un piquete de color (aunque actualmente solo se admiten en Opera).
Pero estos no son suficientes, por sí solos, para crear una interfaz de aplicación web completa y moderna. No hay nada para manejar las pestañas dentro de una página, ni una barra de progreso, ni siquiera una simple ventana de diálogo (fuera de alerta() y rápido()).
jQuery UI, una biblioteca opcional construida sobre jQuery, agrega estos widgets adicionales, con métodos y eventos que son consistentes con la sintaxis jQuery habitual. Piense en ello como un equivalente de JavaScript a los AS3 MinimalComps de Keith Peters. La página de demostración lo muestra mejor de lo que puedo explicarlo.
Cada widget puede admitir temas personalizados, por lo que puede crear un único aspecto que se ajuste a su sitio y aplicarlo a cada componente, lo que hace posible modificar su apariencia de una vez. De nuevo: ¡consistencia! Además, puede aplicar efectos relacionados con la IU a otros elementos; permitir al usuario arrastrar o cambiar el tamaño de un elemento DOM, o hacer clic y arrastrar un cuadro alrededor de un grupo de elementos para seleccionarlos para su envío.
La compatibilidad entre navegadores, la fácil sintaxis, las capacidades de interpolación y los elementos de la interfaz de usuario son los principales beneficios de jQuery en comparación con el simple JS. Sin embargo, hay otras razones para que me guste:
Entonces por qué no lo haría usas jQuery? Al igual que con la mayoría de las opciones de tecnología, es una cuestión de asegurarse de que está utilizando la herramienta adecuada para el trabajo. Si tiene una estructura DOM simple, o no requiere animaciones y transiciones sofisticadas, o si está utilizando principalmente lona Para representar su interfaz, en lugar de widgets, probablemente jQuery no sea necesario.
Si ya está utilizando una o más bibliotecas de JavaScript (Dojo, MooTools, YUI, etc.) es posible que descubra que no necesita la funcionalidad de jQuery además de lo que ofrecen. Pero mi objetivo en este artículo no es tratar de venderte en ninguna biblioteca en particular por encima de ninguna otra.
Espero que este artículo haya ayudado a explicar de qué se trata el problema con jQuery, especialmente si viene del mundo de AS3 y Flash. Si desea aprenderlo, consulte la etiqueta jQuery en Nettuts + - jQuery para Absolute Beginners es un buen lugar para comenzar.
Déjame saber si tienes alguna pregunta!
