Sería difícil exagerar el impacto que tuvo jQuery en el desarrollo web después de que la biblioteca JavaScript de código abierto se publicara hace más de 15 años. Una caja de herramientas que creó una nueva forma de abreviar la programación de JavaScript, que de otro modo sería compleja, jQuery sigue cumpliendo el lema de sus desarrolladores: «Escribe menos, haz más»
Incluso hoy en día, jQuery es popular entre los desarrolladores profesionales, mientras que otros con poca o ninguna experiencia en programación pueden utilizar la biblioteca para añadir funcionalidad avanzada a sus sitios web. Esto es lo que hay detrás de una de las mayores historias de éxito del desarrollo web.
¿Cómo es de Popular jQuery?
La encuesta 2022 de StackOverflow sobre las tecnologías web utilizadas por los desarrolladores profesionales reveló que de los más de 45.000 encuestados, algo más del 29% trabajaba con jQuery. Entre las bibliotecas de JavaScript, jQuery era la segunda después de React.js, la biblioteca desarrollada por primera vez en Facebook (ahora Meta) en 2011 y que ahora es adoptada por más del 44% de esos desarrolladores.
Pero los proyectos actuales de los desarrolladores web no cuentan toda la historia. Según las tendencias tecnológicas de Internet de BuiltWith, jQuery se encontrará en más de 80 millones de sitios web en 2022. Esto supone una enorme ventaja sobre los casi 11 millones de sitios web que utilizan React.
La biblioteca jQuery lleva más de una década integrada en el core de WordPress, por lo que está disponible de forma inmediata para cientos de temas que dependen de su funcionalidad para crear sitios web dinámicos. Drupal es otro popular sistema de gestión de contenidos que ha incluido jQuery entre sus componentes principales. Independientemente de cuáles sean las tecnologías favoritas de los desarrolladores en la actualidad, jQuery sigue siendo la biblioteca JavaScript más utilizada en la web.
Una Breve Historia de jQuery
La batalla de los navegadores se ha librado desde el comienzo de la web, y los desarrolladores siempre han sido víctimas. En 2006, cuando el desarrollador web John Resig presentó jQuery, el navegador Internet Explorer de Microsoft era el líder indiscutible del mercado — lo que suponía un retroceso de la ventaja de Netscape menos de una década antes.
En ese momento, el nuevo Firefox de Mozilla tenía una cuota de mercado del 10% (frente al 84% de Microsoft) y Safari de Apple acababa de aparecer en escena. Chrome de Google, el actual líder del mercado, no existía. Los programadores de JavaScript, como Resig, se esforzaban regularmente por escribir código que funcionara en todos los navegadores.
Su nueva biblioteca jQuery se creó para abordar las diferencias en la forma en que esos navegadores implementaban JavaScript y ayudar a los desarrolladores a escribir menos código mientras realizaban tareas como éstas:
- Manipular los elementos HTML de una página web
- Modificar dinámicamente el CSS
- Responder a eventos como clics del ratón y pulsaciones de teclas
- Gestionar peticiones Ajax para actualizar el contenido de una página sin recargarla
Tras el lanzamiento de la biblioteca por parte de Resig, otros desarrolladores construyeron aplicaciones sobre jQuery, a menudo compartiendo su trabajo como plugins para poner la nueva funcionalidad a disposición de todos.
¿Qué es jQuery UI?
jQuery UI es una popular colección de plugins diseñados para mejorar las interfaces de usuario. Se considera un complemento «oficial» de la biblioteca principal de jQuery y añade una serie de efectos especiales y widgets como selectores de fecha, barras de progreso, deslizadores, rotadores y paneles con pestañas o plegables.
¿Cuál es la Diferencia entre jQuery y JavaScript?
Es importante saber que jQuery es JavaScript. Cuando utilizas jQuery, estás trabajando con instancias de objetos JavaScript que reflejan las convenciones de nomenclatura de jQuery para los métodos (funciones) y las propiedades. Echemos un vistazo a vanilla JavaScript y a jQuery, abordando la misma tarea.
Aquí tienes un fragmento de HTML en alguna parte de una página web:
<p id="target">Old text</p>El código vainilla JavaScript que puede encontrar el elemento <p> con el id «target» — y luego reemplazar el texto entre las etiquetas — podría tener este aspecto:
const content = document.getElementById( "target" );
content.textContent = "New text";El método getElementById() de JavaScript devuelve un objeto que incluye el HTML y el contenido del texto del párrafo con el «objetivo» id. El objeto se asigna a la referencia constante content, y luego su propiedad textContent se cambia a «Nuevo texto».
JavaScript permite encadenar métodos, lo que hace posible conseguir lo anterior con una sola sentencia:
document.getElementById( "target" ).textContent = "New text"; No es de extrañar, pues, que también puedas encadenar acciones de jQuery. Para cambiar el «Texto antiguo» por el «Texto nuevo» utilizando jQuery, podrías hacer lo siguiente
$( "#target" ).text( "New text" );El signo del dólar ($) es un alias corto para jQuery, y ( "#target" ) es un ejemplo de selector jQuery. En este caso, el selector busca un elemento HTML con el id de nuestro párrafo de destino. El método jQuery text() se encadena para que «Nuevo texto» sea el contenido del párrafo.
Cómo Utilizar jQuery en Tu Sitio Web
Añade jQuery a tu sitio web enlazando el código de la biblioteca desde las páginas del sitio. La biblioteca jQuery puede estar en tu servidor web o en una red de distribución de contenidos (CDN) de acceso público. El sitio web oficial de jQuery puede conectarte con las últimas versiones de la biblioteca.
La biblioteca jQuery está disponible en JavaScript minificado (comprimido ) para que se cargue rápidamente en producción, o sin comprimir para facilitar la lectura y la depuración.
También escribirás al menos un poco de JavaScript para invocar a jQuery y abordar tareas específicas de tu aplicación web. En el HTML de las páginas de tu sitio web, puedes enlazar la biblioteca jQuery y el archivo que contiene tu código de la siguiente manera
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>En este ejemplo, la versión 3.6.0 de jQuery y el código específico de tu sitio en un archivo llamado mi_script.js se encuentran en el directorio/js/ del sitio web. La biblioteca jQuery suele incluirse en la sección <head> de una página web. Es habitual que los desarrolladores coloquen algunos enlaces a archivos JavaScript, incluido el código que depende de la biblioteca jQuery, cerca de la parte inferior de una página, normalmente justo antes del cierre de la etiqueta <body>. El código específico del sitio que invoque a jQuery debe aparecer siempre después del enlace a la propia biblioteca.
Enlace a jQuery en una CDN
La biblioteca jQuery a menudo se descargará más rápido cuando se entrega por un CDN robusto. jQuery es tan omnipresente en la web que hay una alta probabilidad de que un visitante de tu sitio ya tenga la biblioteca en caché en su navegador para múltiples CDNs. Podemos modificar el fragmento de HTML anterior para hacer uso de la red de entrega de contenido JavaScript de Cloudflare de esta manera:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>Invocar jQuery en tu Aplicación
Cuando escribas tu aplicación jQuery, una buena práctica es confirmar que la página web ha terminado de cargarse antes de que tu código comience a ejecutarse. Puedes comprobarlo utilizando el método ready(), que entrega tu código cuando el documento se ha cargado, de esta manera:
$(document).ready(function() {
// Your jQuery application will go here
});Este inicio de una aplicación jQuery es tan común que los desarrolladores de la biblioteca han ideado una sintaxis aún más breve:
$(function() {
// Your jQuery application will go here
});Seleccionar Elementos en el DOM con jQuery
La base de la mayoría de las aplicaciones jQuery es la capacidad de atravesar la estructura de una página web como un objeto (el modelo de objetos del documento, o DOM) y dirigirse a varios elementos dentro del HTML. Seleccionar un elemento (o un grupo de elementos) es el paso previo a hacer algo con ese elemento, como cambiar su apariencia o actualizar el contenido cercano. Los selectores de jQuery se dirigen a las propiedades del DOM de varias maneras. Las más comunes son:
- Por nombre de elemento HTML (etiqueta)
- Por las propiedades CSS (incluidos los ID y los nombres de las clases)
- Por la posición relativa de un elemento dentro del DOM
- Por el valor del contenido de los campos del formulario
- Por el estado actual de un elemento
Aquí tienes algunos ejemplos:
// Select all HTML paragraph tags in a document
$( "p" );
// Select the element with the ID "myID"
$( "#myID" );
// Select all elements with the CSS class name "myClass"
$( ".myClass" );
// Select all input, textarea, select, and button elements in a form
$( ":input" );
// Select the children of some other element
// (In this case, the entries in an unordered list)
$( "ul > li" );
// Select all anchors with the rel attribute “nofollow”
$( "a[rel='nofollow']" );
// Select all checkboxes in a “checked” state
$( "input:checked" )Puedes combinar los selectores de jQuery para una orientación más específica. Ejemplos:
// HTML paragraph tags with the CSS class “myClass”
$( "p.myClass" );
// HTML paragraphs with the text “Kinsta” anywhere within them
$( "p:contains('Kinsta')" );
// HTML div tags that have at least one paragraph tag as a descendent
$( "div:has(p)" );
// The first entry in any unordered list with the CSS class “myList”
$( "ul.myList li:first" ); Manipular el DOM con jQuery
Ahora que sabes cómo seleccionar varios elementos dentro de una página web, puedes modificarlos utilizando métodos jQuery. Como se ha mencionado anteriormente, a menudo puedes encadenar estas acciones para hacer mucho con poca programación. Algunos ejemplos:
// Select the element with the ID “alert” and add a red background
$( "#alert" ).css( "background-color", "red" );
// Select the element with the ID “alert” and add the class “urgent” to its markup
$( "#alert" ).addClass( "urgent" );
// Find any paragraph with the class “myName” and make its content “Kinsta”
$( "p.myName" ).text( "Kinsta" );
// Like the statement above, but with support for HTML markup
$( "p.myName" ).html( "<strong>Kinsta</strong>" );
// Add the attribute/value rel=”nofollow” to every anchor
$( "a" ).attr( "rel", "nofollow" );
// Hide the element with the ID “myDiv” (but keep it in the DOM)
$( "#myDiv" ).hide();
// Make the element hidden above visible again
$( "#myDiv" ).show();
// Remove from the DOM everything INSIDE the element with the ID “myDiv”
$( "#myDiv" ).empty();
// Remove from the DOM the entire element with the ID “myDiv”
$( "#myDiv" ).remove();Manejar Eventos con jQuery
El tipo de manipulación del DOM descrito anteriormente pasaría desapercibido para los visitantes de la web si todo ocurriera tan pronto como se cargara una página. Por eso, tu aplicación jQuery puede detectar y responder a eventos como clics del ratón, movimientos del ratón, pulsaciones de teclas, etc., para crear una experiencia verdaderamente receptiva.
Detectar los Clics del Ratón con jQuery
Responder al clic de un ratón (o a un toque en un dispositivo de pantalla táctil) es una tarea común para las aplicaciones web. Hemos combinado algo de jQuery y HTML en un ejemplo que también aprovecha el objeto event incorporado en jQuery, que contendrá información útil sobre nuestro «evento de clic»:
<script>
// Invoke jQuery
$(document).ready(function () {
// Assign “click” method to all button elements
// Our function passes the built-in object with event details
$( "button" ).click(function ( event ) {
// Make sure all button backgrounds are white
$( "button" ).css( "background-color", "white" );
// Change our H2 text to report the ID of the clicked button
$( "#buttonReport" ).text("You clicked " + event.target.id);
// Set the background color of the clicked button to red
$( "#" + event.target.id ).css("background-color", "red");
});
});
</script>
<h2 id="buttonReport">Click a button!</h2>
<button id="Button1">Button 1</button>
<button id="Button2">Button 2</button>
<button id="Button3">Button 3</button> El resultado:
Detectar el Movimiento del Ratón con jQuery
Conocer la ubicación actual del puntero del ratón sobre una página web es útil en muchas aplicaciones web responsivas. Aquí tienes un ejemplo de cómo puede ayudar jQuery:
<script>
$(document).ready(function () {
// Detect when the mouse is over a div with the mouseover() method
$( "div" ).mouseover(function ( event ) {
// Make the div under the mouse grey and taller
$( "#" + event.target.id ).css({
"background-color" : "lightgrey",
"height" : "8em"
});
});
// Detect when the mouse moves away with the mouseout() method
$( "div" ).mouseout(function ( event ) {
// Return the size and color of the div to its original state
$( "#" + event.target.id ).css({
"background-color" : "white",
"height" : "4em"
});
});
});
</script>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>El ejemplo anterior también muestra cómo se puede utilizar el método css() de jQuery para establecer varias propiedades CSS a la vez. Este es el resultado:
Manejando Peticiones Ajax con jQuery
Gran parte de la popularidad de jQuery es su capacidad para simplificar las peticiones Ajax que las aplicaciones web pueden utilizar para intercambiar datos con los servidores sin recargar las páginas. La biblioteca tiene muchas herramientas para gestionar las peticiones Ajax de datos en formato de texto plano, HTML, XML y JSON. El enfoque de jQuery es ofrecer opciones abreviadas para las tareas más comunes. Una de las más sencillas de la caja de herramientas Ajax es el método load():
<div id="myContent">Replace Me</div>
<button>Load Content</button>
<script>
// Request the file content.php from the server after a button is clicked.
// Place the results in the HTML element with the ID “myContent”
$( "button" ).click( function (){
$( "#myContent" ).load( "content.php" );
});
</script>En él ocurren muchas cosas con sólo tres líneas de JavaScript y dos elementos HTML. El resultado sería algo parecido a esto:
Cómo Utilizar jQuery UI
Si añades plugins de jQuery UI a tus proyectos, tendrás acceso a muchos efectos especiales y widgets construidos sobre la biblioteca principal de jQuery. Aquí tienes un ejemplo de uso de jQuery UI para añadir un calendario emergente como selector de fecha dentro de un formulario web.
Primero, añade la biblioteca jQuery UI y su CSS de apoyo a tus páginas web. En este ejemplo, enlazamos las bibliotecas en el CDN de JavaScript de Cloudflare junto con la biblioteca principal de jQuery:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />A continuación, añade un campo de formulario input dentro de tu HTML y, mediante JavaScript, adjunta el método datepicker() de jQuery UI utilizando un selector:
<label for="myDate">Date:</label>
<input type="text" id="myDate" name="myDate">
<script>
$( function() {
$( "#myDate" ).datepicker();
} );
</script> Al hacer clic en el campo de formulario input se lanzará el selector de fecha:
Cómo Usar jQuery en WordPress
La biblioteca jQuery viene incluida en WordPress y es un componente clave de muchos temas de WordPress. Incluso si tu tema actual no utiliza ya jQuery, puedes aprovechar el registro de dependencias de JavaScript dentro de WordPress para poner en marcha todo tu código jQuery.
Lo harás editando el archivo functions.php que forma parte de tu tema. Una actualización del tema puede sobrescribir ese archivo, por lo que es una buena práctica proteger los cambios primero creando un tema hijo y editando el archivo functions.php allí. Como mínimo, crea una copia de seguridad manual de WordPress antes de proceder.
Registrar tu JavaScript jQuery en functions.php
Puedes utilizar un cliente FTP o SFTP para transferir el archivo functions.php entre tu escritorio y el servidor web para editarlo. Los administradores de WordPress también pueden modificar functions.php dentro del CMS:
En el panel de control, selecciona Apariencia > Editor de Archivos de Temas.
Haz clic en Funciones del Tema en el menú de la izquierda.
El contenido de tu archivo functions.php dependerá del tema actualmente activo. Arriba están las funciones del tema Twenty Twenty-One. Puedes añadir tu propio script jQuery a la configuración de tu sitio utilizando la función de utilidad de WordPress wp_enqueue_script(). Aquí tienes la plantilla de esa función:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );Y esto es lo que significa todo esto:
- $handle: El nombre amigable vinculado a este script. (La biblioteca del núcleo de jQuery ya está registrada en WordPress con el handle jquery)
- $src: La ruta y el nombre del archivo o URL que apunta al código fuente de JavaScript.
- $deps: Los controladores de cualquier otra fuente de JavaScript que este script requiera para funcionar correctamente.
- $ver: El número de versión que hayas asignado al código fuente de JavaScript.
- $in_footer: Si se establece como verdadero, el script se añadirá cerca de la parte inferior de la página. En caso contrario, los scripts se colocarán en el bloque
<head>.
Después de poner en cola un script, se añade a una página con la función add_action(). Compruébalo todo en acción añadiendo un bloque como éste en la parte inferior de tu archivo functions.php:
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );Arriba, al nuevo script de jQuery se le asigna el controlador my_script, y la función de utilidad de WordPress get_template_directory_uri() ayuda a construir una URL para el archivo JavaScript dentro de los directorios del tema.
Un conjunto de otros controladores indica a WordPress que my_script depende del núcleo de jQuery, del core de jQuery-UI y del plugin jQuery-UI datepicker Finalmente, hemos asignado al script el número de versión 1.0 y hemos pedido que se coloque cerca del final de la página.
Cómo Cargar jQuery desde un CDN en WordPress
Sabemos que jQuery puede servirse desde varias redes de distribución de contenidos. También sabemos que, de entrada, WordPress quiere cargar jQuery y muchos plugins de jQuery desde el sistema de archivos del servidor web local.
Puedes cambiar ese comportamiento eliminando la información de configuración registrada con el manejador jquery existente y reescribiéndola. Para ello, añade un bloque de código en functions.php que comience con la función wp_deregister_script():
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_deregister_script('jquery');
wp_register_script(
'jquery',
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
null,
'3.6.0',
False
);
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );El controlador de jquery se ha asignado a la biblioteca jQuery en la CDN de Cloudflare y sigue siendo una dependencia para el mi_script local. Puedes utilizar el mismo enfoque para extraer otros componentes de jQuery — como jQuery-UI — de una CDN.
Para más información sobre jQuery y WordPress, tenemos una guía para solucionar problemas de configuración que pueden dar lugar a errores como «jQuery No Está Definido»
Resumen
Durante más de 15 años, la biblioteca de código abierto jQuery ha ayudado a los desarrolladores a crear aplicaciones web ricas y dinámicas con la menor programación posible. Hoy en día, jQuery se utiliza en más sitios web que cualquier otra biblioteca JavaScript.
También se incluye en algunos sistemas de gestión de contenidos populares, como WordPress. Además, un sólido ecosistema de plugins de jQuery creados por otros programadores de JavaScript ayuda a los desarrolladores con distintos niveles de experiencia a añadir funcionalidad avanzada a sus sitios web.
Y si quieres crear sitios web y aplicaciones con jQuery, echa un vistazo a los planes de alojamiento Gestionado de WordPress de Kinsta y a las soluciones de Alojamiento de Aplicaciones y Bases de Datos.
