Sintaxis Básica de comandos jQuery

Cuando programamos utilizando jQuery, la perspectiva desde la que debemos afrontar los problemas es diferente a la que se utiliza cuando se programa código JavaScript estándar.

El principal concepto que hemos de tener en cuenta cuando utilicemos jQuery es la idea de encuentra algo, haz algo.  

La explicación a esta afirmación en un aspecto puramente práctico es, primero selecciona un conjunto de elementos del DOM de un documento HTML y sobre ellos ejecuta una o varias acciones (consulta sus propiedades, modifica sus estilos, y un largo etcétera de posibilidades) por medio de los métodos que te ofrece jQuery.

Estructura de un comando de jQuery

Siempre que vayamos a hacer uso de la librería jQuery, deberemos utilizar una sintaxis estructurada, dividida en fragmentos fácilmente diferenciables:

• Función jQuery
• Un selector como parámetro
• Uno o varios métodos de la librería
• Opcionalmente, parámetros del método.

Vamos a analizar la estructura de dos comandos jQuery básicos, tanto en la llamada directa a la función jQuery como la llamada por medio del alias $. Los comandos que vamos a analizar son los siguientes:

 <script type="text/javascript">
$(document).ready( function(){
    $("p") .css ("background-color","red");
    jQuery("p") .css ("background-color","red");
    
    $("input") .attr ("value","25");
    jQuery("input") .attr ("value","25");
});
</script>

Función jQuery

El primer fragmento de un comandos jQuery será una llamada a la función jQuery o el alias $. Cualquiera de las dos opciones es válida, pero generalmente, utilizaremos el alias por dos motivos:

• requiere menor cantidad de código
• "salta" mucho más a la vista, siendo muy útil para diferenciarlo del código JavaScript estándar.

Si observamos nuestro fragmento de código, observamos que en cada uno de los comandos hacemos uso de uno u otro método para llamar a la librería:

 ...
    $("p") .css ("background-color","red");
    jQuery("p") .css ("background-color","red");
    
    $("input") .attr ("value","25");
    jQuery("input") .attr ("value","25");
...

Un selector

Al hacer la llamada a la función jQuery, deberemos proporcionarle un parámetro que permita indicarle a la librería los elementos de la página sobre los que actuará. Este parámetro es conocido como "selector", una cadena de texto que indicará a la librería el conjunto de elementos del DOM sobre los que aplicar la acción indicada.

El uso de selectores dota a jQuery de una increíble potencia a la hora de acotar los elementos sobre los que vamos a interactuar. Una vez domines y perfecciones el uso de esta técnica, conseguirás ejecutar comandos tan precisos como sean necesarios.

Volvamos al fragmento de código que estamos analizando. En este caso son dos los selectores utilizados:

• El selector "p"
• El selector "input"

Los selectores utilizados son bastante sencillos. En los dos primeros comandos, el selector obtendrá los elementos "p" de la página, y los dos segundos, los elementos de tipo "input". 

 ...
    $("p") .css ("background-color","red");
    jQuery("p") .css ("background-color","red");
    
    $("input") .attr ("value","25");
    jQuery("input") .attr ("value","25");
...

Al definir un selector, podremos utilizar comillas simples - $( 'input')  - o comillas dobles -  $( "input")  -. Cualquiera de las dos sintaxis será válida.

Un método de la librería

El siguiente paso es indicar la acción que vamos a realizar sobre cada uno de los elementos seleccionados. Existe una gran cantidad de métodos soportados por la librería: show , hide , css , hasClass , addClass ...

Una vez más, vamos a observar el código de nuestro ejemplo.

En los dos primeros comandos, utilizamos el método "css", con el que modificamos una propiedad CSS de los elementos obtenidos por el selector. En los dos siguientes, el método utilizado es el método "attr" que nos permitirá modificar un atributo de los elementos.

 ...
    $("p") .css ("background-color","red");
    jQuery("p") .css ("background-color","red");
    
    $("input") .attr ("value","25");
    jQuery("input") .attr ("value","25");
...

Parámetros del método

Por último, proporcionaremos a este método un conjunto de parámetros, que serán facilitados al método para configurar las acciones que el método aplicará sobre el conjunto de elementos que coincidan con el selector especificado.

En esta ocasión, vamos a ver los comandos por separado.

 ...
$("p") .css ("background-color","red");
jQuery("p") .css ("background-color","red");
...

En los primeros dos comandos, se aplica el método "css" sobre todos los elementos "p" del documento, pasándole a este método los parámetros "background-color" y "red".

 ...
$("input") .attr ("value","25");
jQuery("input") .attr ("value","25");
...

Este otro comando, aplicará el método "attr" sobre los elementos "input" del documento. En este caso, los dos parámetros asignados a este método son "value" y "25".

Algunos de los métodos de la librería no requerirán de ningún parámetro. Otros, podrán recibir un conjunto muy amplio de parámetros, y modificar una gran cantidad de propiedades sobre los objetos seleccionados y otros, incluso podrán recibir como parámetro una función JavaScript. El formato y número de parámetros puede variar de un método a otro e incluso, podremos hacer llamadas a un mismo método con diferente número de parámetros y orden de los mismos. Independientemente de esta característica, todos ellos cumplirán con la estructura básica de los comandos jQuery.

Estructura Básica de un comando

Encadenar varios métodos

Los métodos de la librería jQuery pueden ser de dos diferentes tipos según su naturaleza:

• Setters o establecedores, con los que se podrá establecer una propiedad a todos los elementos incluidos en la selección.
• Getters u obtenedores, que podrán devolver un valor concreto o un objeto jQuery referenciando una selección.

Cuando, como resultado de la llamada a un método obtenemos un objeto jQuery tendremos la posibilidad de encadenar varias llamadas a métodos de la librería, aplicándose éstas sobre la selección devuelta por el método anterior.

 $('input').hide().val('Indique un dato');

Analicemos este fragmento de código. El selector $('input')  seleccionará los elementos de tipo input, se les aplicará el método hide()  que los ocultará y finalmente se establecerá en el atributo value de todos ellos el valor 'Indique un dato'.

Para obtener un código más limpio y comprensible, podremos utilizar saltos de línea entre estos métodos, terminando siempre la secuencia de los mismos con el símbolo punto y coma.

 $('input')
    .hide()
    .val('Indique un dato');

Cuando uno de los métodos utilizados modifique una selección, los siguientes métodos utilizados en la llamada solamente actuarán sobre la selección resultado. En el siguiente fragmento de código, aplicaremos el método first()  a la selección, consiguiendo así reducirla al primero de los elementos de la misma.

 $('input')
    .first()
    .hide()
    .val('Indique un dato');

Una vez filtrado el primer elemento, los siguientes métodos únicamente actuarán sobre la nueva selección.

jQuery nos ofrece un método por el que podremos volver a la selección previa. Esta acción podrá realizarse por medio del método $.fn.end

 $('input')
    .first()
        .hide()
    .end()
    .val('Indique un dato');

En el código anterior, el primer elemento de tipo input será ocultado, y el método end() restablecerá la selección a todos los elementos de tipo input del documento para que les sea establecido el valor 'Indique un dato'.

Esta píldora formativa está extraída del Curso online de jQuery.