El misterio del objeto jQuery: una introducción básica

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • Accesibilidad para diseñadores, con Stéphanie Walter

  • Índice
    1. Qué es $?
      1. Conclusión clave
    2. El punto
      1. Puntos clave
    3. Funciones anónimas
      1. Conclusión clave
    4. Encadenamiento de métodos
      1. Conclusión clave
    5. El objeto jQuery
      1. Conclusión clave
    6. Poniendolo todo junto
    7. Dolores de cabeza provocados por eventos
    8. Conclusión
      1. Otras lecturas

    En este artículo, Paul Tero cubrirá los conceptos clave que subyacen al objeto JQuery. Esta es una guía para principiantes sobre la sintaxis de JavaScript y cómo la utiliza jQuery, que es simplemente una biblioteca de JavaScript que tiene una función de aspecto especial, $, y que fomenta el uso de objetos abreviados, funciones anónimas y encadenamiento de métodos. Después de leer esto, podrás mirar una pieza compleja de jQuery directamente a la cara sin dudas ni incertidumbres en tu mente. Sabrás lo que hace.

     

    ¿Alguna vez te has topado con un fragmento de JavaScript similar $(".cta").click(function(){})y has pensado: “¿Qué es eso $('#x')? Si te parece un galimatías, sigue leyendo. Si cree que ese fragmento de código no podría ser real, busque algunos ejemplos de jQuery . Están llenos de tales construcciones.

    Este artículo cubre los conceptos clave que subyacen a fragmentos de código tan intimidantes, pero comenzaremos con un ejemplo más largo, basado en un ejemplo simple de animación de un cuadrado. Probablemente no sea necesario que haga esto todos los días, pero constituye una demostración concisa y ordenada:

     

    $(document).ready(function(){ $("button").click(function(){ $("div").animate({height:"toggle"}).append("hi"); });});

    Revisaremos cada palabra y característica del código anterior, junto con una mirada detallada a las funciones de JavaScript, el objeto jQuery y la programación basada en eventos . Al final, es de esperar que ya no te sientas ansioso ante un código tan inescrutable.

    Qué es $?

    A primera vista, $parece una funcionalidad JavaScript especial y compleja. Que no es. El símbolo del dólar no tiene un significado especial en JavaScript. De hecho, $es sólo una función. Es un nombre alternativo para la jQueryfunción .

    Y la jQueryfunción es la razón de ser de la muy popular biblioteca jQuery . jQuery es una biblioteca de JavaScript compacta que elimina muchas de las molestas diferencias entre los fabricantes de navegadores y proporciona muchas funciones útiles para manipular y animar partes de páginas web. Puede incluir la jQueryfunción (es decir $, ) en su página haciendo referencia a una copia de la biblioteca:

    script src="https://code.jquery.com/jquery-1.11.1.min.js"/script

    Alternativamente, puedes descargar tu propia copia desde el sitio web de jQuery :

    Descargar jQuery es muy fácil.

    La jQueryfunción normalmente toma un único argumento, ya sea un selector o una referencia de JavaScript a algo en la página, como document.

    Un selector es solo una parte de CSS, la parte anterior al archivo {…}. Por lo tanto, $("div")es igual jQuery("div")y se comporta de manera muy similar al siguiente CSS al seleccionar todas las lt;divgt;etiquetas en la página actual:

    style div {…}/style

    Al comienzo de nuestro ejemplo, $(document)pasa la variable JavaScript documenta la jQueryfunción. La documentvariable la establece automáticamente el navegador. Se refiere a la parte superior del modelo de objetos de documento (DOM). El DOM es el análisis propio del navegador de todo el HTML de la página, sobre el cual se construye la funcionalidad de jQuery. Por ejemplo, jQuery $("div")hace más o menos lo mismo que document.getElementsByTagName("div").

    Conclusión clave

    Recuerde que $es sólo una función, un nombre alternativo y más práctico para la jQueryfunción.

    El punto

    Lo .que viene después $(document)significa una gran cantidad de funcionalidades. El punto se utiliza con objetos JavaScript. En su forma más simple, un objeto JavaScript es una colección de propiedades. Por ejemplo:

     

    var digger = new Object();digger.species = "gerbil";digger.name = "Digger";digger.color = "white";
    La inspiración para este objeto JavaScript.

    En este ejemplo, la variable diggeres un objeto y le hemos asignado tres subvariables species: namey color. En la jerga orientada a objetos, estas se conocen como variables miembro . Todo lo anterior se puede escribir de manera más concisa así:

    var digger = {species:"gerbil", name:"Digger", color:"white"};

    También puedes asignar funciones como propiedades de un objeto. Los jerbos son generalmente roedores muy silenciosos, pero ocasionalmente emiten una especie de ruido agudo. En JavaScript, podría verse así:

    function meepMeep(){ alert("meep meep");}

    En JavaScript, los límites entre variables, funciones y objetos son bastante borrosos. Entonces, una función se puede asignar fácilmente a una variable (miembro):

    digger.speak = meepMeep;

    Ahora puedes llamar a esta función para hacer hablar al jerbo:

    digger.speak();

    En lenguaje orientado a objetos, esto ahora es una función miembro o un método . Los métodos pueden hacer referencia a otros métodos y variables miembro dentro del mismo objeto. Imaginemos que Digger ha aprendido a hablar inglés, lo cual es bastante notable para un jerbo:

    function myNameIs(){ alert("Meep! I am a " + this.species);}//assign the functiondigger.sayMyName = myNameIs;//call the functiondigger.sayMyName();

    En la myNameIsfunción, la variable especial thisse refiere al objeto que la contiene, y this.specieses igual digger.speciesy tiene el valor gerbil. Si intentara llamarlo myNameIs()solo, sin el objeto, entonces thisse referiría al windowobjeto JavaScript y this.speciessería window.species, que no está definido. La página alertaría “¡Meep! Soy un indefinido”.

    Los objetos también se pueden utilizar como valores de retorno para funciones. Esta es una buena función que uso todo el tiempo:

    function giveMeTheGerbil(){ return digger;}

    Esto devolverá una referencia a la variable u objeto (global) digger, que luego podrá tratar exactamente de la misma manera que el original digger:

    var digger2 = giveMeTheGerbil();//alerts "Meep! I am a gerbil"digger2.sayMyName();

    Sin embargo, puede omitir la variable intermediaria y simplemente llamar sayMyNamedirectamente al valor devuelto de giveMeTheGerbil:

    giveMeTheGerbil().sayMyName();

    Sin el código interno, esta es la misma estructura programática que en la primera línea de nuestro ejemplo original:

    $(document).ready(…);

    La siguiente sección describe lo que readyrealmente hace.

    Puntos clave

    La notación abreviada de objetos se parece a {name:"Digger", species:"gerbil"}.

     

    La palabra clave thisse utiliza en una función adjunta a un objeto (un método) y se refiere al objeto que la contiene.

    Funciones anónimas

    En JavaScript, hay varias formas de crear funciones. La siguiente es la forma clásica (una declaración de función ), que debería resultarle familiar a cualquiera que haya realizado algo de programación:

    function meepMeep(){ alert("meep meep");}

    Hemos visto anteriormente que las funciones se pueden asignar a variables. Creamos la meepMeepfunción y la asignamos a digger.speak. De hecho, las funciones pueden crearse de forma anónima (llamada expresión de función), sin ningún nombre, y luego asignarse a una variable:

    var meepMeep = function(){ alert("meep meep");};

    En JavaScript, las funciones se pueden asignar a variables y transmitirse como cualquier otra variable. Considere esta función bastante inútil:

    function runMe(f){ f();}

    Tiene un argumento, llamado f. runMetrata ese argumento como una función y lo ejecuta. Entonces, podrías llamar a esto:

    runMe(meepMeep);

    Esto simplemente ejecutaría la meepMeepfunción. Se vuelve más interesante cuando ni siquiera te molestas en nombrar oficialmente meepMeepningún nombre. Simplemente puede crearlo cuando sea necesario y pasarlo inmediatamente a runMe:

    runMe(function(){ alert("meep meep");});

    De hecho, meepMeeppuede aparecer en cualquier lugar, al igual que su equivalente anónimo. Toma esto:

    meepMeep();

    En lugar de eso, podrías poner una función anónima en lugar de meepMeep, aunque es necesario incluirla entre paréntesis adicionales:

    (function(){ alert("meep meep");})();
    Este es el resultado de todas las formas anteriores de llamar a `meepMeep()`.

    Esta técnica se utiliza a menudo para proporcionar un alcance variable en JavaScript. ¿Puedes seguir lo que hará este código?

    var x=3;(function(){ var x=4; console.log("x is " + x);})();console.log ("x is " + x);

    La varpalabra clave dentro de la función es importante aquí. Declara una variable dentro de una función. La función anónima aquí define su propia variable local, xle asigna el valor 4y luego lo genera. Debido a la varpalabra clave, la función xpermanece completamente separada de la var x=3de la línea anterior. Por lo tanto, este código generará x is 4y luego x is 3.

    Debido a que nuestro jerbo ya no emite ningún chirrido agudo, el código anterior utiliza a href="https://developer.mozilla.org/en-US/docs/Web/API/console.log"console.log/a, en lugar de alert, para generar su resultado. Está console.logdisponible en los navegadores modernos (en otras palabras, no en los antiguos Internet Explorer) y muestra su resultado discretamente en la consola de errores, web o JavaScript del navegador .

    Las funciones anónimas son la siguiente pieza del rompecabezas. El método de jQuery a href="https://api.jquery.com/ready/"ready/aes como una versión retardada de la runMefunción anterior. El readymétodo espera hasta que el DOM se haya cargado por completo y luego ejecuta la función proporcionada. Entonces, cuando documentfinalmente sea ready, se ejecutará la siguiente función anónima: HERRETE | Descúbre su verdadero significado

     

    function(){ $("button").click (…)}

    Es $(document).ready(…)una forma común para que los programadores ejecuten JavaScript solo después de que se haya procesado todo el documento HTML.

    Conclusión clave

    Las funciones anónimas son funciones sin nombre, como function(){alert(1);}. Se pueden asignar a variables, pasar a otras funciones o ejecutarse inmediatamente para proporcionar alcance.

    Encadenamiento de métodos

    Antes de profundizar más en el código de muestra, debemos revisar un concepto más que ocurre a menudo en JavaScript. El encadenamiento de métodos se refiere a ejecutar varias funciones seguidas. En realidad, esto es solo una extensión del giveMeTheGerbil()ejemplo anterior:

    giveMeTheGerbil().sayMyName();

    Redefinamos las funciones relacionadas con jerbos para que devuelvan una referencia a sí mismas.

    digger.speak = function(){ alert("meep meep"); return this;}digger.sayMyName = function(){ alert("Meep! I am a " + this.species); return this;}

    Estas dos funciones ahora hacen algo diggery luego regresan digger. No es muy diferente, pero la adición nos permite encadenar las funciones:

    giveMeTheGerbil().speak().sayMyName().speak();

    Esta línea de código se ejecutará primero giveMeTheGerbily devolverá una referencia al diggerobjeto. Ahora, esencialmente se vuelve equivalente a esto:

    digger.speak().sayMyName().speak();

    A continuación, el speakmétodo del diggerobjeto se ejecuta y alerta meep meep. Esto también devuelve una referencia a diggery luego el código se convierte en este:

    digger.sayMyName().speak();

    Después de eso, sayMyNamese ejecuta y nuevamente devuelve una referencia a digger, etc. Provocará tres alertas: meep meep, Meep! I am a gerbil, meep meep.

    Este tipo de encadenamiento ocurre a menudo en JavaScript. Es posible que lo veas con a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"string/aobjetos:

    var s = "I have a dagger."; console.log(s.substring(9, 15).replace("a", "i").toUpperCase());

    El código anterior comienza con la cadena completa s, extrae una subcadena, reemplaza la letra "a" con "i", cambia la palabra resultante a mayúscula y devuelve la cadena resultante, que se muestra en el registro de la consola.

    Por supuesto, el encadenamiento ocurre en todas partes en jQuery y aparece en nuestro ejemplo:

    $("div").animate({height:"toggle"}).append("hi");

    Busca $("div")todos lt;divgt;los elementos de la página y los devuelve como parte de un objeto jQuery. Ejecuta el animatemétodo en el objeto jQuery y luego ejecuta append, cada vez que regresa y opera en un objeto jQuery.

     

    Estas cadenas pueden alargarse. A continuación se muestra una cadena jQuery particularmente larga , publicada con orgullo hace varios años:

    Una cadena jQuery muy larga.

    En términos generales, cadenas largas como ésta son difíciles de depurar y mantener. Por lo tanto, evitar los muy largos suele ser una buena idea, pero pueden resultar útiles en miniatura.

    Conclusión clave

    Las funciones que pertenecen a objetos (es decir, métodos) que devuelven referencias a sí mismos pueden encadenarse, lo que le permite ejecutar una gran cantidad de código sin almacenar los resultados intermedios.

    El objeto jQuery

    Nuestro ejemplo utiliza varios métodos jQuery : ready, clicky animate. appendTodas estas son funciones adjuntas al objeto jQuery, similares a how speaky myNameIsson funciones adjuntas al diggerobjeto y how substr, replacey toUpperCasevan con cadenas.

    Todas estas funciones son métodos del objeto jQuery y todas devuelven un objeto jQuery. Internamente, sin embargo, el objeto jQuery es mucho más sofisticado de diggerlo que stringpodría esperar ser.

    Como se mencionó anteriormente, las barreras entre conceptos pueden volverse borrosas en JavaScript. El objeto jQuery se comporta como un objeto y una matriz. Lo tratas como un objeto cuando lo encadenas, pero también puedes tratarlo como una matriz:

    var mydivs = $("div");for (var i = 0; i mydivs.length; i++) {console.log(mydivs[i].innerHTML);}

    En este ejemplo, $("div")busca todos lt;divgt;los elementos de la página y almacena el objeto jQuery resultante en la mydivsvariable. El código recorre el objeto jQuery como si fuera una matriz de nodos (en realidad, un a href="https://developer.mozilla.org/en-US/docs/Web/API/NodeList"NodeList/a) en el DOM. Estos nodos también son objetos con propiedades propias, como outerHTMLy innerHTML.

    htmlTambién es posible lograr el mismo resultado convirtiendo estos nodos nuevamente en objetos jQuery y luego llamando al método jQuery . Para hacer esto, páselos a $, lo que convierte prácticamente cualquier cosa en un objeto jQuery:

    var mydivs = $("div");for (var i = 0; i mydivs.length; i++) {console.log($(mydivs[i]).html());}

    Ambos generarán el contenido HTML de cada uno lt;divgt;en la página.

    Tenga en cuenta que cuando ejecuta una parte de jQuery como $("div").animate(…).append(…);, la animación se produce en todos los lt;divgt;elementos del objeto jQuery y todos se pasan a la siguiente función de la cadena como parte del objeto jQuery. (Esto es cierto para la mayoría de las funciones de jQuery, pero no para todas. Consulte la documentación de jQuery ).

    Conclusión clave

    A la función jQuery $y a muchos de los métodos jQuery les gusta clicky animatedevuelven un objeto jQuery, que es en parte objeto y en parte matriz. La parte similar a una matriz contiene referencias a nodos en el DOM.

     

    Poniendolo todo junto

    Ahora podemos ver el ejemplo en su conjunto. Devuelve $(document)un objeto jQuery que hace referencia a la página misma. Se .ready(…)pasa una función que se ejecuta cuando la página ha terminado de analizarse y el DOM está completamente disponible:

    function(){ $("button").click(…);}

    Esta función utiliza la jQueryfunción principal para buscar todos lt;buttongt;los elementos de la página. Devuelve un objeto jQuery que tiene un clickmétodo. Al clickmétodo se le pasa otra función anónima:

    function(){ $("div").animate ({height:"toggle"}).append("hi");}

    Esta función busca todos lt;divgt;los elementos, devuelve un objeto jQuery y primero llama a su animatemétodo. El argumento del animatemétodo de jQuery es una lista de propiedades para animar, pasadas como objeto abreviado {height:"toggle"}. Esto le dice a jQuery que alterne la altura de todos los lt;divgt;elementos de la página. La primera vez reducirá sus alturas a cero. La próxima vez, los animará a recuperar sus alturas originales.

    El animatemétodo también devuelve un objeto jQuery. Esto está encadenado al appendmétodo que agrega la cadena "hola" cada lt;divgt;vez que se presiona el botón. Pegue esto en una página HTML o visualícelo en JS Bin para verlo todo en acción:

    buttonClick me/buttondiv/divscript src="https://code.jquery.com/jquery-1.8.3.js"/scriptscript$(document).ready(function(){ $("button").click(function(){ $("div").animate({height:"toggle"}).append("hi"); });});/script
    Cómo se ve la página después de unos pocos clics.

    Cada vez que se lt;buttongt;hace clic en, el verde lt;divgt;se contrae o se expande y se le agrega un "hola" adicional. Este fragmento de código no lo sacará de ninguna situación que ponga en peligro su vida, pero es bueno comprenderlo completamente.

    Dolores de cabeza provocados por eventos

    Este fragmento parece bastante inocente:

    //set h to 200var h = 200; $(document).ready(function(){ $("button").click(function(){ //animate up to h, 200 pixels high $("div").animate({height:h}); });});

    Es de esperar que lt;divgt;se expanda a 200 píxeles. Pero pueden pasar muchas cosas entre la variable ha la que se le asigna el valor 200y la animación que realmente se ejecuta. En una aplicación jQuery compleja, el nombre de la variable hpodría reutilizarse o alguna otra parte de su aplicación podría cambiar el valor. Y mirarás fijamente esas pocas líneas de código preguntándote por qué diablos tu cuadro se anima a solo 50 píxeles de alto, en lugar de 200. Es porque en algún otro lugar de tu código, es posible que tengas un for (h=1; hlt;50; h++) {…}cambio discreto en el valor de h.

    Para ser justos, este problema no es causado por jQuery ni por funciones anónimas, pero es un peligro de la programación basada en eventos en general. Las líneas anteriores se ejecutan en tres momentos diferentes: cuando se procesan por primera vez ( $(document).ready(…)), cuando se carga el documento ( $("button").click(…)) y cuando se hace clic en el botón ( $("div").animate(…)).

     

    El código del lado del servidor escrito en lenguajes como PHP se ejecuta secuencialmente y en orden, de principio a fin, generando HTML para crear una página web y luego finalizando. JavaScript también puede hacer esto, pero es más poderoso cuando se adjunta a eventos, como clics en botones. Esto es programación basada en eventos y no es solo JavaScript. La programación detrás de las aplicaciones para teléfonos inteligentes también se basa en gran medida en eventos, con Objective-C, Java o C++ respondiendo a los eventos de la pantalla táctil de su teléfono Apple, Android o Windows.

    Si el código anterior se tradujera a Java y se ejecutara en un teléfono Android, la referencia a hla función más interna provocaría un error. Esto se debe a que hno se ha declarado como una staticvariable global (o en Java), por lo que el código interno no tiene idea de cuál debería ser su valor. Si bien eso no cambiaría el problema, al menos te obligaría a pensar más claramente sobre cómo usar las variables.

    Una forma rápida de evitar dolores de cabeza como este es definir el alcance de las variables. Este ejemplo se puede solucionar declarando la variable var hen la primera función anónima. Ahora, eso htendrá prioridad sobre cualquier otro global h:

    $(document).ready (function(){ //set h to 200 var h = 200; $("button").click (function(){ //animate up to h, 200 pixels high $("div").animate ({height:h}); });});

    Si debes utilizar una variable de configuración global, entonces otra técnica es nombrar y agrupar bien las variables. Y siempre se recomienda comentar claramente su código:

    //properties of the animationvar animationConfig = {upToHeight:200};//when document is loaded$(document).ready(function(){ //when any button element is clicked $("button").click(function(){ //change the height of all divs $("div").animate({height:animationConfig.upToHeight}); });});

    Conclusión

    Este artículo es una guía para principiantes sobre la sintaxis de JavaScript y cómo jQuery la utiliza. jQuery es solo una biblioteca de JavaScript que tiene una función de aspecto especial $y que fomenta el uso de objetos abreviados , funciones anónimas y encadenamiento de métodos . jQuery no está solo: bibliotecas como YUI (Yahoo User Interface) hacen cosas similares.

    Ahora puedes mirar una pieza compleja de jQuery directamente a la cara sin dudas ni incertidumbres en tu mente. Ya sabes lo que hace. Debido a las complejidades de la programación basada en eventos, es posible que no esté seguro de cuándo, pero sí sabe cómo.

    Otras lecturas

    • Demostraciones útiles de funciones jQuery para sus proyectos
    • Desarrollar la conciencia de la dependencia
    • Reducción de la metodología BEM para proyectos pequeños
    • Genialidad de JavaScript: o cómo animar sin jQuery

    (al, ml, il, mrn)Explora más en

    • Codificación
    • javascript
    • jQuery





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    El misterio del objeto jQuery: una introducción básica

    El misterio del objeto jQuery: una introducción básica

    Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Accesibilidad para diseñadores, con Stéphanie Walter Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-el-misterio-del-objeto-jquery-una-introduccion-basica-844-0.jpg

    2024-05-20

     

    El misterio del objeto jQuery: una introducción básica
    El misterio del objeto jQuery: una introducción básica

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20