Share
Si hay uno malo Lo que pasa con jQuery, es que el nivel de entrada es tan sorprendentemente bajo, que tiende a atraer a aquellos que no tienen conocimientos de JavaScript. Ahora, por un lado, esto es fantástico. Sin embargo, por otro lado, también da como resultado un poco de código francamente repugnante (¡algunos de los cuales escribí yo mismo!).
Pero eso está bien; El código terriblemente pobre que incluso haría que su abuela se quedara sin aliento es un rito de paso. La clave es escalar la colina, y eso es lo que discutiremos en el tutorial de hoy..
Es importante recordar que la mayoría de los métodos devolverán el objeto jQuery. Esto es extremadamente útil y permite la funcionalidad de encadenamiento que usamos tan a menudo..
Accentsconagua
$ someDiv .attr ('class', 'someClass') .hide () .html ('new stuff'); Sabiendo que el objeto jQuery siempre se devuelve, podemos usar esto para eliminar el código superfluo a veces. Por ejemplo, considere el siguiente código:
var someDiv = $ ('# someDiv'); someDiv.hide (); La razón por la que "cacheamos" la ubicación de la
someDivelemento es limitar el número de veces que tenemos que atravesar el DOM para este elemento a una vez.
El código de arriba está perfectamente bien; sin embargo, usted podría combinar las dos líneas en una sola, mientras logra el mismo resultado.
var someDiv = $ ('# someDiv'). hide (); De esta manera, todavía escondemos la someDiv elemento, pero el método también, como hemos aprendido, devuelve el objeto jQuery, al que luego se hace referencia a través de someDiv variable.
Siempre que sus selectores no sean ridículamente pobres, jQuery hace un trabajo fantástico para optimizarlos lo mejor posible y, por lo general, no necesita preocuparse demasiado por ellos. Sin embargo, dicho esto, hay algunas mejoras que puede hacer que mejorarán ligeramente el rendimiento de su script..
Una de esas soluciones es usar el encontrar() Método, cuando sea posible. La clave está lejos de obligar a jQuery a usar su motor Sizzle, si no es necesario. Ciertamente, habrá momentos en que esto no sea posible, y eso está bien; Pero, si no necesita la sobrecarga adicional, no vaya a buscarlo.
// Bien en los navegadores modernos, aunque Sizzle comienza a "ejecutar" $ ('# someDiv p.someClass'). Hide (); // Mejor para todos los navegadores, y Sizzle nunca lo tiene. $ ('# someDiv'). find ('p.someClass'). hide (); Los últimos navegadores modernos tienen soporte para
QuerySelectorAll, que le permite pasar selectores tipo CSS, sin la necesidad de jQuery. jQuery verifica esta función también.
Sin embargo, los navegadores más antiguos, es decir, IE6 / IE7, comprensiblemente no proporcionan soporte. Lo que esto significa es que estos selectores más complicados activan el motor Sizzle completo de jQuery, que, aunque brillante, viene acompañado de un poco más de sobrecarga..
El chisporroteo es una masa brillante de código que nunca podré entender. Sin embargo, en una oración, primero toma su selector y lo convierte en una "matriz" compuesta por cada componente de su selector.
// Una idea aproximada de cómo funciona ['#someDiv,' p '];
Luego, de derecha a izquierda, comienza a descifrar cada elemento con expresiones regulares. Lo que esto también significa es que la parte más a la derecha de su selector debe ser lo más específica posible, por ejemplo, una carné de identidad o nombre de etiqueta.
Línea inferior, cuando sea posible:
encontrar() método. De esta manera, en lugar de usar Sizzle, podemos continuar usando las funciones nativas del navegador. También es posible agregar un contexto a sus selectores, como:
$ ('. someElements', '#someContainer'). hide (); Este código dirige a jQuery para envolver una colección de todos los elementos con una clase de algunos elementos -- que son hijos de someContainer -- dentro de jQuery. El uso de un contexto es una forma útil de limitar el recorrido de DOM, sin embargo, entre bambalinas, jQuery usa el encontrar método en su lugar.
$ ('# someContainer') .find ('. someElements') .hide (); // HANDLE: $ (expr, context) // (que es equivalente a: $ (context) .find (expr) else return jQuery (context) .find (selector);
$ (esto) Sin conocer las diversas propiedades y funciones de DOM, puede ser fácil abuso El objeto jQuery innecesariamente. Por ejemplo:
$ ('# someAnchor'). click (function () // Bleh alert ($ (this) .attr ('id'));); Si nuestra única necesidad del objeto jQuery es acceder a las etiquetas de anclaje carné de identidad Atributo, esto es un desperdicio. Mejor seguir con JavaScript "crudo".
$ ('# someAnchor'). click (function () alert (this.id);); Tenga en cuenta que hay tres atributos a los que siempre se debe acceder, a través de jQuery: "src", "href" y "style". Estos atributos requieren el uso de
getAttributeen versiones anteriores de IE.
// jQuery Source var rspecialurl = / href | src | style /; //… var special = rspecialurl.test (nombre); //… var attr =! JQuery.support.hrefNormalized && notxml && special? // Algunos atributos requieren una llamada especial en IE elem.getAttribute (name, 2): elem.getAttribute (name);
Aún peor es el proceso de consultar repetidamente el DOM y crear múltiples objetos jQuery.
$ ('# elem'). hide (); $ ('# elem'). html ('bla'); $ ('# elem'). otherStuff (); Con suerte, ya eres consciente de lo ineficiente que es este código. Si no, está bien; todos estamos aprendiendo La respuesta es implementar el encadenamiento o "almacenar en caché" la ubicación de #elem.
// Esto funciona mejor $ ('# elem') .hide () .html ('bla') .otherStuff (); // O esto, si lo prefieres por alguna razón. var elem = $ ('# elem'); elem.hide (); elem.html ('bla'); elem.otherStuff (); Listo Método Escuchar cuando el documento está listo para ser manipulado es ridículamente simple con jQuery.
$ (documento) .ready (función () // levantémonos en heeya);
Sin embargo, es muy posible que haya encontrado una función de envoltura diferente y más confusa..
$ (function () // levantémonos en heeya);
Aunque este último es un poco menos legible, los dos fragmentos de arriba son idénticos. No me crees Solo revisa la fuente de jQuery.
// HANDLE: $ (function) // Acceso directo para el documento listo si (jQuery.isFunction (selector)) return rootjQuery.ready (selector);
rootjQuery Es simplemente una referencia a la raíz. jQuery (documento). Cuando pase un selector a la función jQuery, determinará qué tipo de selector pasó: cadena, etiqueta, id, función, etc. Si se pasó una función, jQuery llamará a su Listo() Método, y pasar su función anónima como el selector.
Si se está desarrollando un código para la distribución, siempre es importante compensar cualquier posible conflicto de nombres. ¿Qué pasaría si algún script, importado después del tuyo, también tuviera un PS ¿función? Cosas malas!
La respuesta es llamar a jQuery no conflicto(), o para almacenar su código dentro de una función anónima de auto-invocación, y luego pasarle jQuery.
var j = jQuery.noConflict (); // Ahora, en lugar de $, usamos j. j ('# someDiv'). hide (); // La siguiente línea hará referencia a la función $ de otra biblioteca. $ ('someDiv'). style.display = 'none'; Tenga cuidado con este método e intente no usarlo cuando distribuya su código. ¡Realmente confundiría al usuario de su script! :)
(function ($) // Dentro de esta función, $ siempre se referirá a jQuery) (jQuery);
Los parentes finales en la parte inferior llaman a la función automáticamente - función()(). Sin embargo, cuando llamamos a la función, también pasamos jQuery, que luego está representada por PS.
Listo Método jQuery (documento) .ready (función ($) // $ se refiere a jQuery); // $ es indefinido o se refiere a alguna otra función de la biblioteca.
Recuerda - jQuery es solo JavaScript. No asuma que tiene la capacidad de compensar su mala codificación. :)
Esto significa que, al igual que debemos optimizar cosas como JavaScript. para declaraciones, lo mismo es cierto para jQuery cada método. ¿Y por qué no lo haríamos? Es solo un método auxiliar, que luego crea un para declaración detrás de las escenas.
// jQuery cada fuente de cada método: función (objeto, devolución de llamada, argumentos) nombre var, i = 0, longitud = object.length, isObj = length === undefined || jQuery.isFunction (objeto); if (args) if (isObj) for (nombre en objeto) if (callback.apply (objeto [nombre], args) === falso) interrupción; else for (; i < length; ) if ( callback.apply( object[ i++ ], args ) === false ) break; // A special, fast, case for the most common use of each else if ( isObj ) for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ) return object;
someDivs.each (function () $ ('# anotherDiv') [0] .innerHTML + = $ (this) .text ();); otroDiv para cada iteración var someDivs = $ ('# container'). find ('. someDivs'), contents = []; someDivs.each (function () contents.push (this.innerHTML);); $ ('# anotherDiv'). html (contents.join (")); De esta manera, dentro de la cada (para) método, la única tarea que estamos realizando es agregar una nueva clave a una matriz ... en lugar de consultar el DOM, agarrando el internalHTML Propiedad del elemento dos veces, etc..
Este consejo está más basado en JavaScript en general, en lugar de jQuery. El punto es recordar que jQuery no compensa la codificación deficiente.
Mientras estamos en ello, otra opción para este tipo de situaciones es usar fragmentos de documentos.
var someUls = $ ('# container'). find ('. someUls'), frag = document.createDocumentFragment (), li; someUls.each (function () li = document.createElement ('li'); li.appendChild (document.createTextNode (this.innerHTML)); frag.appendChild (li);); $ ('# anotherUl') [0] .appendChild (frag); La clave aquí es que hay varias formas de realizar tareas simples como esta, y cada una tiene sus propios beneficios de rendimiento de un navegador a otro. Cuanto más se adhiera a jQuery y aprenda sobre JavaScript, también podría encontrar que se refiere a las propiedades y métodos nativos de JavaScript con más frecuencia. Y, si es así, eso es fantástico.!
jQuery proporciona un sorprendente nivel de abstracción del que deberías aprovechar, pero esto no significa que estés obligado a usar sus métodos. Por ejemplo, en el ejemplo de fragmento anterior, usamos jQuery's cada método. Si prefieres usar un para o mientras declaración en su lugar, eso está bien también!
Con todo lo dicho, tenga en cuenta que el equipo de jQuery ha optimizado en gran medida esta biblioteca. Los debates sobre jQuery.
cada()vs. el nativoparaLas afirmaciones son tontas y triviales. Si está utilizando jQuery en su proyecto, ahorre tiempo y utilice sus métodos de ayuda. ¡Para eso están ellos! :)
Si recién está comenzando a profundizar en jQuery, los diversos métodos AJAX que pone a nuestra disposición pueden parecer un poco desalentadores; aunque ellos no necesitan De hecho, la mayoría de ellos son simplemente métodos de ayuda, que se dirigen directamente a $ .ajax.
Como ejemplo, revisemos getJSON, lo que nos permite buscar a JSON.
$ .getJSON ('path / to / json', function (results) // callback // results contiene el objeto de datos devuelto); Detrás de escena, este método llama primero. $ .get.
getJSON: function (url, data, callback) return jQuery.get (url, data, callback, "json");
$ .get luego compila los datos pasados y, nuevamente, llama al "maestro" (de tipo) $ .ajax método.
obtener: función (url, datos, devolución de llamada, tipo) // desplazar los argumentos si se omitió el argumento de los datos si (jQuery.isFunction (datos)) tipo = tipo || llamar de vuelta; devolución de llamada = datos; datos = nulo; devolver jQuery.ajax (type: "GET", url: url, data: data, success: callback, dataType: type);
Finalmente, $ .ajax realiza una gran cantidad de trabajo para permitirnos realizar solicitudes asíncronas con éxito en todos los navegadores!
Lo que esto significa es que puedes usar el mismo
$ .ajaxMétodo directo y exclusivo para todas sus solicitudes AJAX. Los otros métodos son simplemente métodos de ayuda que terminan haciendo esto de todos modos. Así que, si quieres, corta al hombre medio. No es un problema significativo de ninguna manera.
$ .getJSON ('path / to / json', function (results) // callback // results contiene el objeto de datos devuelto); $ .ajax (type: 'GET', url: 'path / to / json', data: yourData, dataType: 'json', success: function (results) console.log ('success');) ); Así que ha aprendido un poco de JavaScript y ha aprendido que, por ejemplo, en las etiquetas de anclaje, puede acceder directamente a los valores de los atributos:
var anchor = document.getElementById ('someAnchor'); //anchor.id // anchor.href // anchor.title // .etc El único problema es que esto no parece funcionar cuando hace referencia a los elementos DOM con jQuery, ¿verdad? Pues claro que no.
// Falla var id = $ ('# someAnchor'). Id; Por lo tanto, si necesita acceder a la href atributo (o cualquier otra propiedad o método nativo para el caso), tiene un puñado de opciones.
// OPCIÓN 1 - Usa jQuery var id = $ ('# someAnchor'). Attr ('id'); // OPCIÓN 2 - Acceda al elemento DOM id id = $ ('# someAnchor') [0] .id; // OPCIÓN 3 - Usa el método get de jQuery var id = $ ('# someAnchor'). Get (0) .id; // OPCIÓN 3b - No pase un índice para obtener anchorsArray = $ ('. SomeAnchors'). Get (); var thirdId = anchorsArray [2] .id; los
obtenerEl método es particularmente útil, ya que puede traducir su colección jQuery en una matriz.
Ciertamente, para la gran mayoría de nuestros proyectos, no podemos solamente Confíe en JavaScript para cosas como la validación, o solicitudes AJAX. ¿Qué sucede cuando se desactiva JavaScript? Por esta misma razón, una técnica común es detectar si se ha realizado una solicitud AJAX con el idioma de servidor que elija..
jQuery hace esto ridículamente simple, al establecer un encabezado dentro de $ .ajax método.
// Establezca el encabezado para que el script llamado sepa que se trata de un XMLHttpRequest // Solo envíe el encabezado si no es un XHR remoto si (!
Con este conjunto de encabezados, ahora podemos usar PHP (o cualquier otro idioma) para verificar este encabezado y proceder en consecuencia. Para ello, comprobamos el valor de $ _SERVER ['HTTP_X_REQUESTED_WITH'].
function isXhr () return $ _SERVER ['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
¿Alguna vez te preguntaste por qué / cómo puedes usarlo? jQuery y PS indistintamente Para encontrar su respuesta, vea la fuente de jQuery y desplácese hasta el final. Ahí verás:
window.jQuery = window. $ = jQuery;
La secuencia de comandos jQuery completa está, por supuesto, envuelta dentro de una función de ejecución automática, que permite que la secuencia de comandos limite el número de variables globales tanto como sea posible. Sin embargo, lo que esto significa también es que el objeto jQuery no está disponible fuera de la función anónima de ajuste.
Para solucionar esto, jQuery está expuesta a lo global. ventana objeto, y, en el proceso, un alias - PS - también se crea.
HTML5 Boilerplate ofrece un ingenioso de una sola línea que cargará una copia local de jQuery si, por alguna extraña razón, su CDN elegido está caído.
Para "expresar" el código anterior: si window.jQuery no está definido, debe haber habido un problema al descargar el script desde el CDN. En ese caso, proceda al lado derecho de la && operador, e inserte un script que enlace a una versión local de jQuery.
Miembros Premium: descargue este video (debe estar conectado)
Suscríbete a nuestra página de YouTube para ver todos los videos tutoriales.!
Nota:
jQuery.expr [':']es simplemente un alias parajQuery.expr.filters.
A partir de jQuery 1.4, ahora podemos pasar una sola función a la flotar método. Antes, tanto el en y afuera se requerían métodos.
$ ('# someElement'). hover (function () // mouseover, function () // mouseout); $ ('# someElement'). hover (function () // el método toggle () se puede usar aquí, si corresponde); Tenga en cuenta que esto no es un trato antiguo vs. nuevo. Muchas veces, todavía necesitarás pasar dos funciones a flotar, y eso es perfectamente aceptable. Sin embargo, si solo necesitas alternar algún elemento (o algo así), pasar una única función anónima guardará un puñado de caracteres más o menos!
A partir de jQuery 1.4, ahora podemos pasar un objeto como segundo parámetro de la función jQuery. Esto es útil cuando necesitamos insertar nuevos elementos en el DOM. Por ejemplo:
$ ('') .attr (id: 'someId', className: 'someClass', href: 'somePath.html'); $ ('', id: 'someId', className: 'someClass', href: 'somePath.html'); Esto no solo ahorra algunos caracteres, sino que también hace que el código sea más limpio. Además de los atributos de elementos, incluso podemos pasar atributos y eventos específicos de jQuery, como hacer clic o texto.
