Empezando con JQuery

Así ya está todo listo para empezar a trastear con JQuery.

                Método JQuery() ó $()

Lo primero que hay que aprender es el conocido método JQuery() o más usado como $(). Este método da acceso a las funciones de JQuery y a través de él se podrá por tanto acceder a dichas funciones, seleccionar elementos del DOM, etc.

Una llamada a JQuery se basa en cuatro partes:

JQuery(‘p’).css(‘color’,’red’);

Ó

$(‘p’).css(‘color’,’red’);

  1. Método JQuery() ó $().
  2. Selector: Es el que indica qué estamos cogiendo (a qué elemento del DOM se accede) que en este caso sería ‘p’ (se coge cualquier elemento del DOM de tipo p).
  3. Acción: Indica qué acción se realiza. En este caso css() indica que se está llamando a la acción css que se encarga de modificar atributos del css del elemento seleccionado.
  4. Parámetros: Son los parámetros de llamada de la acción.

                Esperando a que el documento esté listo $(document).ready

Antes de poder interactuar con los elementos DOM de la página se debe esperar a que dicha página esté cargada. Para ello JQuery provee la acción ready.

$(document).ready(function() {

alert(«Hola JQuery»);

});

En este caso está el método $(), el selector que es el documento (document), la acción ready y el parámetro que en este caso es la función (function())que muestra un alert. Así pues, cuando el documento esté totalmente cargado mostrará un alert con el mensaje “Hola JQuery”.

También se puede usar la orden reducida:

$(function() { alert(«Hola JQuery»); });

Pero no es recomendable ya que de la otra forma se ve más claramente a qué se está haciendo referencia.

                Selectores sencillos

El selector más sencillo es aquel en el que se indica a la función $() qué tipo de elemento se quiere obtener. Por ejemplo, si se tiene una tabla como esta:

<table id=»tablaInicial» class=»claseTable»>
<thead>
<tr>
<td>Columna 1</td>
<td>Columna 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
</tbody>
</table>

Si se quieren seleccionar todas las filas simplemente habría que ejecutar la siguiente orden:

$(‘tr’);

ó

$(«tr»);

Aunque poner comillas simples es equivalente a poner comillas dobles, por no confundir estas últimas con las del string se suelen utilizar las comillas simples.

Lo mismo si se quiere coger divs, inputs, etc.

$(‘input’);

$(‘div’);

Evidentemente esto no hace nada con los elementos seleccionados ya que no hay una acción definida.

Además de esta selección simple se pueden seleccionar elementos según un identificador o según su clase. Los valores usados son los mismos que en CSS. Así si se quiere seleccionar la tabla según su id (tablaInicial), se ejecutaría la siguiente orden:

$(‘#tablaInicial’);

La almohadilla (#) es la utilizada para indicar el id del elemento.

Para seleccionar por clase se usa el punto (.):

$(‘.claseTabla’);

Y la selección no se queda aquí ya que una vez obtenido un elemento se puede navegar por sus hijos, así por ejemplo se obtienen todas las filas de las tablas con clase “claseTabla”:

$(‘.claseTabla tr’);

Y así la fila cuyo identificador es “trId1” y está en la tabla con identificador “tablaInicial”:

$(‘#tablaInicial tr#trId1’);

Por último, se pueden seleccionar varios elementos a la vez:

$(‘p,div,input’);