Primer contacto

¿Cómo utilizar jQuery en nuestros proyectos?

Lo primero que tenemos que hacer es llamarlo para que esté presente y nos pueda ayudar. Para enlazar con él utilizamos el siguiente código:

<script type="text/javascript" src="js/jquery.js">
</script>

En este ejemplo 'js' es la carpeta donde, en la actividad anterior, hemos guardado el fichero 'jquery.js'.

Si queremos optimizar y agilizar el proceso, en vez de cargar este archivo que tenemos en nuestro disco duro, podemos utilizar el 'jQuery.js' de la página oficial de jQuery. El proceso se agiliza ya que seguramente el usuario lo tendrá almacenado localmente en el caché del navegador al haberlo utilizado en el acceso a alguna otra web que use jQuery.

<script src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>

Aunque en este ejemplo se esté especificando la versión 1.7.2 y actualmente ya existen otras posteriores, las opciones habituales se incluyen en todas las versiones y no se borran las versiones antiguas, por lo que no es necesario modificar el código.

¿Dónde copiamos este código?

El código anterior tiene que incluirse en -cualquier parte del <head>- dentro de cada html que incorpore algún código de jQuery.

Con este código le estamos diciendo a jQuery que venga ya que queremos ir pidiéndole ayuda. Así, con este código jQuery está presente pero necesitamos un teléfono con el que darle órdenes.

¿Cómo me comunico con jQuery?

Para hablar con jQuery es necesario asegurarse de que jQuery ya se ha cargado completamente y de que ya está al otro lado del teléfono, sino estaríamos hablando solos.

Es decir, al cargarse la página html es necesario que jQuery esté disponible en el momento en el que se necesita. Si mandamos una orden a jQuery y éste todavía no está preparado (ya que todavía no ha cargando el fichero .js) daría un error. Para evitar ésto tenemos que incluir un código para que sólo realice estas funciones si jQuery está ya disponible.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    var x=$("document");
    x.ready(inicio);
        function inicio(){
        // Aquí escribiremos nuestras órdenes a jQuery
        }
</script>

Código entero

Listo para copiar y pegar en un documento nuevo...

<!doctype html>
  <html>
      <head>
         <meta charset="utf-8"/>   
         <title>Primer contacto con jQuery</title>
         <style type="text/css">
         </style>

         <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

         <script type="text/javascript">
            var x=$("document");
            x.ready(inicio);
          
            function inicio(){
                // Escribir aquí nuestras órdenes a jQuery
            }
         </script>
     </head>
  <body>

  </body>
  </html>