Fundamentos de jQuery: Selector y la función jQuery

Como hemos definido en artículos anteriores, jQuery es una librería, una estructura sobre la cual vamos a trabajar y que nos simplificará el uso de JavaScript. Es por ello, que no es considerado un lenguaje como tal, ya que es dependiente, sin embargo su léxico y sentencias son distintas y mucho más entendibles a simple vista.

En esencia, el funcionamiento de jQuery se centra en la recuperación de elementos de nuestro documento para poder realizar operaciones sobre o con ellos.

Una declaración de jQuery estará compuesta por una expresión que tendrá la función de identificar o rastrear dichos elementos para poder manipularlos, a esa expresión se le da el nombre de Selector.

Selectores en jQuery

Para aquellos que ya se encuentran familiarizados con el uso de CSS, resultará más sencillo poder entender lo que es un Selector y como dichas expresiones describen un grupo de elementos en base a sus atributos o su colocación en el documento.

Cuando CSS fue introducido para separar el diseño del contenido, fue necesario idear una manera de agrupar a los elementos y llamarles desde una hoja de estilo externa, esto fue lo que motivo a crear los selectores que representarían de forma concisa los elementos.

En base a esto podemos definir que un selector como “h2 a” nos sirve para representar a un grupo de elementos < a > que se anidan dentro de un elemento de título < h2 >, es decir cuando tengamos una estructura como la siguiente

<h2><a href="#">Hola</a> Mundo</h2>

el selector “h2 a” nos servirá para operar de manera especifica sobre la palabra “Hola” de la expresión.

Lo equivalente sucede al usar jQuery, este hace uso de los mismos selectores para poder aplicar un efecto sobre un elemento o para manipular su información, es por ello que si utilizamos como Selector un ID (#identificador) la operación tendrá efecto únicamente sobre un elemento, mientras que si utilizamos una Class (.clase) se podrá aplicar a un grupo entero.

La diferencia entre CSS y jQuery radica en la manera en que se manejan dichos selectores, ya que en la librería de JavaScript los trataremos como parámetros de la función jQuery(), o en su defecto de la función $() que es una forma corta de invocar a la librería.

Función jQuery()

La función jQuery() puede ser vista como un puente entre el contenido del documento y las funciones depositadas en la librería, es la manera en que inicializamos las instrucciones y es la encargada de buscar todos aquellos elementos en el DOM que coincidan con los selectores que mandamos como parámetro.

Dicha función devuelve un objeto compuesto por los elementos que coincidieron, y que contendrá una larga serie de métodos definidos en la librería, los cuales pueden aplicarse al grupo de elementos para interactuar con ellos y realizar las operaciones que necesitamos.

También existe un alias el cual se encuentra definido en la función $(), debido a su brevedad, simplicidad y rápida escritura, esta función es mucho más utilizada que la propia jQuery(). Aunque su uso sigue siendo punto de discusión, es claro su éxito y su predilección al momento de invocar a la librería por parte de muchos desarrolladores, como en todo tú tendrás la última elección y podrás aplicar la manera que más te agrade.

Con todo esto podemos definir la manera en que nuestra expresión quedará estructurada, cualquiera de las siguientes dos formas jQuery(selector) ó $(selector), puede ser utilizada. Si tomamos como referencia el ejemplo que utilizamos en CSS, la expresión jQuery(“h2 a”) nos devolvería un grupo de elementos < a > anidados en un título < h2 >, el cual podemos manipular u operar mediante las funciones definidas en el framework.

Como aclaramos antes, la función jQuery() o $() no hace nada por sí sola, para poder realizar alguna operación debemos combinarla con algún método ya definido dentro de la librería y para ello la estructura debe tomar la siguiente forma:

jQuery("selector").método(parámetros);

En nuestro siguiente artículo hablaremos de estos métodos, la manera en que podemos aplicarlos y como interactúan con el grupo de elementos contenidos en el documento DOM.

Conclusión

En este artículo hemos estudiado las bases de jQuery, su función primaria y los selectores que definirán el objeto de respuesta, con esta encapsulación podremos utilizar los métodos definidos en la librería los cuales serán vistos con más precisión en artículos posteriores.

Podemos concluir que con jQuery seremos capaces de aprovechar nuestros conocimientos previos en tecnologías como CSS y HTML, gracias a esta librería podremos simplificar enormemente JavaScript y nuestro código trabajará de una manera más coherente.