En estos artículos del Manual de jQuery estamos profundiando en el Core o núcleo de la librería. Dentro de este bloque uno de los puntos más importantes que debemos tratar es función jQuery, también conocida como función dólar o simplemente $().

Qué es $() en jQuery

El funcionamiento de toda la librería jQuery se basa en la función $(). Como dicen en la propia documentación del framework, "Todo en jQuery está basado en esta función o la usa de alguna forma".

La función $() también se llama "Función jQuery" y sirve para hacer varias cosas, según los parámetros que le pasemos. El uso más simple es seleccionar elementos o grupos de elementos de una página web, pero también sirve para crear elementos sobre la marcha o para hacer un callback de funciones.

Sinónimos de $

Esta función se puede invocar de dos maneras distintas:

• Mediante la palabra jQuery(), lo que nos ofrece una manera muy fiable de utilizarla
• Mediante el símbolo dólar $(), lo que sería una manera resumida de utilizarla y que nos ahorrará bastantes caracteres en el código y a la postre, tiempo de descarga y peso de los scripts de la página.

Puedes usar tanto una manera como otra de invocar a la función jQuery. Por tanto, los siguientes códigos serían equivalentes:

jQuery(document) // equivalente
$(document) // equivalente

¿Cuándo usar una u otra función jQuery?

Generalmente usarás siempre $(), ya que es más resumido. Sin embargo la clave está en que a veces pueden haber otras librerías que ocupen el identificador "$" para otras cosas.

De modo que:

• Usarás generarlmente $()
• Si existe la posibilidad que "$" se haya usado para otras cosas, entonces usarás jQuery(), que estará disponible con toda certeza.

A continuación vamos a ver los distintos usos de esta función, según los parámetros que reciba.

Función jQuery enviando un selector y un contexto

Este uso de la función sirve para seleccionar elementos de la página. Recibe una expresión y se encarga de seleccionar todos los elementos de la página que corresponden con ella, devolviendo un objeto jQuery donde se encuentran todos los elementos de la página seleccionados y extendidos con las funcionalidades del framework.

Este uso lo hemos realizado ya en numerosas ocasiones a lo largo del manual.

$("#elemento")

Adicionalmente, podemos pasarle un contexto de manera opcional. Si no se le envía un contexto, selecciona elementos del documento completo, si indicamos un contexto conseguiremos seleccionar elementos sólo dentro de ese contexto.

Para explicar el uso del contexto como segundo parámetro vamos a verlo con un ejemplo. Supongamos que tenemos este código HTML:

<ul id="lista">
  <li>Item lista</li>
  <li>Item Lista 2</li>
</ul>
<ul>
  <li>Elem</li>
</ul>

Ahora, si usamos el $() enviando como parámetro "li", seleccionaremos todos los LI de la página, en total 3 elementos LI.

$('li') // seleccionamos tres elementos <li>

Ahora, si usamos $() enviando el parámetro "li", como antes, pero además le enviamos como contexto "#lista", nos entregará solamente los LI que hay dentro de la UL que tiene el id="lista".

$('li', "#lista") // seleccionamos dos elementos <li>

console.log($('li').length);
console.log($('li', '#lista').length);

En resumen: La expresión que debemos enviar obligatoriamente como primer parámetro sirve de selector. En ese parámetro tenemos que utilizar una notación especial para poder seleccionar elementos de diversas maneras y la verdad es que las posibilidades de selección con jQuery son muy grandes, como veremos en el tema de "Selectores".

Este paso de selección de elementos es básico en cualquier script jQuery, para poder actuar en cualquier lugar de la página y hacer nuestros efectos y utilidades Javascript sobre el lugar que deseemos.

Veamos otro uso de esta función:

let elem1 = $("#elem1");

Con esta línea de código habremos seleccionado un elemento de la página que tiene el identificador (atributo id del elemento HTML) "elem1" y lo hemos guardado en una nueva variable llamada elem1. La variable elem1 guardará entonces lo que se llama el objeto jQuery con el cual podremos trabajar, solicitando métodos o funciones de dicho objeto, para trabajar con el elemento seleccionado.

let elem1 = jQuery("#elem1");

Luego, podríamos hacer cualquier cosa con ese elemento seleccionado, como lo siguiente:

let elem1 = $("#elem1");
elem1.css("background-color", "#ff9999");

Este método css() no forma parte del core, pero sirve para cambiar atributos CSS de un elemento, entre otras cosas. Así pues, con esa línea cambiaríamos el color de fondo del elemento seleccionado anteriormente, que habíamos guardado en la variable elem1.

Ahora veamos otro ejemplo de la selección de elementos con la función dólar.

let divs = $("div");
divs.css("font-size", "32pt");

Aquí seleccionamos todas las etiquetas DIV de la página, y les colocamos un tamaño de letra de 32pt.

En el siguiente código podemos encontrar una página que incluye varios ejemplos que hemos abordado hasta aquí:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Función jQuery</title>
</head>
<body>
  <h1>Función jQuery</h1>
  <p>Esta función permite seleccionar elementos de la página.</p>
  <ul id="lista">
    <li>Item lista</li>
    <li>Item Lista 2</li>
  </ul>
  <ul>
    <li>Elem</li>
    <li>Elem 2</li>
  </ul>

  <div id="elem1">Este elemento se llama elem1</div>
  <div id="elem2">Este otro elemento se llama elem2</div>

  <script src="../../js/jquery-3.6.3.js"></script>
  <script>
    $(document).ready( function() {
      
      console.log($('li').length);
      console.log($('li', '#lista').length);

      let elem1 = $("#elem1");
      //podríamos haber escrito: let elem1 = jQuery("#elem1");
      elem1.css("background-color", "#ff9999");

      let divs = $("div");
      //podríamos haber escrito: let elem1 = jQuery("#elem1");
      divs.css("font-size", "32pt");

    });
  </script>
</body>
</html>

Si queremos, podemos utilizar el segundo parámetro opcional, que es el contexto. Con él podríamos conseguir seleccionar elementos que pertenecen a una zona concreta de nuestro documento. Por defecto el contexto es la página entera, pero lo podemos restringir de esta manera:

let inputs = $("input",document.forms[0]);
inputs.css("color", "red");

Con la primera línea conseguimos seleccionar todos los elementos INPUT que pertenecen al primer formulario de la página. Se devolverá un objeto jQuery que contiene todos los input seleccionados. Con la segunda línea, invocando el método css() sobre el objeto jQuery recibido, estaríamos cambiando el color del texto de esos elementos. Gracias al contexto no se seleccionarían los INPUT de otros formularios.

Ahora por completar un poco más estas notas, veamos otro ejemplo en el que seleccionamos todos los párrafos (etiqueta P), pero restringimos el contexto únicamente los que están en un DIV con id="div1".

let inputs = $("input",document.forms[0]);
inputs.css("color", "red");

En la segunda línea lanzamos el método hide() sobre el objeto jQuery que contiene los párrafos seleccionados, con lo que conseguimos que se oculten.

Contamos con un video que nos habla de la funcion $ en jQuery.

Hasta este momento hemos visto el uso de la función jQuery más fundamental y usado por tanto con más frecuencia. Ahora veremos cómo esta función dólar $(), puede tener otras aplicaciones útiles, cuando recibe parámetros distintos a los que vimos anteriormente.

Función jQuery pasando un HTML

Una posibilidad de trabajar con la función jQuery es enviarle un string con un código HTML. Esto crea esos elementos en la memoria de Javascript, que luego podríamos volcar en la página. El número de elementos creados y su contenido será el que se indique en el string.

var nuevosElementos = $("<div>Elementos que creo en <b>tiempo de ejecución</b>.<h1>En ejecución...</h1></div>");

Esto nos creará en la variable nuevosElementos los elementos HTML que hemos especificado en el string. Luego podríamos hacer lo que queramos con ellos, como colocarlos en la página con el método appendTo(), por ejemplo de esta manera:

nuevosElementos.appendTo("body");

Veamos el código completo de una página que hace uso de este ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Función jQuery</title>
</head>
<body>
  <p>Esto es el cuerpo de la página, que tiene poca cosa...</p>

  <script src="../../js/jquery-3.6.3.js"></script>
  <script>
    $(document).ready( function() {
      
      var nuevosElementos = $("<div>Estos elementos son nuevos...</b>.<h1>Título...</h1></div>");
      nuevosElementos.appendTo("body");

    });
  </script>
</body>
</html>

Ahora, dejamos el link para ver el ejemplo en una página aparte.

Función jQuery pasando elementos

Otro posible valor que se le puede enviar a la función jQuery es un elemento o una jerarquía de elementos del DOM, para extenderlos con las funcionalidades que aporta el framework para los elementos.

Por ejemplo:

var doc = $(document.body);
doc.css("background-color", "#ff8833");

Con la primera línea creamos una variable llamada documento, a la que asignamos el valor que devuelve el método $() enviando el parámetro document.body.

Con el código anterior obtenemos un objeto que es el cuerpo de la página (document.body) al que le hemos agregado todas las funcionalidades del framework jQuery para los elementos.

Así pues, en la línea siguiente, invocamos el método css() sobre la variable "doc", que es el propio documento de la página extendido. Por eso el método css(), que es de jQuery, funciona sobre ese objeto.

Algo como esto no funcionaría porque estaríamos intentando lanzar un método de jQuery directamente sobre el objeto DOM sin haberlo extendido:

document.body.css("background-color", "#ff8833"); // Esto no funcionaría!!!! no hemos extendido el objeto del DOM

No funcionará porque no podemos llamar a un método jQuery sobre un objeto DOM, si es que no lo hemos extendido con la función $().

Conclusión

Hasta aquí hemos visto la mayoría de las posibilidades que existen para trabajar con la función jQuery. Realmente a lo largo de este manual ya la habíamos utilizado muchas veces y en lo sucesivo continuaremos usándola, ya que cualquier cosa que deseemos hacer en una página web con la librería va a depender en algún momento de invocar a $() en cualquiera de sus variantes.

Nos ha quedado pendiente un último uso de jQuery que veremos a continuación, cuando analicemos las distintas maneras de ejecutar código con "ready", cuando la página está lista.