Descripción de la etiqueta Jquery

jQuery es una biblioteca de Javascript, también piensa en agregar una etiqueta de Javascript. jQuery es una popular biblioteca de JavaScript de múltiples navegadores que facilita el paso del Modelo de Objeto de Documento (DOM), el manejo de eventos, la animación y las interacciones AJAX, minimizando las diferencias entre los navegadores. Una pregunta con una etiqueta jquery debe asociarse con jquery, por lo que debe usarse jquery en el código en cuestión, y la pregunta debe incluir al menos elementos relacionados con el uso de jquery.

Acerca de

jQuery (Core) es una biblioteca de JavaScript de varios navegadores (creada por John Resig ) que proporciona abstracciones para las tareas comunes de los clientes, como el desplazamiento de DOM, la manipulación de DOM, el manejo de eventos, la animación y el AJAX .

jQuery facilita el rastreo y manejo de documentos HTML, manejo de eventos, animación y AJAX debido a su API, que funciona en varios navegadores.

jQuery proporciona una plataforma para crear complementos que amplían las capacidades, además de las que ya proporciona la biblioteca. El desarrollo de jQuery y los proyectos relacionados está coordinado por la Fundación JQuery .

Características especiales

jQuery incluye las siguientes funciones:

  • Seleccionando elementos DOM usando el mecanismo selector de código abierto multiservidor de Sizzle, resaltando el proyecto jQuery
  • Omita y modifique el DOM (incluido el soporte para CSS 1-3)
  • Manipulación de DOM basada en selectores de CSS que usan nombres de nodos y atributos (por ejemplo, ID y class ) como criterios para crear selectores
  • Eventos
  • Efectos y animaciones.
  • AJAX
  • Análisis JSON (para navegadores antiguos)
  • Extensibilidad a través de complementos.
  • Utilidades, como información del agente de usuario, detección de características
  • Métodos de compatibilidad que inicialmente están disponibles en los navegadores modernos, pero que necesitan copia de seguridad inArray() para los más antiguos, por ejemplo, inArray() y each() funciones each()
  • Multi-navegador (no debe confundirse con el navegador cruzado)

Soporte del navegador

jQuery admite la versión estable actual y la versión anterior o "versión actual 1" de Chrome, Edge, Firefox y Safari. También es compatible con la versión estable actual de Opera.

Además, jQuery 1.x es compatible con Internet Explorer versión 6 o superior. Sin embargo, el soporte para IE 6-8 se ha deshabilitado para jQuery 2.xy jQuery 3.x , que solo son compatibles con IE 9 o superior.

Finalmente, jQuery es compatible con el navegador móvil en Android 4.0 y superior, y Safari en iOS 7 y superior.

Versiones de jQuery

jQuery se actualiza con frecuencia, por lo que la biblioteca debe usarse con cuidado. Algunas funciones se vuelven obsoletas con las nuevas versiones de jQuery. Esté atento a las notas de lanzamiento para realizar un seguimiento de las características.

El CDN de jQuery proporciona enlaces de descarga para todas las versiones de jQuery , incluidas las últimas versiones estables de cada rama .

Cuando haga preguntas relacionadas con jQuery, debe:

  1. Lea la documentación de la API de jQuery con cuidado y pruebe el Desbordamiento de pila para duplicados.
  2. Aísle el código del problema y reprodúzcalo en un entorno en línea como JSFiddle , JSBin o CodePen . También puedes usar LiveWeave para Live Connect. Sin embargo, asegúrese de incluir el código del problema en su pregunta, no solo un enlace al entorno en línea. También puede usar fragmentos de pila para incluir código ejecutable en la pregunta.
  3. Marque la pregunta en consecuencia; siempre incluya y use otras etiquetas de desarrollo web ( , , ), si corresponde. Los complementos jQuery más populares también tienen sus propias etiquetas, como , y ; Para cada otro plugin hay una etiqueta .
  4. Especifique la versión de la biblioteca jQuery que se está utilizando, de modo que cualquier respuesta pueda proporcionar soluciones adecuadas para la versión.
  5. Mencione en qué navegador aparece el código y qué mensajes de error, en su caso, fueron lanzados por el navegador. Si los problemas son consistentes en el navegador cruzado, entonces esta también es información valiosa.

Preguntas frecuentes

Hola mundo

Muestra "¡Hola mundo!". En la ventana de advertencia para cada enlace, haga clic después de que el DOM ( JSFiddle ) esté listo :

 // callback for document load $(function () { // select anchors and set click handler $("a").click(function (event) { // prevent link default action (redirecting to another page) event.preventDefault(); // show the message alert("Hello world!"); }); }); 

Recursos

Video tutorial

Plugins populares

Otros proyectos de la Fundación JQuery

Buenas prácticas y errores a menudo cometidos.

Tema relacionado: jQuery trampas para evitar

No te olvides de utilizar un controlador listo.

Si su código de alguna manera administra el DOM, debe asegurarse de que se ejecute una vez que se complete la descarga del DOM.

jQuery proporciona formas de hacer esto con una función anónima:

 $(function () {  }); // Or $(document).ready(function () {  }); 

o con una función nombrada:

 $(functionName); // Or $(document).ready(functionName); 

Estas son alternativas a colocar un código JavaScript o etiqueta de script en HTML justo antes del cierre </body> .

En jQuery 3.x, la forma recomendada de agregar un controlador listo es $(function() {}) , mientras que otras formas, como $(document).ready(function() {}) , están en desuso. Además, jQuery 3.x elimina la posibilidad de usar .on("ready", function() {}) para ejecutar una función en un evento "ready".

Evite los conflictos con noConflict() y otro alias para jQuery

Si su código jQuery entra en conflicto con otra biblioteca que también usa el signo $ como alias, use el método noConflict() :

 jQuery.noConflict(); 

Luego, puede usar $ como un alias para otra biblioteca de forma segura, utilizando el nombre jQuery para las funciones jQuery.

También puedes llamar

 $jq = jQuery.noConflict(); 

y usa $jq como un alias para jQuery. Por ejemplo:

 $jq(function () { $jq("a").click(function (event) { event.preventDefault(); alert("Hello world!"); }); }); 

También puede asignar jQuery a $ en un área específica:

 jQuery(function ($) { // In here, the dollar sign is an alias for jQuery only. }); // Out here, other libraries can use the dollar sign as an alias. 

Luego, puede usar $ como alias para jQuery dentro de este bloque de funciones, sin preocuparse por los conflictos con otras bibliotecas.

Donde sea posible, cachear objetos y cadenas de jQuery.

Llamar a la función jQuery $() es costoso. Apelación repetida a él extremadamente ineficiente . Evita esto:

 $('.test').addClass('hello'); $('.test').css('color', 'orange'); $('.test').prop('title', 'Hello world'); 

En su lugar, almacena en caché tu objeto jQuery en una variable:

 var $test = $('.test'); $test.addClass('hello'); $test.css('color', 'orange'); $test.prop('title', 'Hello world'); 

O mejor aún, use una cadena para reducir la repetición:

 $('.test').addClass('hello').css('color', 'orange').prop('title', 'Hello world'); 

Además, recuerde que muchas funciones pueden realizar múltiples cambios en una sola llamada, agrupando todos los valores en un objeto. En lugar de

 $('.test').css('color', 'orange').css('background-color', 'blue'); 

uso:

 $('.test').css({ 'color': 'orange', 'background-color': 'blue' }); 

Convenciones de nomenclatura de variables

Las variables de jQuery enumeradas generalmente se llaman comenzando con $ para distinguirlas de los objetos JavaScript estándar.

 var $this = $(this); 

Conozca sus propiedades y funciones DOM

Aunque uno de los objetivos de jQuery es abstraer el DOM, el conocimiento de las propiedades del DOM puede ser extremadamente útil. Uno de los errores más comunes cometidos por aquellos que estudian jQuery sin aprender el DOM es usar jQuery para acceder a las propiedades de un elemento:

 $('img').click(function () { $(this).attr('src'); // Bad! }); 

En el código anterior, this refiere al elemento desde el cual se lanzó el controlador de eventos de clic. El código anterior es lento y detallado; El siguiente código funciona de la misma manera y es mucho más corto, más rápido y más legible.

 $('img').click(function () { this.src; // Much, much better }); 

Sintaxis idiomática para la creación de elementos.

Aunque los siguientes dos ejemplos parecen ser funcionalmente equivalentes y sintácticamente correctos, se prefiere el primer ejemplo:

 $('<p>', { text: 'This is a ' + variable, "class": 'blue slider', title: variable, id: variable + i }).appendTo(obj); 

A modo de comparación, el enfoque de concatenación de cadenas es mucho menos legible y mucho más frágil:

 $('<p class="blue slider" id="' + variable + i + '" title="' + variable + '">This is a ' + variable + '</p>').appendTo(obj); 

Si bien el primer ejemplo será más lento que el segundo, es probable que las ventajas de una mayor claridad superen las diferencias nominales en todas las aplicaciones, excepto las más sensibles al rendimiento.

Además, la sintaxis idiomática es resistente a la inyección de caracteres especiales. Por ejemplo, en el segundo ejemplo, el símbolo de cita en atributos cerrados prematuramente variable . Sigue siendo posible realizar la codificación adecuada por tu cuenta , incluso si no se recomienda porque es propenso a errores.

Chats

Charla sobre jQuery con otros usuarios:

Alternativas / Competidores

Otras bibliotecas famosas de javascript:

Repositorios públicos:

  • cdnjs es un proyecto comunitario orientado a la infraestructura en la nube que actualmente utiliza ~ 1,143,000 sitios web en todo el mundo.
  • jsdelivr - CDN igualmente libre y de código abierto para cdnjs.

Etiquetas relacionadas