Mejore su jQuery – 25 consejos excelentes
Introducción
jQuery es impresionante. He estado usando durante un año y aunque me impresionó, para empezar estoy gusto más y más mientras más lo use y cuanto más se enteren de funcionamiento interno.
No soy un experto jQuery. No pretendo ser, por lo que si hay errores en este artículo a continuación, no dude en corregir o hacer sugerencias de mejora.
Me llamo a mí mismo un “intermedio” de usuario jQuery y pensé que algunos otros por ahí podría beneficiarse de todos los pequeños consejos trucos y técnicas que he aprendido a lo largo del año pasado. El artículo también terminó siendo mucho más tiempo de lo que pensé que iba a ser así que voy a empezar con una tabla de contenido para que pueda saltar a los bits que está interesado pulg
Tabla de contenidos
1. Cargue el marco de Google Code
2. Use una hoja de trucos
3. Combine todos los scripts y los minify
4. Utilice la consola de Firebug es excelente registro de instalaciones
5. Mantener las operaciones de selección para un mínimo de almacenamiento en caché
6. Mantenga la manipulación DOM al mínimo
7. Envolver todo en un solo elemento al hacer cualquier tipo de inserción DOM
8. Utilizan números de identificación en lugar de las clases siempre que sea posible
9. Dé a sus selectores de un contexto
10. Usar correctamente el encadenamiento
11. Aprenda a usar correctamente animados
12. Más información sobre la delegación de eventos
13. clases de uso para almacenar el estado
14. Mejor aún, en la utilización de datos de jQuery () para almacenar el estado
15. Escribe tu propia selectores
16. Racionalizar el código HTML y modificar una vez cargada la página ha
17. Perezoso contenido de la carga de las prestaciones de velocidad y SEO
18. jQuery uso de funciones de utilidad
19. Utilice noconflict cambiar el nombre del objeto jQuery utilizando otros marcos
20. Cómo saber cuando las imágenes se hayan cargado
21. Utilice siempre la versión más reciente
22. Cómo comprobar si existe un elemento
23. Agregue una clase JS a su atributo HTML
24. Volver ‘falsa’ para evitar el comportamiento por defecto
25. Atajo para el evento ready
1. Cargue el marco de Google Code
Google ha sido anfitrión de varias bibliotecas de JavaScript desde hace un tiempo en Google Code, y hay varias ventajas para la carga de los mismos en lugar de desde el servidor. Se ahorra ancho de banda, que va a la carga muy rápidamente de CDN de Google y lo más importante es que ya estará en caché si el usuario ha visitado un sitio que ofrece desde Google Code.
Esto tiene mucho sentido. ¿Cuántos sitios por ahí están sirviendo copias idénticas de jQuery que no están recibiendo en caché? Es fácil de hacer demasiado …
< script src="http://www.google.com/jsapi">
< script type="text/javascript">
/ / Cargar jQuery
google.load (“jquery”, “1.2.6″);
google.setOnLoadCallback (function () {
/ / El código va aquí.
});
O, usted puede incluir una referencia directa de esta …
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript">
Las instrucciones completas aquí
2. Use una hoja de trucos
No es sólo una punta de jQuery, hay algunos grandes hojas de trucos que hay para la mayoría de idiomas. Es muy útil tener todas las funciones en una hoja A4, puede imprimir para consulta y afortunadamente estos muchachos han producido un par de los agradables ..
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/
3. Combine todos los scripts y los minify
OK, un general punta JavaScript aquí. Sin embargo, cualquier gran proyecto que utiliza un montón de jQuery probablemente usa un montón de plugins (este sitio utiliza relajación, localScroll, mesa de luz y de la precarga) por lo que es generalmente aplicable.
Los navegadores no pueden cargar las secuencias de comandos al mismo tiempo (bueno, la mayoría no puede, sin embargo), lo que significa que si tienes varios guiones descargar uno a la vez entonces usted está realmente desacelerando la carga de la página. Así, suponiendo que el scrips se cargan en cada página entonces usted debería considerar la combinación de ellos en una larga secuencia de comandos antes de implementar.
Algunos de los plugins que ya se minified, pero debe tener en cuenta el empaque de sus guiones y las que no están listos. Sólo toma unos segundos. Yo soy personalmente un fan de Packer por Dean Edwards
4. Utilice la consola de Firebug es excelente registro de instalaciones
Si usted no ha instalado Firebug entonces usted realmente debe. Aparte de muchas otras funciones útiles, tales como lo que le permite inspeccionar el tráfico HTTP y encontrar problemas con el CSS tiene un excelente registro de comandos que le permiten fácilmente depurar sus scripts.
He aquí una explicación completa de todos los de sus características
Mis características favoritas son “console.info”, que puede utilizar para descargar sólo los mensajes y las variables a la pantalla sin tener que utilizar las cajas de alerta y “console.time”, que le permite configurar fácilmente un contador de tiempo para ajustar un montón de código y ver cuánto tiempo tarda. Todos son muy fáciles de utilizar también …
console.time (‘crear una lista’);
for (i = 0; i <1000; i + +) {
myList var = $ ('myList.');
myList.append ('Esto es elemento de la lista "+ i);
}
console.timeEnd ('crear una lista');
En este caso he escrito deliberadamente un código muy ineficiente! En las puntas de los próximos te mostraré cómo se puede utilizar el temporizador para mostrar algunas mejoras que se pueden hacer.
5. Mantener las operaciones de selección para un mínimo de almacenamiento en caché
selectores de jQuery son impresionantes. Ellos hacen la selección de cualquier elemento de la página muy simple, pero internamente tienen que hacer una buena cantidad de trabajo y si se vuelven locos con ellos es posible encontrar las cosas empiezan a ser bastante lento.
Si usted está seleccionando el elemento de tiempo mismo una y otra vez (en un bucle por ejemplo) entonces sólo se puede seleccionar una vez y lo mantenga en la memoria mientras lo manipulan a su antojo. Considere el siguiente ejemplo donde podemos añadir elementos a una lista desordenada con un lazo.
for (i = 0; i <1000; i + +) {
myList var = $ ('myList.');
myList.append ('Esto es elemento de la lista "+ i);
}
Para eso se necesita 1.066 milisegundos en mi PC en Firefox 3 (imaginar cuánto tiempo se IE6!), Que es bastante lento en términos de JavaScript. Ahora visita el siguiente código donde se utiliza el selector de una sola vez.
myList var = $ ('myList.');
for (i = 0; i <1000; i + +) {
myList.append ('Esto es elemento de la lista "+ i);
}
Que sólo tiene 224 milisegundos, más de 4 veces más rápido, con sólo mover una línea de código.
6. Mantenga la manipulación DOM al mínimo
Podemos hacer que el código de la extremidad anterior aún más rápido al reducir el número de veces que se inserte en el DOM. las operaciones de inserción, DOM. append (). anteponer (). después de () y. envoltura () son relativamente costosos lotes y realizar de ellos realmente pueden retrasar las cosas.
Todo lo que necesitamos hacer es usar la concatenación de cadenas para crear la lista y luego usar una sola función para agregarlos a su lista desordenada como. Html () es mucho más rápido. Tomemos el ejemplo siguiente …
myList var = $ (‘# myList’);
for (i = 0; i <1000; i + +) {
myList.append ('Esto es elemento de la lista "+ i);
}
En mi PC que tiene 216 milisegundos, poco más de un 1/5th de un segundo, pero si podemos construir los elementos de lista como una cadena de primera y utilizar el método de HTML para hacer el relleno, como este ....
myList var = $ ('myList.');
myListItems var ='';
for (i = 0; i <1000; i + +) {
myListItems + = '< li> Este es elemento de la lista “+ i +” ‘;
}
myList.html (myListItems);
Para eso se necesita 185 milisegundos, no mucho más rápido, pero esa es otra 31 milisegundos en el tiempo.
7. Envolver todo en un solo elemento al hacer cualquier tipo de inserción DOM
OK, no me pregunten por qué se trabaja (estoy seguro que un programador con más experiencia a explicar).
En nuestro último ejemplo se inserta 1,000 elementos de la lista en una lista desordenada con el html. () Método. Si tuviéramos los han envuelto en la etiqueta UL antes de hacer el relleno y se inserta la UL completado en otra etiqueta (un DIV), entonces estamos efectivamente sólo la inserción de una etiqueta, no 1000, que parece ser mucho más rápido. Al igual que este …
myList var = $ (‘myList.’);
myListItems var = ‘< ul>;
for (i = 0; i <1000; i + +) {
myListItems + = '< li> Este es elemento de la lista “+ i +” ‘;
}
myListItems + = ‘‘;
myList.html (myListItems);
El momento es ahora sólo 19 milisegundos, una mejora masiva, 50 veces más rápido que nuestro primer ejemplo.
8. Utilizan números de identificación en lugar de las clases siempre que sea posible
jQuery hace que la selección de elementos DOM utilizando las clases tan fácil como seleccionar los elementos de identificación que solía ser, por lo que es la tentación de utilizar las clases mucho más liberal que antes. Todavía es mucho mejor para seleccionar por ID, porque aunque jQuery utiliza método nativo del navegador (getElementById) para hacer esto y no tiene que hacer nada de su propio recorrido DOM, que es mucho más rápido. ¿Cuánto más rápido? Vamos a ver.
Voy a usar el ejemplo anterior y adaptarlo de manera que cada LI creamos tiene una clase única agregado a él. Entonces voy a recorrer y seleccionar cada uno una vez.
/ / Crear la lista myList var = $ (‘myList.’); MyListItems var = ‘< ul>; for (i = 0; Este es un elemento de la lista ‘;} myListItems + = ‘‘; myList.html (myListItems); / / Seleccione cada elemento una vez for (i = 0; i <1,000; i + +) {var selectedItem = $ ('. ListItem' + i);}
Justo cuando pensé que mi navegador había colgado, terminó, en 5066 milisegundos (más de 5 segundos). Así que he modificado el código para dar a cada elemento un identificador en lugar de una clase y luego selecciona usando el identificador.
/ / Crear la lista
myList var = $ ('myList.');
myListItems var = '< ul>;
for (i = 0; i <1000; i + +) {
myListItems + = '< li id="listItem'+ i +'"> Se trata de un elemento de la lista ‘;
}
myListItems + = ‘‘;
myList.html (myListItems);
/ / Seleccione cada elemento una vez
for (i = 0; i <1000; i + +) {
selectedItem var = $ ('# ListItem' + i);
}
Esta vez sólo tuvo 61 milisegundos. Casi 100 veces más rápido.
9. Dé a sus selectores de un contexto
De forma predeterminada, cuando se utiliza un selector como $ (‘. MyDiv’) el conjunto de la DOM se atraviesa, que dependiendo de la página podría ser costoso.
La función de jQuery toma un segundo parámetro al realizar una selección.
jQuery (expresión, el contexto)
Al proporcionar un contexto para el selector, que le dan un elemento para iniciar la búsqueda dentro de lo que no tiene que recorrer el conjunto de la DOM.
Para demostrar esto, vamos a tomar el primer bloque de código por encima de la punta. Crea una lista desordenada con 1000 puntos, cada uno con una clase individual. A continuación, recorre y selecciona cada artículo una sola vez. Usted recordará que al seleccionar por clase que tomó poco más de 5 segundos para seleccionar todos los 1.000 de ellos con este selector.
selectedItem var = $ (‘# ListItem’ + i);
Luego añade un contexto para que sólo ejecuta el selector dentro de la lista desordenada, así …
selectedItem var = $ (‘# ListItem’ + i, $ (‘myList.’));
Todavía tuvo 3.818 milisegundos porque todavía terriblemente ineficiente, pero eso es más que un aumento de velocidad del 25% al hacer una pequeña modificación a un selector.
10. Usar correctamente el encadenamiento
Una de las mejores cosas acerca de jQuery es su capacidad de método de la cadena de llamadas entre sí. Así, por ejemplo, si usted quiere cambiar la clase de un elemento.
$ (‘MyDiv’) removeClass (‘off’) addClass (“on”)..;
Si eres como yo, entonces probablemente se enteró de que en sus primeros 5 minutos de lectura sobre jQuery pero va más allá que eso. En primer lugar, que todavía funciona a través de saltos de línea (porque jQuery = JavaScript), lo que significa que puede escribir código limpio como este …
. $ (‘# MyPanel’) find (‘LA MESA firstCol.’) RemoveClass CSS (‘fondo’: ‘rojo’). (‘FirstCol.’). Append (‘< span> Esta célula es ahora rojo ‘);
Hacer un hábito de utilizar el encadenamiento de forma automática le ayuda a reducir el uso del selector también.
Pero va más allá que eso. Digamos que usted desea llevar a cabo varias funciones en un elemento, pero uno de los cambios primeras funciones el elemento de alguna manera, así …
. $ (‘# MyTable’) encuentran CSS (‘fondo’, ‘rojo’) (‘firstColumn.’).;
Hemos seleccionado una tabla, perforado hacia abajo para encontrar células con una clase de “firstColumn” y coloreado en rojo.
Digamos que ahora desea colorear todas las celdas con una clase de “lastColumn” azul. Debido a que hemos utilizado el find () funciton que hemos filtrado a cabo todas las células que no tienen una clase de “firstColumn” por lo que necesitamos para utilizar el selector de nuevo para obtener el elemento de la tabla y no podemos seguir el encadenamiento, ¿no? jQuery Por suerte tiene un fin () que en realidad vuelve a la selección sin alteraciones previas para que pueda llevar a cabo el encadenamiento, así …
$ (‘# MyTable’)
. Find (‘. FirstColumn’)
. Css (‘fondo’, ‘rojo’)
. End ()
. Find (‘. LastColumn’)
. Css (‘fondo’, ‘azul’);
También es más fácil de lo que piensa escribir su propia función de jQuery que puede encadenar. Todo lo que tienes que hacer es escribir una función que modifica un elemento y lo devuelve.
$. Fn.makeRed = function () {
return $ (este) CSS (‘fondo’, ‘rojo’).;
}
. $ (‘# MyTable’) encuentran makeRed () append (‘hola’) (‘firstColumn.)..;
¿Qué tan fácil es eso?
11. Aprenda a usar correctamente animados
Cuando comencé a usar jQuery Me encantó el hecho de que fuera fácil de utilizar las animaciones predefinidas como slideDown () y fadeIn () para obtener algunos efectos realmente genial increíblemente fácil. Es fácil tomar las cosas aún más, porque aunque animar jQuery () es muy fácil de usar y muy potente. De hecho, es mirar el código fuente jQuery verá que los métodos internos son accesos directos que utilizan la animación () función.
slideDown: function (velocidad, de devolución de llamada) {
this.animate retorno ({height: “espectáculo”}, la velocidad, de devolución de llamada);
},
fadeIn: function (velocidad, de devolución de llamada) {
this.animate retorno ({opacidad: “show”}, la velocidad, de devolución de llamada);
}
La animación () simplemente toma cualquier estilo CSS y sin problemas las transiciones desde un valor a otro. Así, usted puede cambiar el ancho, la altura, la opacidad, el color de fondo, arriba, izquierda, margen, color, tamaño de fuente, lo que quieras.
Esto es lo fácil que es animar a todos los elementos de menú crecer a 100 píxeles de alto, cuando al lanzar sobre ellos.
$ (‘# Li myList’). Mouseover (function () {
$ (Este) animar ({“altura”: 100}, “lento”);.
});
A diferencia de otras funciones de jQuery, las animaciones son automáticamente en la cola, así que si desea ejecutar una segunda animación una vez que el primero ha terminado a continuación, sólo se llama al método animar dos veces, no hay devolución de llamada es necesario.
$ (‘# MyBox’). Mouseover (function () {
$ (Este) animar ({“title”: 200}, “lento”);.
$ (Este) animar ({“altura”: 200}, “lento”);.
});
Si desea que la animación a suceder a continuación, al mismo tiempo sólo hay que poner los dos estilos en el params objeto de una sola llamada, así …
$ (‘# MyBox’). Mouseover (function () {
$ (Este) animar. ({“Title”: 200, “altura”: 200}, “lento”);
});
Puede animar cualquier propiedad que es numérico. También puede descargar los plugins que le ayudarán a animar las propiedades que no son, como los colores y los colores de fondo
12. Más información sobre la delegación de eventos
jQuery hace que sea más fácil que nunca para añadir eventos a los elementos en el DOM discretamente, que es grande, pero la adición de muchos eventos es ineficiente. delegación de eventos le permite añadir eventos menos para lograr el mismo resultado que en muchas situaciones. La mejor manera de ilustrar esto es con un ejemplo …
$ (‘# MyTable TD). Click (function () {
$ (Este) CSS (‘fondo’, ‘rojo’).;
});
Una simple función que convierte a las celdas de una tabla de color rojo cuando se hace clic en ellos. Digamos que tienes una red con 10 columnas y 50 filas, sin embargo, que los 500 eventos consolidados. ¿No sería más limpio si pudiéramos colocar un solo evento a la mesa y cuando la tabla se hace clic en tener el trabajo de controlador de eventos a la celda que se ha hecho clic antes de volver a rojo?
Bueno, eso es exactamente lo que la delegación de eventos es y es fácil de implementar …
$ (‘# MyTable’). Haga clic en (función (e) {
var clic = $ (e.target);
clicked.css (‘fondo’, ‘rojo’);
});
«E» contiene información sobre el evento, incluyendo el elemento objetivo que realmente recibió el clic. Todo lo que tenemos que hacer es inspeccionar para ver la celda que se ha hecho clic en realidad. Mucho más limpio.
delegación de eventos tiene otra ventaja. Normalmente, cuando se enlaza un controlador a una colección de elementos que se apega a los elementos y los únicos elementos. Si se agregan nuevos elementos a la DOM, que habría tenido como contrapartida por el selector a continuación, no tienen el controlador de eventos vinculados a ellos (me estás siguiendo?), Entonces no pasará nada.
Cuando se utiliza la delegación de eventos que pueden añadir tantos elementos coincidentes con el DOM como quiera después de que el caso está vinculado y trabajan demasiado.
13. clases de uso para almacenar el estado
Esta es la forma más básica de almacenamiento de información sobre un bloque de HTML. jQuery es muy bueno para la manipulación de elementos basados en sus clases, así que si usted necesita almacenar información sobre el estado de un elemento, entonces por qué no añadir una clase extra para guardarlo?
He aquí un ejemplo. Queremos crear un menú en expansión. Al hacer clic en el botón que queremos que el panel slideDown () si es actualmente cerradas, o slideUp () si es abierto. Empezaremos con el código HTML
< div class="menuItem expanded">
< div class="button">
haga clic en mí
< div class="panel">
-
< li> Elemento de menú 1
< li> Elemento de menú 2
< li> Elemento de menú 3
Muy sencillo! Acabamos de agregar una clase extra para el div contenedor que no tiene otro propósito que no sea para decirnos el estado del tema. Así que todo lo que necesitamos es un controlador de eventos click que realiza slideUp () o slideDown () en el panel correspondiente cuando se pulsa el botón.
(“Botón.”) $. Click (function () {
. MenuItem var = $ (este) de los padres ();
panel var = menuItem.find (un grupo especial. ‘);
if (menuItem.hasClass (“ampliado”)) {
menuItem.removeClass (“ampliado”) addClass (‘colapso’).;
panel.slideUp ();
}
else if (menuItem.hasClass (“colapsado”)) {
menuItem.removeClass (‘colapso’) addClass (“ampliado”).;
panel.slideDown ();
}
});
Eso es un ejemplo muy simple, pero usted puede agregar clases adicionales para almacenar todo tipo de información acerca de un elemento o fragmento de HTML.
Sin embargo, en los casos más sencilla es probablemente mejor usar el siguiente consejo.
14. Mejor aún, los datos internos de uso de jQuery () para almacenar el estado
No es muy bien documentada por alguna razón, pero tiene una jQuery datos internos (), que se puede utilizar para almacenar información en pares de clave y valor en contra de cualquier elemento DOM. Almacenamiento de un conjunto de datos es tan simple como esto …
$ (‘# MyDiv’) de datos (‘CurrentState’, ‘off’).;
Podemos modificar el ejemplo de la extremidad anterior. Vamos a utilizar el mismo código HTML (con el “ampliado” la clase social) y utilizar la función data () en su lugar.
(“Botón.”) Haga clic en $ (function () {var menuItem = $ (este) de los padres ();.. Panel var = menuItem.find () de un grupo especial. “If (menuItem.data (‘colapso’)) {menuItem.data (‘colapso’, false); panel.slideDown ();} else {menuItem.data (‘colapso’, true); panel.slideUp ();}});
Estoy seguro de que estará de acuerdo en esto es mucho más limpio. Para obtener más información acerca de los datos () y removeData (), ver esta página …
jQuery internos
15. Escribe tu propia selectores
jQuery tiene un montón de construcción en los selectores de selección de elementos de identificación, clase, etiquetas, atributos y muchos más. Pero, ¿qué hace usted cuando tiene que seleccionar los elementos basados en otra cosa y jQuery no tiene un selector?
Bueno, una respuesta sería añadir clases a los elementos desde el principio y utilizar esos para seleccionarlos, pero resulta que no es difícil de ampliar jQuery para añadir nuevos selectores.
La mejor manera de demostrar es con un ejemplo.
$. Ampliar ($. [':'], Expr {
over100pixels: function (a) {
return $ (a) altura ()> 100.;
}
});
$ (‘Caja:. Over100pixels’). Click (function () {
alert (‘El elemento que se hace clic en más de 100 píxeles de alto);
});
El primer bloque de código crea un selector de costumbre que encuentra cualquier elemento que tiene más de 100 píxeles de alto. El segundo bloque sólo se utiliza para agregar un controlador de clic a todos los elementos.
No voy a entrar en más detalles aquí, pero usted puede imaginarse lo poderoso que es esto y si google de la búsqueda para “selector de jQuery costumbre” que encontrarás un montón de buenos ejemplos.
16. Racionalizar el código HTML y modificar una vez cargada la página
El título no podría hacer mucho sentido, pero este consejo puede potencialmente neaten su código, reducir el peso y el tiempo de descarga de la página y ayudar a su SEO. Tome el siguiente código HTML por ejemplo …
< div class="fieldOuter">
< div class="inner">
< div class="field"> Este es el campo número 1
< div class="errorBar">
< div class="icon"> 
< div class="message"> Este es un mensaje de error
< div class="fieldOuter">
< div class="inner">
< div class="field"> Este es el campo número 2
< div class="errorBar">
< div class="icon">
< div class="message"> Este es un mensaje de error
Eso es un ejemplo de cómo una forma puede ser marcado, ligeramente modificada con fines ilustrativos. Estoy seguro de que estará de acuerdo en que es bastante feo y si había una forma larga que acabaría con una página fea bastante largo. Es más agradable si pudieras poner esto en el código HTML.
< div class="field"> Este es el campo 1
< div class="field"> Este es el campo 2
< div class="field"> Este es el campo 3
< div class="field"> Este es el campo 4
< div class="field"> Este es el campo 5
Todo lo que tienes que hacer es un poco de manipulación de jQuery para añadir todas las feas HTML volver pulg Me gusta esto …
‘Campo’. $ (Document) listo (function () {$ () antes (‘class=”inner”> < div class="fieldOuter">‘);.. $ () Después de “campo”.. (‘ < div class="errorBar"> class=”icon”> < img src="icon.png" alt="icon" /> < div class="message"> < span> Este es un mensaje de error “);});
No siempre es aconsejable hacer esto, usted conseguirá un poco de un flash que se carga la página, pero en determinadas situaciones en las que se ha repetido un montón de HTML que puede realmente reducir su peso de página y los beneficios SEO de reducir todos los su margen de beneficio extraños repetidas debería ser obvio.
17. Perezoso contenido de la carga de las prestaciones de velocidad y SEO
Otra forma de acelerar su carga la página y neaten el HTML que las arañas de búsqueda se ve es a pedazos toda la carga perezosa de la misma mediante una solicitud AJAX después de que el resto de la página se ha cargado. El usuario puede obtener la navegación de inmediato y las arañas sólo ven el contenido que ellos quieren para su indexación.
Hemos utilizado esta técnica en nuestro propio sitio. Los botones de color púrpura en la parte superior de la caída de la página hacia abajo tres formas, direcciones y un mapa de Google, que se duplicaba el tamaño de nuestras páginas. Así pues, sólo hay que poner todo lo que HTML en una página estática y el uso de la carga () para cargarlo en el DOM, una vez estaba listo. Al igual que este …
‘Contenido / headerForms.html’ $ (‘# formas »). Carga (, function () {
/ / Código de aquí se ejecuta una vez el contenido se haya cargado
/ / Poner todos sus eventos, etc controladores de aquí.
});
Yo no usaría esta en todas partes. Usted tiene que considerar las compensaciones aquí. Estás haciendo peticiones adicionales para el servidor y las porciones de la página pueden no estar disponibles para el usuario de inmediato, pero se utiliza correctamente, puede ser una técnica de optimización grandes.
18. jQuery uso de funciones de utilidad
jQuery no es sólo acerca de los efectos de flash. El creador ha expuesto algunos métodos muy útiles que llenar algunas lagunas en el repertorio de JavaScript.
http://docs.jquery.com/Utilities
En particular, el apoyo a determinadas funciones de navegador matriz común es irregular (IE7 ni siquiera tiene un método indexOf ()!). JQuery tiene métodos para iterar, el filtrado, la clonación, la fusión y eliminación de duplicados a partir de matrices.
Otras funciones comunes que son difíciles de conseguir en Javascript incluyen el elemento seleccionado en una lista desplegable. En la llanura de edad JavaScript usted tendría que obtener el elemento
. $ (‘# SelectList’) val ();
Vale la pena pasar algún tiempo mirando a través de la documentación de jQuery en el sitio principal y que tiene una nariz en torno a algunas de las funciones menos conocidas.
19. Utilice noconflict cambiar el nombre del objeto jQuery utilizando otros marcos
La mayoría de los marcos Javascript hacer uso de los $ símbolo como una forma rápida y esto puede causar conflictos al tratar de utilizar más de un marco en la misma página. Por suerte hay una solución simple. El. Noconflict () la función da el control de los $ espalda y le permite establecer su propio nombre de la variable, así …
var $ j = jQuery.noConflict ();
J $ (‘# myDiv’) ocultar ().;
20. Cómo saber cuando las imágenes se hayan cargado
Este es otro de los problemas que no parecen estar tan bien documentados como debe ser (no cuando me puse a buscar de todos modos) y es un requisito muy común en la construcción de galerías de fotos, cintas, etc, pero es bastante fácil.
Todo lo que tienes que hacer es usar el. Método load () de un elemento IMG y poner una función de devolución de llamada en el mismo. En el ejemplo siguiente se cambia el atributo “src” de una etiqueta de imagen para cargar una nueva imagen y atribuye una función de carga sencilla.
$ (‘# MyImage’). Attr (‘src’, ‘imagen.jpg’). Carga (function () {
alert (‘Imagen Cargado’);
});
Debes encontrar que la alerta se llama tan pronto como se carga la imagen.
21. Utilice siempre la versión más reciente
jQuery está mejorando constantemente y John Resig, su creador, siempre parece estar en busca de maneras de mejorar el rendimiento.
jQuery es actualmente la versión 1.2.6, pero John ya ha revelado que está trabajando en un motor nuevo selector llamado Arden , que aparentemente pueden mejorar la velocidad de selector en Firefox hasta 4x. Por lo tanto, vale la pena estar al día.
22. Cómo comprobar si existe un elemento
No es necesario comprobar si existe un elemento en la página antes de manipular porque jQuery que simplemente no hará nada si intenta seleccionar algo y no es en el DOM. Pero cuando usted tiene que comprobar si algo ha sido seleccionado, o cuántos artículos han sido seleccionados puede utilizar la propiedad length.
si myDiv ($(‘#). longitud) {
/ / El código
}
Simple, pero obvio no.
23. Agregue una clase JS a su atributo HTML
Me enteré de este consejo de Karl Swedberg cuyos excelentes libros que utilizan para aprender jQuery.
Recientemente ha dejado un comentario sobre uno de mis artículos anteriores sobre esta técnica y las bases son las siguientes …
En primer lugar, tan pronto como jQuery se ha cargado lo usa para agregar una “JS” clase para la etiqueta HTML.
$ (‘HTML’) addClass (‘JS’).;
Debido a que sólo ocurre cuando se habilita Javascript se puede utilizar para agregar estilos CSS que sólo funciona si el usuario tiene JavaScript activado, así …
. MyDiv JS # {display: none;}
Por lo tanto, lo que esto significa es que podemos ocultar el contenido cuando JavaScript está encendido y luego usar jQuery para mostrar el resultado cuando sea necesario (por ejemplo, por el colapso de algunos paneles y la ampliación cuando el usuario hace clic en ellos), mientras que los de JavaScript (y de la búsqueda arañas de los motores) ver todos los contenidos, ya que no se esconde. Voy a utilizar esta mucho en el futuro.
Para leer el artículo completo haga clic aquí .
24. Volver ‘falsa’ para evitar el comportamiento por defecto
Esto debería ser obvia, pero tal vez no. si usted tiene el hábito de hacer esto …
… y luego conectar un controlador de eventos como este …
. $ (‘Popup’), haga clic en (function () {/ / Lanzamiento código popup});
… probablemente va a funcionar bien hasta que lo utilice en una página de largo, y en ese momento te darás cuenta de que el # que está causando a saltar a la parte superior de la página cuando el evento click se dispara.
Todo lo que tienes que hacer para evitar este comportamiento por defecto, o cualquier comportamiento por defecto en cualquier controlador de eventos es añadir “return false;” al controlador, así …
$ (‘Popup’). Click (function () {
/ / Lanzamiento código emergente
return false;
});
25. Atajo para el evento ready
Un pequeño consejo este, pero usted puede ahorrar unos cuantos caracteres utilizando la abreviatura del $ (document). Función de listo.
En lugar de esto …
$ (Document). Ready (function () {
/ / El código
});
Usted puede hacer esto …
$ (Function () {
/ / El código
});
Popularity: 2% [?]
