jQuery es una biblioteca de JavaScript diseñada para simplificar el recorrido y la manipulación del árbol DOM de HTML , así como el manejo de eventos , las animaciones CSS y Ajax . [4] Es un software gratuito de código abierto que utiliza la licencia permisiva MIT . [5] A partir de agosto de 2022 , jQuery es utilizado por el 77% de los 10 millones de sitios web más populares. [6] El análisis web indica que es la biblioteca de JavaScript más implementada por un amplio margen, con al menos tres o cuatro veces más uso que cualquier otra biblioteca de JavaScript. [6] [7][actualizar]
La sintaxis de jQuery está diseñada para facilitar la navegación por un documento, la selección de elementos DOM , la creación de animaciones , el manejo de eventos y el desarrollo de aplicaciones Ajax . jQuery también ofrece a los desarrolladores la posibilidad de crear complementos sobre la biblioteca JavaScript. Esto permite a los desarrolladores crear abstracciones para la interacción y la animación de bajo nivel, efectos avanzados y widgets de alto nivel con posibilidad de creación de temas. El enfoque modular de la biblioteca jQuery permite la creación de potentes páginas web dinámicas y aplicaciones web.
El conjunto de características básicas de jQuery (selección, recorrido y manipulación de elementos DOM) habilitadas por su motor de selección (llamado "Sizzle" a partir de la versión 1.3) creó un nuevo "estilo de programación" que fusionaba algoritmos y estructuras de datos DOM. Este estilo influyó en la arquitectura de otros frameworks de JavaScript como YUI v3 y Dojo , lo que posteriormente estimuló la creación de la API estándar Selectors . [8]
Microsoft y Nokia incluyen jQuery en sus plataformas. [9] Microsoft lo incluye con Visual Studio [10] 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. [11]
jQuery, en esencia, es una biblioteca de manipulación del Modelo de Objetos de Documento (DOM). El DOM es una representación en forma de estructura de árbol de todos los elementos de una página web. jQuery simplifica la sintaxis para buscar, seleccionar y manipular estos elementos del DOM. Por ejemplo, jQuery se puede utilizar para buscar 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 clic del ratón).
jQuery también proporciona un paradigma para el manejo de eventos que va más allá de la selección y manipulación de elementos DOM básicos. 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 en el código. jQuery también tiene como objetivo incorporar otras funciones de JavaScript muy utilizadas (por ejemplo, fundidos de entrada y de salida 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. [12] [13] Actualmente es mantenido por un equipo de desarrolladores liderado por Timmy Willison (con el motor selector jQuery, Sizzle, siendo liderado por Richard Gibson). [14]
jQuery fue originalmente licenciado bajo la licencia CC BY-SA 2.5 y luego fue re-licenciado bajo la licencia MIT en 2006. [15] A fines de 2006, fue licenciado bajo licencias GPL y MIT. [16] Como esto generó cierta confusión, en 2012 se abandonó la licencia GPL y ahora solo está licenciado bajo la licencia MIT. [17]
jQuery incluye las siguientes características:
jQuery.inArray()y jQuery.each().jQuery 3.0 y versiones posteriores son compatibles con las "versiones actuales −1" (es decir, la versión estable actual del navegador y la versión que la precedió) de Firefox (y ESR), Chrome , Safari y Edge , así como también con Internet Explorer 9 y versiones posteriores. En dispositivos móviles, es compatible con iOS 7 y versiones posteriores, y Android 4.0 y versiones posteriores. [22]
La biblioteca jQuery se distribuye normalmente como un único archivo JavaScript que define todas sus interfaces, incluyendo DOM, eventos y funciones Ajax. Puede incluirse 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 servidores públicos. jQuery tiene una red de distribución de contenido (CDN) alojada por MaxCDN . [23] Google en el servicio Google Hosted Libraries y Microsoft también alojan la biblioteca. [24] [25]
Ejemplo de vinculación de 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 el CDN público de jQuery:
< script src = "https://code.jquery.com/jquery-3.5.1.min.js" integridad = "sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" origen cruzado = "anónimo" ></ script >jQuery ofrece dos tipos de funciones : funciones de utilidad estáticas y métodos de objetos jQuery . Cada una tiene su propio estilo de uso.
A ambos se accede a través del identificador principal de jQuery: jQuery. Este identificador tiene un alias llamado $. [26] 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 con la llamada a la $función con una cadena de selector 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 tienen 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 ellas 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 resulta útil si jQuery se utiliza en una página web que también enlaza con otra biblioteca que exige el $símbolo como su identificador. En el modo sin conflictos, los desarrolladores pueden utilizarlo jQuerycomo reemplazo de $sin perder funcionalidad. [27]
Normalmente, jQuery se utiliza colocando el código de inicialización y las funciones de manejo de eventos en . Esto lo activa jQuery cuando el navegador termina de construir el DOM para la página web actual.$(handler)
$ ( function () { // Esta función anónima se llama cuando la página ha terminado de cargarse. // Aquí, uno puede colocar código para crear objetos jQuery, manejar eventos, etc. }); o
$ ( fn ); // La función llamada fn, definida en otro lugar, se llama cuando se ha cargado la página. Históricamente, $(document).ready(callback)ha sido el modismo de facto para ejecutar código una vez 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 en su lugar. [28]
Los métodos de objeto jQuery normalmente también devuelven un objeto jQuery, lo que permite el uso de cadenas de métodos :
$ ( 'div.test' ) . on ( 'click' , handleTestClick ) . addClass ( 'foo' ); Esta línea encuentra todos div los elementos con el 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.
Algunos 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 que se pasa como argumento a $()factory parece HTML. Por ejemplo, el código siguiente encuentra un selectelemento HTML y crea un nuevo optionelemento con el valor VAGy la etiqueta Volkswagen, que luego se agrega al menú de selección :
$ ( ' seleccione # marcas-de-coches' ) .append ( $ ( '<opción>' ) .prop ( valor , "VAG" ) .text ( ' Volkswagen' ) ); Es posible realizar solicitudes Ajax (con soporte entre navegadores ) $.ajax()para cargar y manipular datos remotos.
$ . ajax ({ tipo : 'POST' , url : '/process/submit.php' , datos : { nombre : 'John' , ubicación : 'Boston' , }, }). then ( función ( msg ) { alerta ( 'Datos guardados: ' + msg ); }). catch ( función ( xmlHttpRequest , statusText , errorThrown ) { alerta ( 'Su envío de formulario falló.\n\n' + 'Solicitud HTTP XML: ' + JSON . stringify ( xmlHttpRequest ) + ',\nTexto de estado: ' + statusText + ',\nError generado: ' + errorThrown ); }); Este ejemplo publica los datos name=Johnen location=Bostonel /process/submit.phpservidor. Cuando esta solicitud finaliza, 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 llamadas que se ejecutan cuando se completa la respuesta. Estas devoluciones de llamadas de promesa deben utilizarse debido a la naturaleza asincrónica de las solicitudes 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 [29] que cubren una variedad de funciones, como ayudantes 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. [29] Sin embargo, los complementos de este subdominio se eliminaron accidentalmente en diciembre de 2011 en un intento de eliminar el spam del sitio. [30] El nuevo sitio es un repositorio alojado en GitHub , que requería que los desarrolladores volvieran a enviar sus complementos y se ajustaran a los nuevos requisitos de envío. [31] jQuery ofrece un "Centro de aprendizaje" que puede ayudar a los usuarios a comprender JavaScript y comenzar a desarrollar complementos de jQuery. [32]
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. [55] El equipo de jQuery lo utiliza para probar su código y sus complementos, pero puede probar cualquier código JavaScript genérico, incluido el código JavaScript del lado del servidor. [55]
A partir de 2011 [update], el equipo de pruebas de jQuery utiliza QUnit con TestSwarm para probar cada lanzamiento del código base de jQuery. [56]
Al simplificar tareas como el recorrido de documentos HTML, la animación y el manejo de eventos, la sólida biblioteca de JavaScript jQuery cambió la cara del desarrollo web. A mayo de 2019 [update], jQuery todavía se usa en el 74 por ciento de los sitios web conocidos, según el encuestador de tecnología web W3Techs. Sin embargo, algunos desarrolladores consideran que la biblioteca jQuery, que debutó en agosto de 2006, es una tecnología antigua cuyo tiempo ya pasó. En los últimos años han surgido alternativas a jQuery, como la biblioteca Cash o incluso el moderno JavaScript tradicional, 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 demuestran que jQuery se ha vuelto obsoleto, o al menos no es tan esencial como antes.
— Paul Krill, InfoWorld (2019) [57]
Como la compatibilidad entre navegadores ya no es un problema tan grande, hoy en día la mayor parte de jQuery se puede reemplazar con estándares web modernos, sin perder mucha comodidad. [58] En parte debido a esto, GitHub eliminó jQuery de sus páginas en 2018. [59]
jQuery (74,1 %) es 3,7 veces más popular que Bootstrap (19,9 %).
Los scripts más utilizados son 1. jQuery (692.981 sitios); 2. jQuery UI (193.680 sitios); 3. Facebook SDK (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 del núcleo de jQuery), Richard Gibson (líder de Sizzle, núcleo de jQuery).
