{"id":57189,"date":"2022-09-09T09:55:27","date_gmt":"2022-09-09T07:55:27","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=57189&#038;post_type=knowledgebase&#038;preview_id=57189"},"modified":"2025-10-01T21:31:27","modified_gmt":"2025-10-01T19:31:27","slug":"que-es-jquery","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/","title":{"rendered":"\u00bfQu\u00e9 es jQuery? Un Vistazo a la Biblioteca JavaScript M\u00e1s Utilizada de la Web"},"content":{"rendered":"<p>Ser\u00eda dif\u00edcil exagerar el impacto que tuvo <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/#jquery\" rel=\"noopener\">jQuery<\/a> en el desarrollo web despu\u00e9s de que la biblioteca JavaScript de c\u00f3digo abierto se publicara hace m\u00e1s de 15 a\u00f1os. Una caja de herramientas que cre\u00f3 una nueva forma de abreviar la <a href=\"https:\/\/kinsta.com\/es\/blog\/mejor-lenguaje-de-programacion-para-aprender\/#javascript\" rel=\"noopener\">programaci\u00f3n de JavaScript<\/a>, que de otro modo ser\u00eda compleja, jQuery sigue cumpliendo el lema de sus desarrolladores: \u00abEscribe menos, haz m\u00e1s\u00bb<\/p>\n<p>Incluso hoy en d\u00eda, jQuery es popular entre los desarrolladores profesionales, mientras que otros con poca o ninguna experiencia en programaci\u00f3n pueden utilizar la biblioteca para a\u00f1adir funcionalidad avanzada a sus sitios web. Esto es lo que hay detr\u00e1s de una de las mayores historias de \u00e9xito del <a href=\"https:\/\/kinsta.com\/web-development\/\" rel=\"noopener\">desarrollo web<\/a>.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>\u00bfC\u00f3mo es de Popular jQuery?<\/h2>\n<p>La encuesta 2022 de StackOverflow sobre las <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#most-popular-technologies-webframe-prof\">tecnolog\u00edas web utilizadas por los desarrolladores profesionales<\/a> revel\u00f3 que de los m\u00e1s de 45.000 encuestados, algo m\u00e1s del 29% trabajaba con jQuery. Entre las <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/#the-most-popular-javascript-libraries\">bibliotecas de JavaScript<\/a>, jQuery era la segunda despu\u00e9s de <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\" rel=\"noopener\">React.js<\/a>, la biblioteca desarrollada por primera vez en Facebook (ahora Meta) en 2011 y que ahora es adoptada por m\u00e1s del 44% de esos desarrolladores.<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/stackoverflow-2022-web-technologies-survey.png\" alt=\"Captura de pantalla con jQuery entre las tecnolog\u00edas m\u00e1s populares en la encuesta de desarrolladores de StackOverflow de 2022.\" width=\"1024\" height=\"490\"><figcaption class=\"wp-caption-text\">Frameworks y tecnolog\u00edas web populares en 2022. (Fuente de la imagen: <a href=\"https:\/\/survey.stackoverflow.co\/2022\/\" target=\"_blank\" rel=\"noopener noreferrer\">StackOverflow<\/a>)<\/figcaption><\/figure>\n<p>Pero los proyectos actuales de los desarrolladores web no cuentan toda la historia. Seg\u00fan las <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery\" target=\"_blank\" rel=\"noopener noreferrer\">tendencias tecnol\u00f3gicas de Internet<\/a> de BuiltWith, jQuery se encontrar\u00e1 en m\u00e1s de 80 millones de sitios web en 2022. Esto supone una enorme ventaja sobre los casi 11 millones de sitios web que utilizan React.<\/p>\n\n<p>La biblioteca jQuery lleva m\u00e1s de una d\u00e9cada integrada en el core de WordPress, por lo que est\u00e1 disponible de forma inmediata para cientos de <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/\" rel=\"noopener\">temas<\/a> que dependen de su funcionalidad para crear sitios web din\u00e1micos. <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-vs-drupal\/\" rel=\"noopener\">Drupal<\/a> es otro popular <a href=\"https:\/\/kinsta.com\/es\/blog\/sitema-de-gestion-de-contenido\/\" rel=\"noopener\">sistema de gesti\u00f3n de contenidos<\/a> que ha incluido jQuery entre sus componentes principales. Independientemente de cu\u00e1les sean las tecnolog\u00edas favoritas de los desarrolladores en la actualidad, jQuery sigue siendo la biblioteca JavaScript <em>m\u00e1s utilizada<\/em> en la web.<\/p>\n<h2>Una Breve Historia de jQuery<\/h2>\n<p>La <a href=\"https:\/\/kinsta.com\/es\/cuota-mercado-mundial-navegadores\/\" rel=\"noopener\">batalla de los navegadores<\/a> se ha librado desde el comienzo de la web, y los desarrolladores siempre han sido v\u00edctimas. En 2006, cuando el desarrollador web John Resig present\u00f3 jQuery, el navegador Internet Explorer de Microsoft era el <a href=\"https:\/\/www.visualcapitalist.com\/internet-browser-market-share\/\" target=\"_blank\" rel=\"noopener noreferrer\">l\u00edder indiscutible del mercado<\/a> \u2014 lo que supon\u00eda un retroceso de la ventaja de Netscape menos de una d\u00e9cada antes.<\/p>\n<p>En ese momento, el nuevo Firefox de Mozilla ten\u00eda 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\u00edder del mercado, no exist\u00eda. Los programadores de JavaScript, como Resig, se esforzaban regularmente por escribir c\u00f3digo que funcionara en todos los navegadores.<\/p>\n<p>Su nueva biblioteca jQuery se cre\u00f3 para abordar las diferencias en la forma en que esos navegadores implementaban JavaScript y ayudar a los desarrolladores a escribir menos c\u00f3digo mientras realizaban tareas como \u00e9stas:<\/p>\n<ul>\n<li>Manipular los <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">elementos HTML<\/a> de una p\u00e1gina web<\/li>\n<li>Modificar din\u00e1micamente el CSS<\/li>\n<li>Responder a eventos como clics del rat\u00f3n y pulsaciones de teclas<\/li>\n<li>Gestionar peticiones Ajax para actualizar el contenido de una p\u00e1gina sin recargarla<\/li>\n<\/ul>\n<p>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\u00f3n de todos.<\/p>\n<h3>\u00bfQu\u00e9 es jQuery UI?<\/h3>\n<p><a href=\"https:\/\/jqueryui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery UI<\/a>\u00a0es una <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery-UI\" target=\"_blank\" rel=\"noopener noreferrer\">popular colecci\u00f3n de plugins<\/a> dise\u00f1ados para mejorar las interfaces de usuario. Se considera un complemento \u00aboficial\u00bb de la biblioteca principal de jQuery y a\u00f1ade una serie de efectos especiales y widgets como selectores de fecha, barras de progreso, deslizadores, rotadores y paneles con pesta\u00f1as o plegables.<\/p>\n<h2>\u00bfCu\u00e1l es la Diferencia entre jQuery y JavaScript?<\/h2>\n<p><strong>Es importante saber que jQuery <em>es<\/em> JavaScript<\/strong>. Cuando utilizas jQuery, est\u00e1s trabajando con instancias de objetos JavaScript que reflejan las convenciones de nomenclatura de jQuery para los m\u00e9todos (funciones) y las propiedades. Echemos un vistazo a <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/#vanilla-javascript\">vanilla JavaScript<\/a>\u00a0y a jQuery, abordando la misma tarea.<\/p>\n<p>Aqu\u00ed tienes un fragmento de HTML en alguna parte de una p\u00e1gina web:<\/p>\n<pre><code class=\"language-html\">&lt;p id=\"target\"&gt;Old text&lt;\/p&gt;<\/code><\/pre>\n<p>El c\u00f3digo vainilla JavaScript que puede encontrar el elemento <code>&lt;p&gt;<\/code> con el <code>id<\/code> \u00abtarget\u00bb \u2014 y luego reemplazar el texto entre las etiquetas \u2014 podr\u00eda tener este aspecto:<\/p>\n<pre><code class=\"language-js\">const content = document.getElementById( \"target\" );\ncontent.textContent = \"New text\";<\/code><\/pre>\n<p>El m\u00e9todo <code>getElementById()<\/code> de JavaScript devuelve un objeto que incluye el HTML y el contenido del texto del p\u00e1rrafo con el \u00abobjetivo\u00bb <code>id<\/code>. El objeto se asigna a la referencia constante <code>content<\/code>, y luego su propiedad <code>textContent<\/code> se cambia a \u00abNuevo texto\u00bb.<\/p>\n<p>JavaScript permite encadenar m\u00e9todos, lo que hace posible conseguir lo anterior con una sola sentencia:<\/p>\n<pre><code class=\"language-js\"> document.getElementById( \"target\" ).textContent = \"New text\"; <\/code><\/pre>\n<p>No es de extra\u00f1ar, pues, que tambi\u00e9n puedas encadenar acciones de jQuery. Para cambiar el \u00abTexto antiguo\u00bb por el \u00abTexto nuevo\u00bb utilizando jQuery, podr\u00edas hacer lo siguiente<\/p>\n<pre><code class=\"language-js\">$( \"#target\" ).text( \"New text\" );<\/code><\/pre>\n<p>El signo del d\u00f3lar (<code>$<\/code>) es un alias corto para <code>jQuery<\/code>, y <code>( \"#target\" )<\/code> es un ejemplo de selector jQuery. En este caso, el selector busca un elemento HTML con el <code>id<\/code> de nuestro p\u00e1rrafo de destino. El m\u00e9todo jQuery <code>text()<\/code> se encadena para que \u00abNuevo texto\u00bb sea el contenido del p\u00e1rrafo.<\/p>\n<h2>C\u00f3mo Utilizar jQuery en Tu Sitio Web<\/h2>\n<p>A\u00f1ade jQuery a tu sitio web enlazando el c\u00f3digo de la biblioteca desde las p\u00e1ginas del sitio. La biblioteca jQuery puede estar en tu servidor web o en una <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-cdn\/\" rel=\"noopener\">red de distribuci\u00f3n de contenidos (CDN<\/a>) de acceso p\u00fablico. El sitio web oficial de jQuery puede conectarte con las <a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u00faltimas versiones de la biblioteca.<\/a><\/p>\n<p>La biblioteca jQuery est\u00e1 disponible en <a href=\"https:\/\/kinsta.com\/es\/blog\/minificar-javascript\/\">JavaScript minificado (comprimido<\/a> ) para que se cargue r\u00e1pidamente en producci\u00f3n, o sin comprimir para facilitar la lectura y la depuraci\u00f3n.<\/p>\n<figure style=\"width: 1017px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-official-download.jpg\" alt=\"Captura de pantalla del sitio web oficial de jQuery con un enlace de descarga resaltado.\" width=\"1017\" height=\"498\"><figcaption class=\"wp-caption-text\">El sitio web oficial de jQuery.<\/figcaption><\/figure>\n<p>Tambi\u00e9n escribir\u00e1s al menos un poco de JavaScript para invocar a jQuery y abordar tareas espec\u00edficas de tu aplicaci\u00f3n web. En el HTML de las p\u00e1ginas de tu sitio web, puedes enlazar la biblioteca jQuery y el archivo que contiene tu c\u00f3digo de la siguiente manera<\/p>\n<pre><code class=\"language-html\">&lt;script type=\"text\/javascript\" src=\"\/js\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" src=\"\/js\/my_script.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>En este ejemplo, la versi\u00f3n 3.6.0 de jQuery y el c\u00f3digo espec\u00edfico de tu sitio en un archivo llamado <strong>mi_script.js<\/strong> se encuentran en el directorio<code>\/js\/<\/code> del sitio web. La biblioteca jQuery suele incluirse en la secci\u00f3n <code>&lt;head&gt;<\/code> de una p\u00e1gina web. Es habitual que los desarrolladores coloquen algunos enlaces a archivos JavaScript, incluido el c\u00f3digo que depende de la biblioteca jQuery, cerca de la parte inferior de una p\u00e1gina, normalmente justo antes del cierre de la etiqueta <code>&lt;body&gt;<\/code>. El c\u00f3digo espec\u00edfico del sitio que invoque a jQuery debe aparecer siempre <strong>despu\u00e9s<\/strong> del enlace a la propia biblioteca.<\/p>\n<h3>Enlace a jQuery en una CDN<\/h3>\n<p>La biblioteca jQuery a menudo se descargar\u00e1 m\u00e1s r\u00e1pido cuando se entrega por un <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-cdn\/\">CDN robusto<\/a>. 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\u00e9 en su navegador para m\u00faltiples CDNs. Podemos modificar el fragmento de HTML anterior para hacer uso de la red de entrega de contenido JavaScript de Cloudflare de esta manera:<\/p>\n<pre><code class=\"language-html\">&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" src=\"\/js\/my_script.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<h3>Invocar jQuery en tu Aplicaci\u00f3n<\/h3>\n<p>Cuando escribas tu aplicaci\u00f3n jQuery, una buena pr\u00e1ctica es confirmar que la p\u00e1gina web ha terminado de cargarse antes de que tu c\u00f3digo comience a ejecutarse. Puedes comprobarlo utilizando el m\u00e9todo <code>ready()<\/code>, que entrega tu c\u00f3digo cuando el documento se ha cargado, de esta manera:<\/p>\n<pre><code class=\"language-js\">$(document).ready(function() {\n  \/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<p>Este inicio de una aplicaci\u00f3n jQuery es tan com\u00fan que los desarrolladores de la biblioteca han ideado una sintaxis a\u00fan m\u00e1s breve:<\/p>\n<pre><code class=\"language-js\">$(function() { \n  \/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<h3>Seleccionar Elementos en el DOM con jQuery<\/h3>\n<p>La base de la mayor\u00eda de las aplicaciones jQuery es la capacidad de atravesar la estructura de una p\u00e1gina web como un objeto (el <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/#the-javascript-dom\" rel=\"noopener\">modelo de objetos del documento, o DOM<\/a>) y dirigirse a varios elementos dentro del HTML. Seleccionar un elemento (o un grupo de elementos) es el paso previo a <em>hacer <\/em>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\u00e1s comunes son:<\/p>\n<ul>\n<li>Por nombre de elemento HTML (etiqueta)<\/li>\n<li>Por las propiedades CSS (incluidos los ID y los nombres de las clases)<\/li>\n<li>Por la posici\u00f3n relativa de un elemento dentro del DOM<\/li>\n<li>Por el valor del contenido de los campos del formulario<\/li>\n<li>Por el estado actual de un elemento<\/li>\n<\/ul>\n<p>Aqu\u00ed tienes algunos ejemplos:<\/p>\n<pre><code class=\"language-js\">\/\/ Select all HTML paragraph tags in a document\n$( \"p\" );\n\n\/\/ Select the element with the ID \"myID\"\n$( \"#myID\" );\n\n\/\/ Select all elements with the CSS class name \"myClass\"\n$( \".myClass\" );\n\n\/\/ Select all input, textarea, select, and button elements in a form\n$( \":input\" );\n\n\/\/ Select the children of some other element\n\/\/ (In this case, the entries in an unordered list)\n$( \"ul &gt; li\" ); \n\n\/\/ Select all anchors with the rel attribute \u201cnofollow\u201d\n$( \"a[rel='nofollow']\" ); \n\n\/\/ Select all checkboxes in a \u201cchecked\u201d state\n$( \"input:checked\" )<\/code><\/pre>\n<p>Puedes combinar los selectores de jQuery para una orientaci\u00f3n m\u00e1s espec\u00edfica. Ejemplos:<\/p>\n<pre><code class=\"language-js\">\/\/ HTML paragraph tags with the CSS class \u201cmyClass\u201d\n$( \"p.myClass\" ); \n\n\/\/ HTML paragraphs with the text \u201cKinsta\u201d anywhere within them\n$( \"p:contains('Kinsta')\" ); \n\n\/\/ HTML div tags that have at least one paragraph tag as a descendent\n$( \"div:has(p)\" ); \n\n\/\/ The first entry in any unordered list with the CSS class \u201cmyList\u201d \n$( \"ul.myList li:first\" ); <\/code><\/pre>\n<h3>Manipular el DOM con jQuery<\/h3>\n<p>Ahora que sabes c\u00f3mo seleccionar varios elementos dentro de una p\u00e1gina web, puedes modificarlos utilizando m\u00e9todos jQuery. Como se ha mencionado anteriormente, a menudo puedes encadenar estas acciones para hacer mucho con poca programaci\u00f3n. Algunos ejemplos:<\/p>\n<pre><code class=\"language-js\">\/\/ Select the element with the ID \u201calert\u201d and add a red background\n$( \"#alert\" ).css( \"background-color\", \"red\" ); \n\n\/\/ Select the element with the ID \u201calert\u201d and add the class \u201curgent\u201d to its markup\n$( \"#alert\" ).addClass( \"urgent\" ); \n\n\/\/ Find any paragraph with the class \u201cmyName\u201d and make its content \u201cKinsta\u201d\n$( \"p.myName\" ).text( \"Kinsta\" );\n\n\/\/ Like the statement above, but with support for HTML markup\n$( \"p.myName\" ).html( \"&lt;strong&gt;Kinsta&lt;\/strong&gt;\" ); \n\n\/\/ Add the attribute\/value rel=\u201dnofollow\u201d to every anchor\n$( \"a\" ).attr( \"rel\", \"nofollow\" );\n\n\/\/ Hide the element with the ID \u201cmyDiv\u201d (but keep it in the DOM)\n$( \"#myDiv\" ).hide(); \n\n\/\/ Make the element hidden above visible again\n$( \"#myDiv\" ).show();\n\n\/\/ Remove from the DOM everything INSIDE the element with the ID \u201cmyDiv\u201d\n$( \"#myDiv\" ).empty(); \n\n\/\/ Remove from the DOM the entire element with the ID \u201cmyDiv\u201d\n$( \"#myDiv\" ).remove();<\/code><\/pre>\n<h3>Manejar Eventos con jQuery<\/h3>\n<p>El tipo de manipulaci\u00f3n del DOM descrito anteriormente pasar\u00eda desapercibido para los visitantes de la web si todo ocurriera tan pronto como se cargara una p\u00e1gina. Por eso, tu aplicaci\u00f3n jQuery puede detectar y responder a eventos como clics del rat\u00f3n, movimientos del rat\u00f3n, pulsaciones de teclas, etc., para crear una experiencia verdaderamente receptiva.<\/p>\n<h4>Detectar los Clics del Rat\u00f3n con jQuery<\/h4>\n<p>Responder al clic de un rat\u00f3n (o a un toque en un dispositivo de pantalla t\u00e1ctil) es una tarea com\u00fan para las aplicaciones web. Hemos combinado algo de jQuery y HTML en un ejemplo que tambi\u00e9n aprovecha el objeto <code>event<\/code> incorporado en jQuery, que contendr\u00e1 informaci\u00f3n \u00fatil sobre nuestro \u00abevento de clic\u00bb:<\/p>\n<pre><code class=\"language-html\">&lt;script&gt;\n\/\/ Invoke jQuery\n$(document).ready(function () {\n    \/\/ Assign \u201cclick\u201d method to all button elements\n    \/\/ Our function passes the built-in object with event details\n    $( \"button\" ).click(function ( event ) { \n        \/\/ Make sure all button backgrounds are white\n        $( \"button\" ).css( \"background-color\", \"white\" );\n        \/\/ Change our H2 text to report the ID of the clicked button\n        $( \"#buttonReport\" ).text(\"You clicked \" + event.target.id); \n        \/\/ Set the background color of the clicked button to red \n        $( \"#\" + event.target.id ).css(\"background-color\", \"red\");\n    });\n}); \n&lt;\/script&gt;\n\n&lt;h2 id=\"buttonReport\"&gt;Click a button!&lt;\/h2&gt;\n&lt;button id=\"Button1\"&gt;Button 1&lt;\/button&gt;\n&lt;button id=\"Button2\"&gt;Button 2&lt;\/button&gt;\n&lt;button id=\"Button3\"&gt;Button 3&lt;\/button&gt; <\/code><\/pre>\n<p>El resultado:<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-detecting-mouse-clicks.png\" alt=\"Captura de pantalla que ilustra la detecci\u00f3n del clic del rat\u00f3n en varios botones.\" width=\"1024\" height=\"426\"><figcaption class=\"wp-caption-text\">Detecci\u00f3n de clics del rat\u00f3n.<\/figcaption><\/figure>\n<h4><strong>Detectar el Movimiento del Rat\u00f3n con jQuery<\/strong><\/h4>\n<p>Conocer la ubicaci\u00f3n actual del puntero del rat\u00f3n sobre una p\u00e1gina web es \u00fatil en muchas aplicaciones web responsivas. Aqu\u00ed tienes un ejemplo de c\u00f3mo puede ayudar jQuery:<\/p>\n<pre><code class=\"language-html\">&lt;script&gt;\n$(document).ready(function () { \n    \/\/ Detect when the mouse is over a div with the mouseover() method  \n    $( \"div\" ).mouseover(function ( event ) { \n        \/\/ Make the div under the mouse grey and taller\n        $( \"#\" + event.target.id ).css({ \n           \"background-color\" : \"lightgrey\",\n           \"height\" : \"8em\"\n        });\n    }); \n    \/\/ Detect when the mouse moves away with the mouseout() method \n    $( \"div\" ).mouseout(function ( event ) { \n        \/\/ Return the size and color of the div to its original state\n        $( \"#\" + event.target.id ).css({\n           \"background-color\" : \"white\",\n            \"height\" : \"4em\"\n        });\n    });\n}); \n&lt;\/script&gt;\n\n&lt;div id=\"div1\"&gt;Div 1&lt;\/div&gt;\n&lt;div id=\"div2\"&gt;Div 2&lt;\/div&gt;\n&lt;div id=\"div3\"&gt;Div 3&lt;\/div&gt;<\/code><\/pre>\n<p>El ejemplo anterior tambi\u00e9n muestra c\u00f3mo se puede utilizar el m\u00e9todo <code>css()<\/code> de jQuery para establecer varias propiedades CSS a la vez. Este es el resultado:<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-detecting-mouse-movement.png\" alt=\"Captura de pantalla que ilustra la detecci\u00f3n del paso del rat\u00f3n por varios bloques div.\" width=\"1024\" height=\"461\"><figcaption class=\"wp-caption-text\">Detectando eventos de mouse-over.<\/figcaption><\/figure>\n<h3>Manejando Peticiones Ajax con jQuery<\/h3>\n<p>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\u00e1ginas. 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\u00e1s comunes. Una de las m\u00e1s sencillas de la caja de herramientas Ajax es el m\u00e9todo <code>load()<\/code>:<\/p>\n<pre><code class=\"language-html\">&lt;div id=\"myContent\"&gt;Replace Me&lt;\/div&gt;\n&lt;button&gt;Load Content&lt;\/button&gt;\n\n&lt;script&gt; \n\/\/ Request the file content.php from the server after a button is clicked.\n\/\/ Place the results in the HTML element with the ID \u201cmyContent\u201d \n$( \"button\" ).click( function (){ \n    $( \"#myContent\" ).load( \"content.php\" );\n}); \n&lt;\/script&gt;<\/code><\/pre>\n<p>En \u00e9l ocurren muchas cosas con s\u00f3lo tres l\u00edneas de <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> y dos elementos HTML. El resultado ser\u00eda algo parecido a esto:<\/p>\n<figure style=\"width: 984px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-ajax-handling-with-load-method.png\" alt=\"Captura de pantalla de un \u00e1rea de texto en un sitio web antes y despu\u00e9s de una petici\u00f3n Ajax.\" width=\"984\" height=\"375\"><figcaption class=\"wp-caption-text\">El m\u00e9todo jQuery load() a\u00f1ade contenido sin necesidad de actualizar la p\u00e1gina.<\/figcaption><\/figure>\n<h3>C\u00f3mo Utilizar jQuery UI<\/h3>\n<p>Si a\u00f1ades plugins de jQuery UI a tus proyectos, tendr\u00e1s acceso a muchos efectos especiales y widgets construidos sobre la biblioteca principal de jQuery. Aqu\u00ed tienes un ejemplo de uso de jQuery UI para a\u00f1adir un calendario emergente como selector de fecha dentro de un formulario web.<\/p>\n<p>Primero, a\u00f1ade la biblioteca jQuery UI y su CSS de apoyo a tus p\u00e1ginas web. En este ejemplo, enlazamos las bibliotecas en el CDN de JavaScript de Cloudflare junto con la biblioteca principal de jQuery:<\/p>\n<pre><code class=\"language-html\">&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"&gt;&lt;\/script&gt; \n&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.13.2\/jquery-ui.min.js\"&gt;&lt;\/script&gt\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.13.2\/themes\/base\/jquery-ui.min.css\" \/&gt;<\/code><\/pre>\n<p>A continuaci\u00f3n, a\u00f1ade un campo de formulario <code>input<\/code> dentro de tu HTML y, mediante JavaScript, adjunta el m\u00e9todo <code>datepicker()<\/code> de jQuery UI utilizando un selector:<\/p>\n<pre><code class=\"language-html\">&lt;label for=\"myDate\"&gt;Date:&lt;\/label&gt;\n&lt;input type=\"text\" id=\"myDate\" name=\"myDate\"&gt;\n\n&lt;script&gt;\n$( function() { \n    $( \"#myDate\" ).datepicker();\n} );\n&lt;\/script&gt; <\/code><\/pre>\n<p>Al hacer clic en el campo de formulario <code>input<\/code> se lanzar\u00e1 el selector de fecha:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-ui-library-datepicker.png\" alt=\"Captura de pantalla de un selector de fecha jQuery UI en uso.\" width=\"900\" height=\"317\"><figcaption class=\"wp-caption-text\">El selector de fechas de jQuery UI.<\/figcaption><\/figure>\n<h2>C\u00f3mo Usar jQuery en WordPress<\/h2>\n<p>La biblioteca jQuery viene incluida en WordPress y es un componente clave de muchos <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/\">temas de WordPress<\/a>. 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\u00f3digo jQuery.<\/p>\n<p>Lo har\u00e1s editando el archivo <strong>functions.php<\/strong> que forma parte de tu tema. Una actualizaci\u00f3n del tema puede sobrescribir ese archivo, por lo que es una buena pr\u00e1ctica proteger los cambios primero <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-child-wordpress\/\">creando un tema hijo<\/a> y editando el archivo <strong>functions.php<\/strong> all\u00ed. Como m\u00ednimo, <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/copias-de-seguridad-wordpress\/#wordpress-backup#create-wordpress-backup\">crea una copia de seguridad manual de WordPress<\/a> antes de proceder.<\/p>\n<h3>Registrar tu JavaScript jQuery en functions.php<\/h3>\n<p>Puedes utilizar un cliente <a href=\"https:\/\/kinsta.com\/es\/blog\/ftp-vs-sftp\/\" rel=\"noopener\">FTP o SFTP<\/a> para transferir el archivo <strong>functions.php<\/strong> entre tu escritorio y el servidor web para editarlo. Los <a href=\"https:\/\/kinsta.com\/es\/blog\/roles-de-usuario\/\">administradores de WordPress<\/a> tambi\u00e9n pueden modificar <strong>functions.php<\/strong> dentro del CMS:<\/p>\n<p>En el panel de control, selecciona <strong>Apariencia<\/strong> &gt; <strong>Editor de Archivos de Temas.<\/strong><\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/launching-theme-file-editor.jpg\" alt=\"Captura de pantalla que muestra las opciones del men\u00fa para lanzar el Editor de Archivos de Temas de WordPress.\" width=\"1024\" height=\"605\"><figcaption class=\"wp-caption-text\">Iniciando el Editor de Archivos de Temas.<\/figcaption><\/figure>\n<p>Haz clic en <strong>Funciones del Tema<\/strong> en el men\u00fa de la izquierda.<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/theme-file-editor-view.jpg\" alt=\"Captura de pantalla destacando functions.php en una lista de archivos dentro del Editor de Archivos del Tema.\" width=\"1024\" height=\"473\"><figcaption class=\"wp-caption-text\">Dentro del Editor de Archivos de Temas.<\/figcaption><\/figure>\n<p>El contenido de tu archivo <strong>functions.php<\/strong> depender\u00e1 del tema actualmente activo. Arriba est\u00e1n las funciones del tema <a href=\"https:\/\/kinsta.com\/es\/blog\/twenty-twenty-one-tema\/\" rel=\"noopener\">Twenty Twenty-One<\/a>. Puedes a\u00f1adir tu propio script jQuery a la configuraci\u00f3n de tu sitio utilizando la funci\u00f3n de utilidad de WordPress <code>wp_enqueue_script()<\/code>. Aqu\u00ed tienes la plantilla de esa funci\u00f3n:<\/p>\n<pre><code class=\"language-php\">wp_enqueue_script( <strong>$handle<\/strong>, <strong>$src<\/strong>, <strong>$deps<\/strong>, <strong>$ver<\/strong>, <strong>$in_footer<\/strong> );<\/code><\/pre>\n<p>Y esto es lo que significa todo esto:<\/p>\n<ul>\n<li><strong>$handle<\/strong>: El nombre amigable vinculado a este script. (La biblioteca del n\u00facleo de jQuery ya est\u00e1 registrada en WordPress con el handle <strong>jquery<\/strong>)<\/li>\n<li><strong>$src<\/strong>: La ruta y el nombre del archivo o URL que apunta al c\u00f3digo fuente de JavaScript.<\/li>\n<li><strong>$deps: <\/strong>Los controladores de cualquier otra fuente de JavaScript que este script requiera para funcionar correctamente.<\/li>\n<li><strong>$ver<\/strong>: El n\u00famero de versi\u00f3n que hayas asignado al c\u00f3digo fuente de JavaScript.<\/li>\n<li><strong>$in_footer<\/strong>: Si se establece como <strong>verdadero<\/strong>, el script se a\u00f1adir\u00e1 cerca de la parte inferior de la p\u00e1gina. En caso contrario, los scripts se colocar\u00e1n en el bloque <code>&lt;head&gt;<\/code>.<\/li>\n<\/ul>\n<p>Despu\u00e9s de poner en cola un script, se a\u00f1ade a una p\u00e1gina con la funci\u00f3n <code>add_action()<\/code>. Compru\u00e9balo todo en acci\u00f3n a\u00f1adiendo un bloque como \u00e9ste en la parte inferior de tu archivo <strong>functions.php<\/strong>:<code class=\"language-php\"><\/code><\/p>\n<pre><code class=\"language-php\">\/\/ 'my_custom_scripts' is a function name of your choice\nfunction my_custom_scripts() {\n    wp_enqueue_script( \n       'my_script'\n       get_template_directory_uri() . '\/assets\/js\/my_script.js',\n       array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),\n       '1.0',\n       true ); \n} \nadd_action( 'wp_enqueue_scripts', 'my_custom_scripts' );<\/code><\/pre>\n<p>Arriba, al nuevo script de jQuery se le asigna el controlador <strong>my_script<\/strong>, y la funci\u00f3n de utilidad de WordPress <code>get_template_directory_uri()<\/code> ayuda a construir una <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-una-url\/\">URL<\/a> para el archivo JavaScript dentro de los directorios del tema.<\/p>\n<p>Un conjunto de otros controladores indica a WordPress que <strong>my_script<\/strong> depende del n\u00facleo de jQuery, del core de jQuery-UI y del plugin jQuery-UI datepicker Finalmente, hemos asignado al script el n\u00famero de versi\u00f3n 1.0 y hemos pedido que se coloque cerca del final de la p\u00e1gina.<\/p>\n<h3>C\u00f3mo Cargar jQuery desde un CDN en WordPress<\/h3>\n<p>Sabemos que jQuery puede servirse desde varias redes de distribuci\u00f3n de contenidos. Tambi\u00e9n sabemos que, de entrada, WordPress quiere cargar jQuery y muchos plugins de jQuery desde el sistema de archivos del servidor web local.<\/p>\n<p>Puedes cambiar ese comportamiento eliminando la informaci\u00f3n de configuraci\u00f3n registrada con el manejador <strong>jquery<\/strong> existente y reescribi\u00e9ndola. Para ello, a\u00f1ade un bloque de c\u00f3digo en <strong>functions.php<\/strong> que comience con la funci\u00f3n <code>wp_deregister_script()<\/code>:<\/p>\n<pre><code class=\"language-php\">\/\/ 'my_custom_scripts' is a function name of your choice\nfunction my_custom_scripts() {\n    wp_deregister_script('jquery');\n    wp_register_script(\n        'jquery', \n        'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js',\n         null,\n        '3.6.0',\n         False\n    ); \n    wp_enqueue_script( \n        'my_script'\n        get_template_directory_uri() . '\/assets\/js\/my_script.js',\n        array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),\n        '1.0',\n        true\n    ); \n } \nadd_action( 'wp_enqueue_scripts', 'my_custom_scripts' );<\/code><\/pre>\n<p>El controlador de <strong>jquery<\/strong> se ha asignado a la biblioteca jQuery en la CDN de Cloudflare y sigue siendo una dependencia para el <strong>mi_script<\/strong> local. Puedes utilizar el mismo enfoque para extraer otros componentes de jQuery \u2014 como jQuery-UI \u2014 de una CDN.<\/p>\n<p>Para m\u00e1s informaci\u00f3n sobre jQuery y WordPress, tenemos una gu\u00eda para solucionar problemas de configuraci\u00f3n que pueden dar lugar a errores como \u00ab<a href=\"https:\/\/kinsta.com\/es\/blog\/jquery-no-esta-definido\/\" rel=\"noopener\">jQuery No Est\u00e1 Definido<\/a>\u00bb<\/p>\n\n<h2>Resumen<\/h2>\n<p>Durante m\u00e1s de 15 a\u00f1os, la biblioteca de c\u00f3digo abierto jQuery ha ayudado a los desarrolladores a crear aplicaciones web ricas y din\u00e1micas con la menor programaci\u00f3n posible. Hoy en d\u00eda, jQuery se utiliza en m\u00e1s sitios web que cualquier otra biblioteca JavaScript.<\/p>\n<p>Tambi\u00e9n se incluye en algunos sistemas de gesti\u00f3n de contenidos populares, como WordPress. Adem\u00e1s, un s\u00f3lido ecosistema de plugins de jQuery creados por otros programadores de JavaScript ayuda a los desarrolladores con distintos niveles de experiencia a a\u00f1adir funcionalidad avanzada a sus sitios web.<\/p>\n<p>Y si quieres crear sitios web y aplicaciones con jQuery, echa un vistazo a los <a href=\"https:\/\/kinsta.com\/es\/precios\/\" rel=\"noopener\">planes de alojamiento Gestionado de WordPress de Kinsta<\/a> y a las <a href=\"https:\/\/sevalla.com\/application-hosting\/\">soluciones de Alojamiento de Aplicaciones y Bases de Datos<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ser\u00eda dif\u00edcil exagerar el impacto que tuvo jQuery en el desarrollo web despu\u00e9s de que la biblioteca JavaScript de c\u00f3digo abierto se publicara hace m\u00e1s de &#8230;<\/p>\n","protected":false},"author":259,"featured_media":57190,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[867,870,1087],"topic":[1296],"class_list":["post-57189","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-jquery","tag-languages","topic-frameworks-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00bfQu\u00e9 es jQuery? Un Vistazo a la Biblioteca JavaScript M\u00e1s Utilizada de la Web<\/title>\n<meta name=\"description\" content=\"La biblioteca de c\u00f3digo abierto jQuery JavaScript ayuda a los desarrolladores a crear aplicaciones web din\u00e1micas con la menor cantidad de c\u00f3digo posible. M\u00e1s informaci\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfQu\u00e9 es jQuery? Un Vistazo a la Biblioteca JavaScript M\u00e1s Utilizada de la Web\" \/>\n<meta property=\"og:description\" content=\"La biblioteca de c\u00f3digo abierto jQuery JavaScript ayuda a los desarrolladores a crear aplicaciones web din\u00e1micas con la menor cantidad de c\u00f3digo posible. M\u00e1s informaci\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-09T07:55:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:31:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Steve Bonisteel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"La biblioteca de c\u00f3digo abierto jQuery JavaScript ayuda a los desarrolladores a crear aplicaciones web din\u00e1micas con la menor cantidad de c\u00f3digo posible. M\u00e1s informaci\u00f3n.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"\u00bfQu\u00e9 es jQuery? Un Vistazo a la Biblioteca JavaScript M\u00e1s Utilizada de la Web\",\"datePublished\":\"2022-09-09T07:55:27+00:00\",\"dateModified\":\"2025-10-01T19:31:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/\"},\"wordCount\":2860,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png\",\"keywords\":[\"JavaScript\",\"JQuery\",\"languages\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/\",\"name\":\"\u00bfQu\u00e9 es jQuery? Un Vistazo a la Biblioteca JavaScript M\u00e1s Utilizada de la Web\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png\",\"datePublished\":\"2022-09-09T07:55:27+00:00\",\"dateModified\":\"2025-10-01T19:31:27+00:00\",\"description\":\"La biblioteca de c\u00f3digo abierto jQuery JavaScript ayuda a los desarrolladores a crear aplicaciones web din\u00e1micas con la menor cantidad de c\u00f3digo posible. M\u00e1s informaci\u00f3n.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frameworks JavaScript\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/frameworks-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u00bfQu\u00e9 es jQuery? Un Vistazo a la Biblioteca JavaScript M\u00e1s Utilizada de la Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"caption\":\"Steve Bonisteel\"},\"description\":\"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u00bfQu\u00e9 es jQuery? Un Vistazo a la Biblioteca JavaScript M\u00e1s Utilizada de la Web","description":"La biblioteca de c\u00f3digo abierto jQuery JavaScript ayuda a los desarrolladores a crear aplicaciones web din\u00e1micas con la menor cantidad de c\u00f3digo posible. M\u00e1s informaci\u00f3n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/","og_locale":"es_ES","og_type":"article","og_title":"\u00bfQu\u00e9 es jQuery? Un Vistazo a la Biblioteca JavaScript M\u00e1s Utilizada de la Web","og_description":"La biblioteca de c\u00f3digo abierto jQuery JavaScript ayuda a los desarrolladores a crear aplicaciones web din\u00e1micas con la menor cantidad de c\u00f3digo posible. M\u00e1s informaci\u00f3n.","og_url":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2022-09-09T07:55:27+00:00","article_modified_time":"2025-10-01T19:31:27+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"La biblioteca de c\u00f3digo abierto jQuery JavaScript ayuda a los desarrolladores a crear aplicaciones web din\u00e1micas con la menor cantidad de c\u00f3digo posible. M\u00e1s informaci\u00f3n.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Steve Bonisteel","Tiempo de lectura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"\u00bfQu\u00e9 es jQuery? Un Vistazo a la Biblioteca JavaScript M\u00e1s Utilizada de la Web","datePublished":"2022-09-09T07:55:27+00:00","dateModified":"2025-10-01T19:31:27+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/"},"wordCount":2860,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png","keywords":["JavaScript","JQuery","languages"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/","url":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/","name":"\u00bfQu\u00e9 es jQuery? Un Vistazo a la Biblioteca JavaScript M\u00e1s Utilizada de la Web","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png","datePublished":"2022-09-09T07:55:27+00:00","dateModified":"2025-10-01T19:31:27+00:00","description":"La biblioteca de c\u00f3digo abierto jQuery JavaScript ayuda a los desarrolladores a crear aplicaciones web din\u00e1micas con la menor cantidad de c\u00f3digo posible. M\u00e1s informaci\u00f3n.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/09\/what-is-jquery.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Frameworks JavaScript","item":"https:\/\/kinsta.com\/es\/secciones\/frameworks-javascript\/"},{"@type":"ListItem","position":3,"name":"\u00bfQu\u00e9 es jQuery? Un Vistazo a la Biblioteca JavaScript M\u00e1s Utilizada de la Web"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","caption":"Steve Bonisteel"},"description":"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.","url":"https:\/\/kinsta.com\/es\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/57189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=57189"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/57189\/revisions"}],"predecessor-version":[{"id":57242,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/57189\/revisions\/57242"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/57189\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/57189\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/57189\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/57189\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/57189\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/57189\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/57189\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/57189\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/57189\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/57189\/translations\/dk"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/57189\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/57190"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=57189"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=57189"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=57189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}