Comenzando con jQuery

Empezando

Cree un archivo hola.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>

[Demostración en vivo en JSBin] (http://jsbin.com/sipuwoxono/1/edit?html, salida)

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

Explicación del código

  1. Carga la biblioteca jQuery desde jQuery CDN:

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

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

Tenga en cuenta que uno de los errores más comunes que se cometen al incluir jQuery no puede cargar la biblioteca ANTES de cualquier otro script o bibliotecas que pueden depender o hacer uso de él.

  1. Aplaza la ejecución de una función cuando jQuery detecta que el DOM (Document Object Model) está [“ready”][documentready]:

    // When the `document` is `ready`, execute this function `...`
    $(document).ready(function() { ... });
    
    // A commonly used shorthand version (behaves the same as the above)
    $(function() { ... });
    
  2. 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:

  3. Obtiene el elemento con el atributo id igual a hola (nuestro selector #hello). El uso de un selector como argumento pasado es el núcleo de la funcionalidad y el nombre de jQuery; toda la biblioteca esencialmente evolucionó a partir de la extensión de document.querySelectorAllMDN.

  4. Establezca el text() dentro del elemento seleccionado en ¡Hola, mundo!.

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

Para obtener más información, consulte la página jQuery - Documentación jQuery - Documentación.

Evitar colisiones de espacios de nombres

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

Para liberar $ para su uso 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 alias para jQuery:

var jqy = jQuery.noConflict();
jqy('#hello').text('Hello, World!');

Por el contrario, para evitar que otras bibliotecas interfieran con jQuery, puede envolver su código jQuery en una [expresión de función inmediatamente invocada (IIFE)] (https://www.wikiod.com/es/javascript/funciones#Expresiones de funciones invocadas inmediatamente -function-expressions#t=201607152249399289216) y pase 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 hace referencia a jQuery, mientras que la variable jQuery sí lo hace.
  • var jQuery2 = jQuery.noConflict() - $ ya no hace referencia a jQuery, mientras que la variable jQuery sí lo hace y también la variable jQuery2.

Ahora, existe un tercer escenario: ¿Qué pasa si queremos que jQuery esté disponible solo en jQuery2? Usar,

var jQuery2 = jQuery.noConflict(verdadero)

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

Esto es útil cuando se cargan 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/evitar-conflictos-otras-bibliotecas/

Espacio de nombres jQuery (“jQuery” y “$”)

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

$ es un alias de jQuery y, por lo general, los dos se pueden intercambiar entre sí (excepto cuando se haya utilizado jQuery.noConflict(); - consulte Evitar colisiones de espacios de nombres).

Suponiendo que tenemos este fragmento de HTML:

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

Es posible que queramos 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 -

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

Ambos darán como resultado 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 tipos de selectores.

1: https://www.wikiod.com/es/jquery/comenzando-con-jquery#Evitar colisiones de espacios de nombres 2: https://api.jquery.com/text/#text2 3: https://www.wikiod.com/es/jquery/selectores#Tipos de selectores

Cargando jQuery a través de la 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 a 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), puede obtener el enlace para [uno que necesita aquí] 1.

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á una lista de diferentes versiones y formatos disponibles.

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

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

La etiqueta de secuencia de comandos emergente con la versión de jQuery está seleccionada

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

La mejor práctica es cargar cualquier biblioteca de JavaScript externa en la etiqueta principal 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 el 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 biblioteca, en este caso, si la segunda biblioteca se carga y ejecuta antes que la primera, entonces puede generar un error y la aplicación puede fallar.

El objeto jQuery

Cada vez que se llama a jQuery, usando $() o jQuery(), internamente se crea una nueva 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í de instanciar internamente un objeto jQuery permite que ese prototipo se exponga sin el uso explícito de nuevo por parte de la persona que llama.

Además de configurar una instancia (que es cómo se expone la API de jQuery, como .each, child, filter, etc.), internamente jQuery también creará una estructura similar a una matriz para que coincida con el resultado. del selector (siempre que se haya pasado como argumento algo distinto de nada, undefined, null o similar). En el caso de un solo elemento, esta estructura similar a una matriz contendrá solo ese elemento.

Una demostración simple sería encontrar un elemento con una identificación 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 complementos de jQuery con espacio de nombres

Por lo general, 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 los complementos después de la versión requerida de jQuery seguida del código para establecer [jQuery.noConflict(true)](http:/ /api.jquery.com/jQuery.noConflict/); 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á usar 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 lista para documentos para inicializar ambos complementos, pero para evitar confusiones y problemas con cualquier código jQuery adicional dentro de la función lista para documentos, sería mejor mantener las referencias separadas.