Páginas

▼
▼

miércoles, 21 de agosto de 2019

jQuery Hola mundo

Veamos el típico 'Hola mundo' con jQuery versión 3.x.

Podemos ver el código en el siguiente enlace.

HTML

En el head llamamos a la librería jQuery mediante una primera línea de script.
Existen tres sitios donde habitualmente encontraremos que se llama a la librería.
  1. A la propia página de jQuery
  2. A la página de GoogleApis
  3. A nuestro proyecto porque ya tengamos descargada la versión que nos interese en nuestro servidor
Existen dos formas de hacer referencia a la librería
  1. Comprimida o minificada
  2. Descomprimida
Por versiones, podemos solicitar la última versión estable en la página de jQuery y en la de GoogleApis o bien podemos solicitar una versión en concreto.

Veamos algunos casos.
  • Última versión estable de jQuery desde la página de Google, comprimida
    • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  • Última versión estable de jQuery desde la página de Google, descomprimida
    • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  • Última versión desde la página de jQuery, comprimida o minificada
    • <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  • Una versión concreta desde la página de jQuery, comprimida
    • <script src="https://code.jquery.com/jquery-3.4.1.min.js"</script>

 <!DOCTYPE html>  
  <html>  
   <head>  
    <meta charset="utf-8">  
    <title>jQuery hola mundo</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
    <script type="text/javascript" src="script.js"></script>  
   </head>  
  <body>  
   <h1>Comenzando con jQuery</h1>  
  </body>  
  </html>

JavaScript + jQuery

Existen cuatro formas de comenzar el archivo de JavaScript con extensión js que contiene una función de jQuery que permite ejecutar el código encerrado entre sus llaves después de haber cargado el DOM. Esto es, primero se espera a que se cargue el DOM, con todas sus etiquetas del body, y luego se ejecuta el código jQuery encerrado entre sus llaves {}. De las cuatro formas la recomendada por su sencillez es la siguiente.

 $(function() {  
  alert("Hola mundo");  
 });

Otra forma muy habitual y que veremos que se utiliza mucho es la siguiente. En todas estas versiones se consigue que el código JS se ejecute después de haberse cargado el DOM. Esto es, el código JavaScript y jQuery se ejecuta después de que se hubieran cargado las etiquetas del body del código HTML.

 $(document).ready(function() {  
  alert("Hola mundo");  
 });

En la siguiente captura de pantalla de la guía de la versión 3.0 podemos ver las cuatro formas admitidas para comenzar con jQuery dentro del archivo js de JavaScript. De las cuatro formas la recomendada es la primera.

  1. $(fn);
  2. $().ready(fn);
  3. $(document).ready(fn);
  4. $("selector").ready(fn);
En la cuarta forma cuando dice "selector" se refiere a por ejemplo una etiqueta como h1 que se carga en el DOM. Por lo que quedaría así: $('h1').ready(fn);
en

No hay comentarios:

Publicar un comentario