jQuery es una biblioteca de JavaScript diseñada para simplificar el recorrido y la manipulación del árbol DOM HTML , así como el manejo de eventos , animaciones CSS y Ajax . [3] Es un software gratuito de código abierto que utiliza la licencia MIT permisiva . [4] En agosto de 2022 , jQuery es utilizado por el 77% de los 10 millones de sitios web más populares. [5] El análisis web indica que es la biblioteca JavaScript más implementada por un amplio margen, teniendo al menos tres o cuatro veces más uso que cualquier otra biblioteca JavaScript. [5] [6][actualizar]
La sintaxis de jQuery está diseñada para facilitar la navegación por un documento, seleccionar elementos DOM , crear animaciones , manejar eventos y desarrollar aplicaciones Ajax . jQuery también proporciona capacidades para que los desarrolladores creen complementos sobre la biblioteca de JavaScript. Esto permite a los desarrolladores crear abstracciones para interacción y animación de bajo nivel, efectos avanzados y widgets temáticos de alto nivel. El enfoque modular de la biblioteca jQuery permite la creación de potentes páginas web y aplicaciones web dinámicas.
El conjunto de características principales de jQuery (selección, recorrido y manipulación de elementos DOM) habilitadas por su motor de selección (llamado "Sizzle" desde v1.3), creó un nuevo "estilo de programación", fusionando algoritmos y estructuras de datos DOM. Este estilo influyó en la arquitectura de otros marcos de JavaScript como YUI v3 y Dojo , y luego estimuló la creación de la API de Selectores estándar . [7]
Microsoft y Nokia incluyen jQuery en sus plataformas. [8] Microsoft lo incluye con Visual Studio [9] para su uso dentro de los marcos ASP.NET AJAX y ASP.NET MVC de Microsoft , mientras que Nokia lo ha integrado en la plataforma de desarrollo de widgets Web Run-Time. [10]
jQuery, en esencia, es una biblioteca de manipulación del modelo de objetos de documento (DOM). El DOM es una representación en estructura de árbol de todos los elementos de una página web. jQuery simplifica la sintaxis para buscar, seleccionar y manipular estos elementos DOM. Por ejemplo, jQuery se puede utilizar para encontrar un elemento en el documento con una determinada propiedad (por ejemplo, todos los elementos con la h1etiqueta), cambiar uno o más de sus atributos (por ejemplo color, visibility), o hacer que responda a un evento (por ejemplo, un mouse). hacer clic).
jQuery también proporciona un paradigma para el manejo de eventos que va más allá de la selección y manipulación básica de elementos DOM. La asignación de eventos y la definición de la función de devolución de llamada de eventos se realizan en un solo paso en una única ubicación del código. jQuery también pretende incorporar otras funciones de JavaScript muy utilizadas (por ejemplo, fundidos de aparición y desaparición al ocultar elementos, animaciones mediante la manipulación de propiedades CSS ).
Los principios del desarrollo con jQuery son:
jQuery fue creado originalmente en enero de 2006 en BarCamp NYC por John Resig , influenciado por la biblioteca cssQuery anterior de Dean Edwards. [11] [12] Actualmente lo mantiene un equipo de desarrolladores liderado por Timmy Willison (con el motor selector jQuery, Sizzle, dirigido por Richard Gibson). [13]
jQuery originalmente tenía la licencia CC BY-SA 2.5 y se le volvió a otorgar la licencia MIT en 2006. [14] A finales de 2006, tenía doble licencia bajo las licencias GPL y MIT. [15] Como esto generó cierta confusión, en 2012 se eliminó la GPL y ahora solo tiene la licencia MIT. [dieciséis]
jQuery incluye las siguientes características:
jQuery.inArray()y jQuery.each().jQuery 3.0 y posteriores admiten las "versiones actuales-1" (es decir, la versión estable actual del navegador y la versión anterior) de Firefox (y ESR), Chrome , Safari y Edge , así como Internet Explorer 9 y posteriores. En dispositivos móviles es compatible con iOS 7 y posteriores, y con Android 4.0 y posteriores. [21]
La biblioteca jQuery normalmente se distribuye como un único archivo JavaScript que define todas sus interfaces, incluidas las funciones DOM, Eventos y Ajax. Se puede incluir dentro de una página web mediante un vínculo a una copia local o mediante un vínculo a una de las muchas copias disponibles en los servidores públicos. jQuery tiene una red de entrega de contenido (CDN) alojada en MaxCDN . [22] Google en el servicio de bibliotecas alojadas en Google y Microsoft también alojan la biblioteca. [23] [24]
Ejemplo de vincular una copia de la biblioteca localmente (desde el mismo servidor que aloja la página web):
< script src = "jquery-3.5.1.min.js" >> script >Ejemplo de vinculación de una copia de la biblioteca desde la CDN pública de jQuery:
< script src = "https://code.jquery.com/jquery-3.5.1.min.js" integridad = "sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin = "anonymous" >> script >jQuery proporciona dos tipos de funciones , funciones de utilidad estáticas y métodos de objetos jQuery . Cada uno tiene su propio estilo de uso.
Se accede a ambos a través del identificador principal de jQuery: jQuery. Este identificador tiene un alias llamado $. [25] Se puede acceder a todas las funciones a través de cualquiera de estos dos nombres.
La jQueryfunción es una fábrica para crear un objeto jQuery que representa uno o más nodos DOM. Los objetos jQuery tienen métodos para manipular estos nodos. Estos métodos (a veces llamados comandos) se pueden encadenar ya que cada método también devuelve un objeto jQuery.
El acceso y la manipulación de múltiples nodos DOM en jQuery generalmente comienza llamando a la $función con una cadena de selección CSS. Esto devuelve un objeto jQuery que hace referencia a todos los elementos coincidentes en la página HTML . $("div.test"), por ejemplo, devuelve un objeto jQuery con todos los divelementos que tiene la clase test. Este conjunto de nodos se puede manipular llamando a métodos en el objeto jQuery devuelto.
Estas son funciones de utilidad y no actúan directamente sobre un objeto jQuery. Se accede a ellos como métodos estáticos en el identificador jQuery o $. Por ejemplo, $.ajax()es un método estático.
jQuery proporciona una $.noConflict()función que cede el control del $nombre. Esto es útil si jQuery se utiliza en una página web y también vincula otra biblioteca que exige el $símbolo como identificador. En el modo sin conflicto, los desarrolladores pueden usarlo jQuerycomo reemplazo $sin perder funcionalidad. [26]
Normalmente, jQuery se utiliza colocando el código de inicialización y las funciones de manejo de eventos en formato . JQuery activa esto cuando el navegador ha terminado de construir el DOM para la página web actual.$(handler)
$ ( function () { // Esta función anónima se llama cuando la página ha completado la carga. // Aquí, se puede colocar código para crear objetos jQuery, manejar eventos, etc. }); o
$ ( fn ); // La función denominada fn, definida en otro lugar, se llama cuando la página se ha cargado. Históricamente, $(document).ready(callback)ha sido el modismo de facto para ejecutar código después de que el DOM esté listo. Sin embargo, desde jQuery 3.0, se anima a los desarrolladores a utilizar la $(handler)firma mucho más corta. [27]
Los métodos de objetos jQuery normalmente también devuelven un objeto jQuery, lo que permite el uso de cadenas de métodos :
$ ( 'div.prueba' ) . en ( 'hacer clic' , manejarTestClick ) . addClass ( 'foo' ); Esta línea encuentra todos div los elementos con atributo de clase test, luego registra un controlador de eventos en cada elemento para el evento "clic" y luego agrega el atributo de clase fooa cada elemento.
Ciertos métodos de objetos jQuery recuperan valores específicos (en lugar de modificar un estado). Un ejemplo de esto es el val()método que devuelve el valor actual de un elemento de entrada de texto . En estos casos, una declaración como $('#user-email').val()no se puede utilizar para encadenar ya que el valor de retorno no hace referencia a un objeto jQuery.
Además de acceder a los nodos DOM existentes a través de jQuery, también es posible crear nuevos nodos DOM, si la cadena pasada como argumento a la $()fábrica parece HTML. Por ejemplo, el siguiente código busca un selectelemento HTML y crea un nuevo optionelemento con el valor VAGy la etiqueta Volkswagen, que luego se agrega al menú de selección :
$ ( 'select#marcas-de-coches' ) . append ( $ ( '<opción>' ) . prop ( valor , "VAG" ) . text ( 'Volkswagen' ) ); Es posible realizar solicitudes Ajax (con soporte para varios navegadores ) para $.ajax()cargar y manipular datos remotos.
ps _ ajax ({ tipo : 'POST' , url : '/process/submit.php' , datos : { nombre : 'John' , ubicación : 'Boston' , }, }). luego ( función ( msg ) { alerta ( 'Datos guardados:' + msg ); }). catch ( function ( xmlHttpRequest , statusText , errorThrown ) { alerta ( 'Error en el envío de su formulario.\n\n' + 'Solicitud HTTP XML: ' + JSON . stringify ( xmlHttpRequest ) + ',\nTexto de estado: ' + statusText + ' ,\nError lanzado: ' + errorThrown ); }); Este ejemplo publica los datos name=Johny location=Bostonen /process/submit.phpel servidor. Cuando finaliza esta solicitud, se llama a la función de éxito para alertar al usuario. Si la solicitud falla, alertará al usuario sobre la falla, el estado de la solicitud y el error específico.
El ejemplo anterior utiliza los métodos .then()y .catch()para registrar devoluciones de llamada que se ejecutan cuando se completa la respuesta. Estas devoluciones de llamada de promesa deben usarse debido a la naturaleza asincrónica de las solicitudes de Ajax .
La arquitectura de jQuery permite a los desarrolladores crear código de complemento para ampliar su función. Hay miles de complementos de jQuery disponibles en la Web [28] que cubren una variedad de funciones, como ayudantes de Ajax, servicios web , cuadrículas de datos, listas dinámicas, herramientas XML y XSLT , arrastrar y soltar , eventos, manejo de cookies y ventanas modales .
Una fuente importante de complementos de jQuery es el subdominio de complementos del sitio web del Proyecto jQuery. [28] Sin embargo, los complementos de este subdominio se eliminaron accidentalmente en diciembre de 2011 en un intento de eliminar el spam del sitio. [29] El nuevo sitio es un repositorio alojado en GitHub , lo que requería que los desarrolladores volvieran a enviar sus complementos y cumplieran con los nuevos requisitos de envío. [30] jQuery proporciona un "Centro de aprendizaje" que puede ayudar a los usuarios a comprender JavaScript y comenzar a desarrollar complementos de jQuery. [31]
QUnit es un marco de automatización de pruebas que se utiliza para probar el proyecto jQuery. El equipo de jQuery lo desarrolló como una biblioteca de pruebas unitarias interna. [54] El equipo de jQuery lo utiliza para probar su código y complementos, pero puede probar cualquier código JavaScript genérico, incluido el código JavaScript del lado del servidor. [54]
A partir de 2011 [actualizar], el equipo de pruebas de jQuery utiliza QUnit con TestSwarm para probar cada versión del código base de jQuery. [55]
Al simplificar tareas como el recorrido de documentos HTML, la animación y el manejo de eventos, la incondicional biblioteca jQuery JavaScript cambió la cara del desarrollo web. En mayo de 2019 [actualizar], jQuery todavía se utiliza en el 74 por ciento de los sitios web conocidos, según el encuestador de tecnología web W3Techs. Sin embargo, algunos desarrolladores consideran ahora la biblioteca jQuery, que debutó en agosto de 2006, como una tecnología más antigua cuyo tiempo ha pasado. En los últimos años han surgido alternativas a jQuery, como la biblioteca Cash o incluso simplemente JavaScript moderno y básico, ahora que todos los navegadores web manejan JavaScript de la misma manera y jQuery ya no es necesario para resolver problemas de compatibilidad. Los argumentos en Reddit y los videos en YouTube sostienen que jQuery se ha vuelto obsoleto, o al menos no es tan esencial como lo era antes.
— Paul Krill, InfoWorld (2019) [56]
Como la compatibilidad entre navegadores ya no es un problema tan importante, hoy en día la mayor parte de jQuery se puede reemplazar con estándares web modernos, sin perder mucha comodidad. [57] En parte debido a esto, GitHub eliminó jQuery de sus páginas en 2018. [58]
jQuery (74,1%) es 3,7 veces más popular que Bootstrap (19,9%).
Los scripts principales son 1. jQuery (692.981 sitios);
2. jQuery UI (193.680 sitios);
3. SDK de Facebook (175.369 sitios);
4. Twitter Bootstrap JS (158.288 sitios);
5. Modernizr (155.503 sitios).
.svg/1280px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}
querySelector/querySelectorAllen los principales navegadores web.Equipo: Timmy Willison (líder de jQuery Core), Richard Gibson (líder de Sizzle, jQuery Core).
