jQuery - jQuery

jQuery

Autor (es) original (es)	John Resig
Desarrollador (es)	El equipo de jQuery
Versión inicial	26 de agosto de 2006 ; hace 15 años ( 2006-08-26 )
Lanzamiento estable	3.6.0 / (2 de marzo de 2021 ; hace 7 meses ) ( 02/03/2021 )
Repositorio
Escrito en	JavaScript
Plataforma	Ver § Soporte del navegador
Tamaño	27–274 KB
Escribe	Biblioteca de JavaScript
Licencia	MIT
Sitio web	jquery .com

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 , la animación CSS y Ajax . Es un software gratuito de código abierto que utiliza la licencia MIT permisiva . En mayo de 2019, jQuery es utilizado por el 73% de los 10 millones de sitios web más populares. El análisis web indica que es la biblioteca de JavaScript más ampliamente implementada por un amplio margen, con al menos de 3 a 4 veces más uso que cualquier otra biblioteca de JavaScript.

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 dinámicas y aplicaciones web.

El conjunto de características centrales de jQuery —selecciones de elementos DOM, recorrido y manipulación— habilitadas por su motor de selección (llamado "Sizzle" de v1.3), creó un nuevo "estilo de programación", fusionando algoritmos y estructuras de datos DOM. Este estilo influyó en la arquitectura de otros frameworks JavaScript como YUI v3 y Dojo , estimulando posteriormente la creación de la API de Selectores estándar . Más tarde, este estilo se ha mejorado con una fusión más profunda de algoritmo-datos en un heredero de jQuery, el marco D3.js.

Microsoft y Nokia incluyen jQuery en sus plataformas. Microsoft lo incluye con Visual Studio 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.

Visión general

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 encontrar, seleccionar y manipular estos elementos DOM. Por ejemplo, jQuery se puede usar para encontrar un elemento en el documento con una propiedad determinada (por ejemplo, todos los elementos con una etiqueta h1 ), cambiar uno o más de sus atributos (por ejemplo, color, visibilidad) o hacer que responda a un evento ( por ejemplo, un clic del mouse).

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 en el código. jQuery también tiene como objetivo incorporar otras funciones de JavaScript muy utilizadas (por ejemplo, fundidos de entrada y salida al ocultar elementos, animaciones mediante la manipulación de propiedades CSS ).

Los principios de desarrollo con jQuery son:

• La separación de JavaScript y HTML: La biblioteca jQuery proporciona la sintaxis simple para añadir eventos manipuladores a la DOM utilizando JavaScript, en lugar de añadir eventos atributos HTML para llamar a funciones de JavaScript. Por lo tanto, anima a los desarrolladores a separar completamente el código JavaScript del marcado HTML.
• Brevedad y claridad: jQuery promueve la brevedad y la claridad con características como funciones "encadenables" y nombres abreviados de funciones.
• Eliminación de incompatibilidades entre navegadores: los motores JavaScript de diferentes navegadores difieren ligeramente, por lo que el código JavaScript que funciona para un navegador puede no funcionar para otro. Al igual que otros kits de herramientas de JavaScript, jQuery maneja todas estas inconsistencias entre navegadores y proporciona una interfaz consistente que funciona en diferentes navegadores.
• Extensibilidad: se pueden agregar fácilmente nuevos eventos, elementos y métodos y luego reutilizarlos como un complemento.

Historia

jQuery fue creado originalmente en enero de 2006 en BarCamp NYC por John Resig , influenciado por la biblioteca cssQuery anterior de Dean Edwards . Actualmente lo mantiene un equipo de desarrolladores dirigido por Timmy Willison (con el motor de selección de jQuery, Sizzle, dirigido por Richard Gibson).

jQuery fue originalmente bajo la licencia CC BY-SA 2.5 y relicensed a la licencia MIT en 2006. A finales de 2006, que era de doble licenciado bajo GPL licencias y el MIT. Como esto generó cierta confusión, en 2012 se eliminó la GPL y ahora solo tiene la licencia del MIT.

Popularidad

• En 2015, jQuery se utilizó en el 62,7% del millón de sitios web principales (según BuiltWith) y en el 17% de todos los sitios web de Internet.
• En 2017, jQuery se utilizó en el 69,2% de los 1 millón de sitios web principales (según Libscore).
• En 2018, jQuery se utilizó en el 78% de los 1 millón de sitios web principales.
• En 2019, jQuery se usó en el 80% de los 1 millón de sitios web principales (según BuiltWith) y en el 74,1% de los 10 millones principales (según W3Techs).
• En abril de 2021, jQuery es utilizado por el 77,8% de los 10 millones de sitios web principales (según W3Techs) .

Características

jQuery incluye las siguientes características:

• Selecciones de elementos DOM utilizando el motor selector de código abierto de múltiples navegadores Sizzle , un derivado del proyecto jQuery
• Manipulación DOM basada en selectores CSS que usa los nombres y atributos de los elementos, como id y class, como criterios para seleccionar nodos en el DOM
• Eventos
• Efectos y animaciones
• Ajax
• Objetos diferidos y promesas para controlar el procesamiento asincrónico
• Análisis JSON
• Extensibilidad a través de complementos
• Utilidades, como detección de características
• Los métodos de compatibilidad que están disponibles de forma nativa en los navegadores modernos, pero necesitan alternativas para los navegadores más antiguos, como jQuery.inArray()y jQuery.each().
• Compatibilidad con varios navegadores

Soporte del navegador

jQuery 3.0 y posteriores son compatibles con 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 versiones posteriores, y Android 4.0 y versiones posteriores.

Distribución

La biblioteca jQuery generalmente se distribuye como un solo archivo JavaScript que define todas sus interfaces, incluidas las funciones DOM, Eventos y Ajax. Puede incluirse dentro de una página web enlazando a una copia local, o enlazando a una de las muchas copias disponibles en servidores públicos. jQuery tiene una red de entrega de contenido (CDN) alojada por MaxCDN. Google en el servicio de bibliotecas alojadas de Google y Microsoft también alojan la biblioteca.

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 del CDN público de jQuery:

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

Interfaz

Funciones

jQuery proporciona dos tipos de funciones , funciones de utilidad estáticas y métodos de objeto jQuery . Cada uno tiene su propio estilo de uso.

Ambos se accede a través de identificador de principal de jQuery: jQuery. Este identificador tiene un alias llamado $. Se puede acceder a todas las funciones mediante cualquiera de estos dos nombres.

métodos jQuery

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 llamar a la $función con una cadena de selección de 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 de la clase test. Este conjunto de nodos se puede manipular llamando a métodos en el objeto jQuery devuelto.

Utilidades estáticas

Estas son funciones de utilidad y no actúan directamente sobre un objeto jQuery. Se accede a ellos como métodos estáticos en jQuery o $ identifier. Por ejemplo, $.ajax()es un método estático.

Modo sin conflicto

jQuery proporciona una $.noConflict()función, que cede el control del $nombre. Esto es útil si jQuery se usa en una página web que también vincula otra biblioteca que exige el $símbolo como su identificador. En el modo sin conflicto, los desarrolladores pueden usarlo jQuerycomo reemplazo $sin perder funcionalidad.

Punto de partida típico

Por lo general, jQuery se usa colocando el código de inicialización y las funciones de manejo de eventos en . Esto lo activa jQuery cuando el navegador ha terminado de construir el DOM para la página web actual. $(handler)

$(function () {
        // This anonymous function is called when the page has completed loading.
        // Here, one can place code to create jQuery objects, handle events, etc.
});

o

$(fn); // The function named fn, defined elsewhere, is called when the page has loaded.

Históricamente, $(document).ready(callback)ha sido el idioma de facto para ejecutar código después de que 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.

Encadenamiento

Los métodos de objetos jQuery normalmente también devuelven un objeto jQuery, que permite el uso de cadenas de métodos :

$('div.test')
  .on('click', handleTestClick)
  .addClass('foo');

Esta línea busca todos los div elementos con atributo de clase test, luego registra un controlador de eventos en cada elemento para el evento "clic", luego agrega el atributo de clase fooa cada elemento.

Ciertos métodos de objetos de jQuery recuperan valores específicos (en lugar de modificar el 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 usar para encadenar, ya que el valor de retorno no hace referencia a un objeto jQuery.

Creando nuevos elementos DOM

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 encuentra un selectelemento HTML y crea un nuevo optionelemento con el valor "VAG" y la etiqueta "Volkswagen", que luego se agrega al menú de selección :

$('select#car-brands')
  .append($('<option>')
    .prop(value,"VAG")
    .text('Volkswagen')
  );

Ajax

Es posible realizar solicitudes Ajax (con soporte entre navegadores ) $.ajax()para cargar y manipular datos remotos.

$.ajax({
  type: 'POST',
  url: '/process/submit.php',
  data: {
    name : 'John',
    location : 'Boston',
  },
}).then(function(msg) {
  alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    'Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});

En este ejemplo los Mensajes de Datos name=Johny location=Bostonhasta /process/submit.phpen el 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 Ajax .

Complementos de jQuery

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 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. Sin embargo, los complementos de este subdominio se eliminaron accidentalmente en diciembre de 2011 en un intento de eliminar el spam del sitio. El nuevo sitio es un repositorio alojado en GitHub , que requería que los desarrolladores volvieran a enviar sus complementos y cumplieran con los nuevos requisitos de envío. jQuery proporciona un "Centro de aprendizaje" que puede ayudar a los usuarios a comprender JavaScript y comenzar a desarrollar complementos de jQuery.

Para crear estos complementos, los desarrolladores pueden optar por escribir su propio código desde cero o construir sobre una estructura existente como jQuery Boilerplate .

Historial de versiones

Marco de prueba

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 prueba de unidades interna. El equipo de jQuery lo usa 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.

A partir de 2011, el equipo de pruebas de jQuery usa QUnit con TestSwarm para probar cada versión de la base de código de jQuery.

Alternativas a jQuery

Simplificando 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, jQuery todavía se usa en el 74 por ciento de los sitios web conocidos, según el topógrafo de tecnología web W3Techs. Sin embargo, la biblioteca jQuery, que debutó en agosto de 2006, ahora está siendo vista por algunos desarrolladores 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 el JavaScript vanilla moderno, ahora que los navegadores web manejan JavaScript de la misma manera y ya no se necesita jQuery para resolver problemas de compatibilidad. Los argumentos en Reddit y los videos en YouTube argumentan que jQuery se ha vuelto obsoleto, o al menos no es tan esencial como lo era antes.

-  Paul Krill, InfoWorld (2019)

Como la compatibilidad entre navegadores ya no es un gran problema, la mayor parte de jQuery se puede reemplazar hoy en día con estándares web modernos, sin perder mucha conveniencia. En parte debido a esto, GitHub eliminó jQuery de sus páginas en 2018.

Bibliotecas alternativas

• Dinero en efectivo
• Zepto

Ver también

• Comparación de marcos de JavaScript
• jQuery Mobile
• interfaz de usuario de jQuery

Referencias

Otras lecturas

• John Resig (ponente) (13 de abril de 2007). John Resig: Advancing JavaScript with Libraries (video de YouTube) . Teatro YUI . Consultado el 9 de enero de 2018 .
• Krill, Paul (31 de agosto de 2006). "JavaScript, desarrolladores de .Net ayudaron en un proyecto separado" . InfoWorld . Consultado el 15 de abril de 2019 .
• Taft, Darryl K. (30 de agosto de 2006). "jQuery facilita JavaScript, desarrollo AJAX" . eWeek . Consultado el 15 de abril de 2019 .

enlaces externos

• Página web oficial