Empezando con jQuery

Download jquery eBook

Observaciones

jQuery es una biblioteca de JavaScript que simplifica las operaciones DOM, el manejo de eventos, AJAX y las animaciones. También se encarga de muchos problemas de compatibilidad del navegador en los motores DOM y JavaScript subyacentes.

Cada versión de jQuery se puede descargar desde https://code.jquery.com/jquery/ en formatos comprimidos (minified) y sin comprimir.

Versiones

Versión Notas Fecha de lanzamiento
1.0 Primer lanzamiento estable 2006-08-26
1.1 2007-01-14
1.2 2007-09-10
1.3 Sizzle introducido en el núcleo 2009-01-14
1.4 2010-01-14
1.5 Gestión de devolución de llamada diferida, reescritura del módulo ajax 2011-01-31
1.6 Ganancias de rendimiento significativas en los métodos attr() y val() 2011-05-03
1.7 Nuevas API de eventos: on() y off() . 2011-11-03
1.8 Sizzle reescrito, animaciones mejoradas y $(html, props) flexibilidad. 2012-08-09
1.9 Eliminación de interfaces obsoletas y limpieza de código 2013-01-15
1.10 Se incorporaron correcciones de errores y diferencias reportadas de los ciclos beta 1.9 y 2.0 2013-05-24
1.11 2014-01-24
1.12 2016-01-08
2.0 Se eliminó el soporte de IE 6–8 para mejorar el rendimiento y reducir el tamaño 2013-04-18
2.1 2014-01-24
2.2 2016-01-08
3.0 Aceleraciones masivas para algunos selectores personalizados jQuery 2016-06-09
3.1 No más errores silenciosos 2016-07-07

Empezando

Crea un archivo hello.html con el siguiente contenido:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 

Demo en vivo en JSBin

Abra este archivo en un navegador web. Como resultado, verá una página con el texto: Hello, World!

Explicación del código

  1. Carga la biblioteca jQuery desde el CDN jQuery:

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
     

    Esto introduce la variable global $ , un alias para la función jQuery y el espacio de nombres.

    Tenga en cuenta que uno de los errores más comunes que se cometen al incluir jQuery es no cargar la biblioteca ANTES de otros scripts o bibliotecas que puedan depender o hacer uso de ella.

  1. Ofrece una función que se ejecutará cuando se detecte que el DOM ( Modelo de objeto de documento ) está "listo" por jQuery:

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
     
  1. Una vez que el DOM está listo, jQuery ejecuta la función de devolución de llamada que se muestra arriba. Dentro de nuestra función, solo hay una llamada que hace 2 cosas principales:

    1. Obtiene el elemento con el atributo id igual a hello (nuestro selector #hello ). Usar un selector como el argumento pasado es el núcleo de la funcionalidad y el nombramiento de jQuery; la biblioteca entera esencialmente evolucionó a partir de la extensión document.querySelectorAll MDN .

    2. Establezca el text() dentro del elemento seleccionado en Hello, World! .

      <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
       

Para más información consulte la página de documentación de jQuery .

Evitar las colisiones entre espacios de nombres.

Las bibliotecas que no sean jQuery también pueden usar $ como alias. Esto puede causar interferencia entre esas bibliotecas y jQuery.

Para liberar $ para usar con otras bibliotecas:

jQuery('#hello').text('Hello, World!');
 

Después de llamar a esta función, $ ya no es un alias para jQuery . Sin embargo, aún puede usar la variable jQuery para acceder a las funciones de jQuery:

jQuery('#hello').text('Hello, World!');
 

Opcionalmente, puede asignar una variable diferente como un alias para jQuery:

jQuery('#hello').text('Hello, World!');
 

A la inversa, para evitar que otras bibliotecas interfieran con jQuery, puede ajustar su código jQuery en una expresión de función invocada de inmediato (IIFE) y pasar jQuery como argumento:

jQuery('#hello').text('Hello, World!');
 

Dentro de este IIFE, $ es un alias solo para jQuery.

Otra forma sencilla de asegurar el alias $ de jQuery y asegurarse de que DOM esté listo :

jQuery('#hello').text('Hello, World!');
 

Para resumir,

  • jQuery.noConflict() : $ ya no se refiere a jQuery, mientras que la variable jQuery hace.
  • var jQuery2 = jQuery.noConflict() - $ ya no hace referencia a jQuery, mientras que la variable jQuery hace y la variable jQuery2 .

Ahora, existe un tercer escenario: ¿qué jQuery2 si queremos que jQuery esté disponible solo en jQuery2 ? Utilizar,

var jQuery2 = jQuery.noConflict(true)

Esto da como resultado que ni $ ni jQuery refieran a jQuery.

Esto es útil cuando se deben cargar varias versiones de jQuery en la misma página.

jQuery('#hello').text('Hello, World!');
 

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Incluir etiqueta de script en el encabezado de la página HTML

Para cargar jQuery desde el CDN oficial, vaya al sitio web de jQuery. Verás una lista de diferentes versiones y formatos disponibles.

Página de jQuery CDN que indica las versiones de jQuery disponibles

Ahora, copie la fuente de la versión de jQuery, que desea cargar. Supongamos que desea cargar jQuery 2.X , haga clic en la etiqueta descomprimida o minificada que le mostrará algo como esto:

Se seleccionó la etiqueta de script emergente con la versión jQuery

Copie el código completo (o haga clic en el icono de copia) y péguelo en el <head> o <body> de su html.

La mejor práctica es cargar cualquier biblioteca de JavaScript externa en la etiqueta de cabecera con el atributo async . Aquí hay una demostración:

<!DOCTYPE html>
    <html>
      <head>
         <title>Loading jquery-2.2.4</title>
         <script src="https://code.jquery.com/jquery-2.2.4.min.js" async></script>
      </head>
      <body>
          <p>This page is loaded with jquery.</p>
      </body>
   </html>
 

Cuando utilice un atributo async tenga en cuenta que las bibliotecas de javascript se cargan y ejecutan de forma asíncrona tan pronto como estén disponibles. Si se incluyen dos bibliotecas donde la segunda biblioteca depende de la primera, en este caso, si la segunda biblioteca se carga y se ejecuta antes de la primera biblioteca, puede generar un error y la aplicación puede fallar.

jQuery Namespace ("jQuery" y "$")

jQuery es el punto de partida para escribir cualquier código jQuery. Se puede usar como una función jQuery(...) o una variable jQuery.foo .

$ es un alias para jQuery y los dos pueden intercambiarse entre sí (excepto cuando se ha utilizado jQuery.noConflict(); consulte Evitar colisiones de espacios de nombres ).

Suponiendo que tenemos este fragmento de HTML -

jQuery("#demo_div").text("Demo Text!");
 

Podríamos usar jQuery para agregar algo de contenido de texto a este div. Para hacer esto podríamos usar la función jQuery text() . Esto podría escribirse usando jQuery o $ . es decir

jQuery("#demo_div").text("Demo Text!");
 

O

jQuery("#demo_div").text("Demo Text!");
 

Ambos resultarán en el mismo HTML final -

jQuery("#demo_div").text("Demo Text!");
 

Como $ es más conciso que jQuery , generalmente es el método preferido para escribir código jQuery.

jQuery usa selectores de CSS y en el ejemplo anterior se usó un selector de ID. Para obtener más información sobre los selectores en jQuery, consulte los tipos de selectores .

Cargando jQuery vía consola en una página que no lo tiene.

A veces, uno tiene que trabajar con páginas que no usan jQuery mientras que la mayoría de los desarrolladores están acostumbrados a tener jQuery mano.

En tales situaciones, se puede usar la consola Chrome Developer Tools ( F12 ) para agregar manualmente jQuery en una página cargada ejecutando lo siguiente:

var j = document.createElement('script');
j.onload = function(){ jQuery.noConflict(); };
j.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(j);
 

La versión que desea puede diferir de la anterior ( 1.12.4 ) aquí puede obtener el enlace que necesita .

Cargando plugins jQuery con espacios de nombre

Normalmente, al cargar complementos, asegúrese de incluir siempre el complemento después de jQuery.

<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>
 

Si debe usar más de una versión de jQuery, asegúrese de cargar el (los) complemento (s) después de la versión requerida de jQuery seguido de un código para configurar jQuery.noConflict(true) ; luego cargue la próxima versión de jQuery y sus complementos asociados:

<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>
 

Ahora, al inicializar los complementos, deberá utilizar la versión jQuery asociada.

<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>
 

Es posible usar solo una función de documento listo para inicializar ambos complementos, pero para evitar confusiones y problemas con cualquier código jQuery adicional dentro de la función de documento listo, sería mejor mantener las referencias separadas.

El objeto jQuery

Cada vez que se llama a jQuery, utilizando $() o jQuery() , internamente está creando una new instancia de jQuery . Este es el código fuente que muestra la nueva instancia:

var $div = $("#myDiv");//populate the jQuery object with the result of the id selector
var div = $div[0];//access array-like structure of jQuery object to get the DOM Element
 

Internamente, jQuery se refiere a su prototipo como .fn , y el estilo utilizado aquí para crear instancias internas de un objeto jQuery permite que ese prototipo quede expuesto sin el uso explícito de new por parte del llamante.

Además de configurar una instancia (que es la forma en que se expone la API de jQuery, como .each , children , filter , etc.), jQuery interno también creará una estructura similar a una matriz para que coincida con el resultado del selector (siempre que algo más que nada, undefined , null o similar fue pasado como argumento). En el caso de un solo elemento, esta estructura similar a una matriz mantendrá solo ese elemento.

Una demostración simple sería encontrar un elemento con un id y luego acceder al objeto jQuery para devolver el elemento DOM subyacente (esto también funcionará cuando varios elementos coincidan o estén presentes).

var $div = $("#myDiv");//populate the jQuery object with the result of the id selector
var div = $div[0];//access array-like structure of jQuery object to get the DOM Element
 

Stats

1343 Contributors: 38
Friday, June 16, 2017
Licenciado bajo: CC-BY-SA

No afiliado a Stack Overflow
Rip Tutorial: info@zzzprojects.com

Descargar eBook