Conceptos de JQuery

Cuando uno utiliza una librería debe adaptarse a sus mecanismos de uso, el tratar de llevar los conocimientos que tenemos sobre un tema y aplicarlos a la fuerza en dicha librería puede ser frustrante. Lo más adecuado es ir viendo cual es la mecánica de trabajar con dicha librería con problemas muy sencillos e ir complicándolo a medida que entendemos su funcionamiento.

Dispongamos el problema trivial de capturar el evento de un control HTML de tipo button, lo desarrollaremos utilizando la metodología tradicional accediendo directamente a las funciones del DOM y luego empleando la librería jQuery:

pagina1.html

<html>
<head>
<title>Problema</title>
</head>
<body>
<h2>Captura del evento click de un control HTML de tipo button.</h2>
<a href="pagina2.html">Método tradicional con las funciones 
del DOM </a><br>
<a href="pagina3.html">Utilizando la librería jQuery</a><br>
</body>
</html>

pagina2.html

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="funciones1.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>

funciones1.js

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var boton1=document.getElementById('boton1');
  addEvent(boton1,'click',presionBoton,false);
}

function presionBoton(e)
{
  alert('se presionó el botón');
}

function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

Todo lo anterior no debería haber problemas de entendimiento, en caso de estar olvidado del manejo del DOM sería conveniente refrescar los conceptos en el tutorial de DHTMLYa.

pagina3.html

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones2.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>

Lo primero que tenemos en cuenta es que debemos importar la librería:

Como se encuentra en la carpeta superior a donde se encuentra el archivo pagina3.html ponemos src="../jquery.js", si estuviera en la misma carpeta disponemos src="jquery.js", es decir directamente el nombre de la librería.

Siempre debemos disponer esta inclusión de la librería antes de incluir los otros archivos *.js que utilizan esta librería, es por eso el orden:

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

funciones2.js

var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  var x;
  x=$("#boton1");
  x.click(presionBoton)
}

function presionBoton()
{
  alert("Se presionó el botón");
}

En este archivo (funciones2.js) comienza nuestro estudio de la librería jquery

La función principal de esta librería se llama $.

A la función $ le podemos pasar distintos valores como veremos (en la primer llamada le pasamos la referencia del objeto document del DOM y en la segunda el id del control button):

x=$(document);
...
x=$("#boton1");

Esta función nos devuelve un objeto de tipo jQuery.

El primer método que nos interesa de esta clase es el ready:

var x;
x=$(document);
x.ready(inicializarEventos);

El método ready tiene como parámetro un nombre de función. Esta función se ejecutará cuando todos los elementos de la página estén cargados. Es importante notar que solo pasamos el nombre de la función y no disponemos los paréntesis abiertos y cerrados al final.

El código de esta función:

function inicializarEventos()
{
  var x;
  x=$("#boton1");
  x.click(presionBoton)
}

Utilizamos nuevamente la función $ para crear un objeto de la clase jQuery pero ahora asociándolo al botón (esto lo hacemos pasando el id del control button precediéndolo por el caracter # y encerrado entre paréntesis. Finalmente llamamos al método click pasándo como parámetro el nombre de la función que se ejecutará al presionar dicho botón.

2 - Nueva manera de programar JavaScript con jQuery.

Retornar