jQuery Tutorial => Empezando con jQuery

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

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 -

<div id="demo_div" class="demo"></div>

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!");

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

Ambos resultarán en el mismo HTML final -

<div id="demo_div" class="demo">Demo Text!</div>

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 .

Empezando

Crea un archivo hello.html con el siguiente contenido:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>

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

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.

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

// When the `document` is `ready`, execute this function `...`
$(document).ready(function() { ... });
 
// A commonly used shorthand version (behaves the same as the above)
$(function() { ... });

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! .
```
#    ↓ - Pass a `selector` to `$` jQuery, returns our element
$('#hello').text('Hello, World!');
#             ↑ - Set the Text on the element
```

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

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.

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:

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.

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.noConflict();

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:

var jqy = jQuery.noConflict();
jqy('#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:

(function($) {
    $(document).ready(function() {
        $('#hello').text('Hello, World!');
    });
})(jQuery);

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(function( $ ) { // DOM is ready
   // You're now free to use $ alias
   $('#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.

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
    var jQuery1 = jQuery.noConflict(true);
</script>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
    // Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.
</script>

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

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 .

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:

// Define a local copy of jQuery
jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
}

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

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-3.1.1.min.js"></script>
<script src="some-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>
// newer jQuery document ready
jQuery(function($){
  // "$" refers to the newer version of jQuery
  // inside of this function

  // initialize newer plugin
  $('#new').newerPlugin();
});

// older jQuery document ready
$oldjq(function($){
  // "$" refers to the older version of jQuery
  // inside of this function

  // initialize plugin needing older jQuery
  $('#old').olderPlugin();
});
</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.

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

jQuery Tutorial
Empezando con jQuery

Buscar..