{"id":52730,"date":"2022-09-09T04:57:11","date_gmt":"2022-09-09T07:57:11","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=52730&#038;post_type=knowledgebase&#038;preview_id=52730"},"modified":"2025-10-01T17:03:23","modified_gmt":"2025-10-01T20:03:23","slug":"o-qu-e-jquery","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/","title":{"rendered":"O que \u00e9 jQuery? Um Olhar Sobre a Biblioteca JavaScript mais Usada da Web"},"content":{"rendered":"<p>Seria dif\u00edcil exagerar o impacto que <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/#jquery\" rel=\"noopener\">jQuery<\/a> teve no desenvolvimento web depois que a biblioteca JavaScript de c\u00f3digo aberto foi lan\u00e7ada h\u00e1 mais de 15 anos. Uma caixa de ferramentas que criou uma nova abrevia\u00e7\u00e3o para a <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhor-linguagem-de-programacao\/#javascript\" rel=\"noopener\">programa\u00e7\u00e3o JavaScript<\/a>, de outra forma complexa, jQuery continua a fazer jus ao lema de seus desenvolvedores: &#8220;Escreva menos, fa\u00e7a mais&#8221;<\/p>\n<p>Ainda hoje, jQuery \u00e9 popular entre os desenvolvedores profissionais, enquanto outros com pouca ou nenhuma experi\u00eancia em programa\u00e7\u00e3o podem usar a biblioteca para adicionar funcionalidades avan\u00e7adas aos seus sites. Aqui est\u00e1 o que est\u00e1 por tr\u00e1s de uma das maiores hist\u00f3rias de sucesso <a href=\"https:\/\/kinsta.com\/web-development\/\" rel=\"noopener\">do desenvolvimento 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>Qu\u00e3o popular \u00e9 o jQuery?<\/h2>\n<p>A pesquisa StackOverflow de 2022 sobre <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#most-popular-technologies-webframe-prof\" target=\"_blank\" rel=\"noopener noreferrer\">tecnologias web utilizadas por desenvolvedores profissionais<\/a> descobriu que pouco mais de 29% dos mais de 45.000 entrevistados estavam trabalhando com jQuery. Entre as <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/#the-most-popular-javascript-libraries\" rel=\"noopener\">bibliotecas JavaScript<\/a>, o jQuery foi o segundo colocado apenas no <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\" rel=\"noopener\">React.js<\/a>, a biblioteca desenvolvida pela primeira vez no Facebook (agora Meta) em 2011 e que agora \u00e9 abra\u00e7ada por mais de 44% desses desenvolvedores.<\/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=\"Frameworks e tecnologias populares da web em 2022\" width=\"1024\" height=\"490\"><figcaption class=\"wp-caption-text\">Frameworks e tecnologias populares da web em 2022. (Fonte de imagem: <a href=\"https:\/\/survey.stackoverflow.co\/2022\/\" target=\"_blank\" rel=\"noopener noreferrer\">StackOverflow<\/a>)<\/figcaption><\/figure>\n<p>Mas os projetos atuais dos desenvolvedores web n\u00e3o contam a hist\u00f3ria toda. Baseado nas <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery\" target=\"_blank\" rel=\"noopener noreferrer\">tend\u00eancias da tecnologia da Internet<\/a> da BuiltWith, jQuery foi encontrado em mais de 80 milh\u00f5es de sites em 2022. Isso \u00e9 uma enorme vantagem sobre os quase 11 milh\u00f5es de sites que rodam o React.<\/p>\n\n<p>A biblioteca jQuery tem sido agregada ao n\u00facleo do WordPress por mais de uma d\u00e9cada, tornando-a dispon\u00edvel para centenas de <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\" rel=\"noopener\">temas<\/a> que dependem de sua funcionalidade para criar sites din\u00e2micos. <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-vs-drupal\/\" rel=\"noopener\">Drupal<\/a> \u00e9 outro <a href=\"https:\/\/kinsta.com\/pt\/blog\/sistema-de-gerenciamento-de-conteudo\/\" rel=\"noopener\">sistema de gerenciamento de conte\u00fado<\/a> popular que incluiu o jQuery entre seus componentes principais. N\u00e3o importa quais tecnologias s\u00e3o as atuais favoritas dos desenvolvedores, jQuery continua sendo a biblioteca JavaScript <em>mais utilizada<\/em> na web.<\/p>\n<h2>Uma breve hist\u00f3ria do jQuery<\/h2>\n<p>A <a href=\"https:\/\/kinsta.com\/pt\/participacao-mercado-navegadores-desktop\/\" rel=\"noopener\">batalha dos navegadores<\/a> tem sido travada desde o in\u00edcio da web, e os desenvolvedores sempre foram v\u00edtimas. Em 2006, quando o desenvolvedor web John Resig revelou o jQuery, o navegador Internet Explorer da Microsoft era o <a href=\"https:\/\/www.visualcapitalist.com\/internet-browser-market-share\/\" target=\"_blank\" rel=\"noopener noreferrer\">l\u00edder indiscut\u00edvel do mercado<\/a> &#8211; uma invers\u00e3o da vantagem da Netscape menos de uma d\u00e9cada antes.<\/p>\n<p>Na \u00e9poca, o novo Firefox da Mozilla tinha uma participa\u00e7\u00e3o de 10% do mercado (comparado com os 84% da Microsoft) e o Safari da Apple tinha acabado de aparecer em cena. O Chrome do Google, o l\u00edder de mercado atual, n\u00e3o existia. Programadores de JavaScript como a Resig lutavam regularmente para escrever c\u00f3digo que fosse executado em todos os navegadores.<\/p>\n<p>Sua nova biblioteca jQuery foi constru\u00edda para resolver as diferen\u00e7as na forma como o JavaScript foi implementado por esses navegadores e ajudar os desenvolvedores a escrever menos c\u00f3digo enquanto realizavam tarefas como essas:<\/p>\n<ul>\n<li>Manipulando os <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">elementos HTML<\/a> em uma p\u00e1gina web<\/li>\n<li>Modificando dinamicamente o CSS<\/li>\n<li>Respondendo a eventos como cliques de mouse e pressionamentos de teclas<\/li>\n<li>Manuseio de pedidos Ajax para atualizar o conte\u00fado de uma p\u00e1gina sem recarregar<\/li>\n<\/ul>\n<p>Ap\u00f3s o lan\u00e7amento da biblioteca pela Resig, outros desenvolvedores constru\u00edram aplicativos em cima do jQuery, muitas vezes compartilhando seu trabalho como plugins para tornar novas funcionalidades dispon\u00edveis para todos.<\/p>\n<h3>O que \u00e9 jQuery UI?<\/h3>\n<p><a href=\"https:\/\/jqueryui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery UI<\/a> \u00e9 uma <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery-UI\" target=\"_blank\" rel=\"noopener noreferrer\">cole\u00e7\u00e3o popular de plugins<\/a> projetados para melhorar as interfaces do usu\u00e1rio. \u00c9 visto como um companheiro &#8220;oficial&#8221; do n\u00facleo da biblioteca jQuery e adiciona uma s\u00e9rie de efeitos especiais e widgets, tais como: data-pickers, barras de progresso, barras deslizantes, girat\u00f3rias e pain\u00e9is com abas ou dobr\u00e1veis.<\/p>\n<h2>Qual \u00e9 a diferen\u00e7a entre jQuery e JavaScript?<\/h2>\n<p><strong>\u00c9 importante saber que jQuery <em>\u00e9<\/em><\/strong> <strong>JavaScript<\/strong>. Quando voc\u00ea usa jQuery, voc\u00ea est\u00e1 trabalhando com inst\u00e2ncias de objetos JavaScript que refletem as conven\u00e7\u00f5es de nomenclatura de jQuery para m\u00e9todos (fun\u00e7\u00f5es) e propriedades. Vamos dar uma olhada no <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/#vanilla-javascript\" rel=\"noopener\">vanilla JavaScript<\/a> e jQuery, abordando a mesma tarefa.<\/p>\n<p>Aqui est\u00e1 um trecho de HTML em algum lugar em uma p\u00e1gina da web:<\/p>\n<pre><code class=\"language-html\">&lt;p id=\"target\"&gt;Old text&lt;\/p&gt;<\/code><\/pre>\n<p>O c\u00f3digo Vanilla JavaScript que pode encontrar o elemento <code>&lt;p&gt;<\/code> com o &#8220;target&#8221; <code>id<\/code> &#8211; e depois substituir o texto entre as tags &#8211; poderia se parecer com isto:<\/p>\n<pre><code class=\"language-js\">const content = document.getElementById( \"target\" );\ncontent.textContent = \"New text\";<\/code><\/pre>\n<p>O m\u00e9todo <code>getElementById()<\/code> do JavaScript retorna um objeto que inclui o HTML e o conte\u00fado de texto do par\u00e1grafo com o &#8220;alvo&#8221; <code>id<\/code>. O objeto \u00e9 atribu\u00eddo \u00e0 refer\u00eancia constante <code>content<\/code>, ent\u00e3o sua propriedade <code>textContent<\/code> \u00e9 alterada para &#8220;Novo texto&#8221;.<\/p>\n<p>O JavaScript permite a voc\u00ea utilizar m\u00e9todos em cadeia, tornando poss\u00edvel alcan\u00e7ar o acima descrito com uma \u00fanica afirma\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-js\"> document.getElementById( \"target\" ).textContent = \"New text\"; <\/code><\/pre>\n<p>N\u00e3o surpreende, ent\u00e3o, que voc\u00ea tamb\u00e9m possa realizar a\u00e7\u00f5es jQuery em cadeia. Para mudar &#8220;texto antigo&#8221; para &#8220;texto novo&#8221; usando jQuery, voc\u00ea pode fazer isso:<\/p>\n<pre><code class=\"language-js\">$( \"#target\" ).text( \"New text\" );<\/code><\/pre>\n<p>O s\u00edmbolo do d\u00f3lar (<code>$<\/code>) \u00e9 um abrevia\u00e7\u00e3o para <code>jQuery<\/code>, e <code>( \"#target\" )<\/code> \u00e9 um exemplo de um seletor jQuery. Neste caso, o seletor est\u00e1 procurando por um elemento HTML com o <code>id<\/code> do nosso par\u00e1grafo alvo. O m\u00e9todo jQuery <code>text()<\/code> \u00e9 acorrentado para fazer do &#8220;Novo texto&#8221; o conte\u00fado do par\u00e1grafo.<\/p>\n<h2>Como usar jQuery em seu site<\/h2>\n<p>Adicione jQuery ao seu site, ligando o c\u00f3digo da biblioteca a partir das p\u00e1ginas do site. A biblioteca jQuery pode estar em seu servidor web ou em uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/cdn-para-wordpress\/\">rede de entrega de conte\u00fado acess\u00edvel ao p\u00fablico (CDN)<\/a>. O site oficial da jQuery pode conectar voc\u00ea com as <a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u00faltimas vers\u00f5es da biblioteca<\/a>.<\/p>\n<p>A biblioteca jQuery est\u00e1 dispon\u00edvel em <a href=\"https:\/\/kinsta.com\/pt\/blog\/minificar-javascript\/\">JavaScript minificado (comprimido)<\/a> para carregamento r\u00e1pido na produ\u00e7\u00e3o ou n\u00e3o comprimido para legibilidade e depura\u00e7\u00e3o.<\/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=\"O site oficial da jQuery\" width=\"1017\" height=\"498\"><figcaption class=\"wp-caption-text\">O site oficial da jQuery<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m ir\u00e1 escrever pelo menos um pouco de JavaScript para invocar o jQuery e resolver tarefas espec\u00edficas para o seu aplicativo web. No HTML das p\u00e1ginas do seu site, voc\u00ea pode fazer um link para a biblioteca jQuery e para o arquivo que cont\u00e9m seu c\u00f3digo desta forma:<\/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>Neste exemplo, a vers\u00e3o 3.6.0 de jQuery e seu c\u00f3digo espec\u00edfico do site em um arquivo chamado <strong>my_script.js<\/strong> est\u00e3o localizados no diret\u00f3rio<code>\/js\/<\/code> no site. A biblioteca jQuery est\u00e1 normalmente inclu\u00edda na se\u00e7\u00e3o <code>&lt;head&gt;<\/code> de uma p\u00e1gina da web. \u00c9 comum que os desenvolvedores coloquem alguns links para arquivos JavaScript, incluindo c\u00f3digo que depende da biblioteca jQuery, perto do final de uma p\u00e1gina, geralmente um pouco antes do fechamento da tag <code>&lt;body&gt;<\/code>. Voc\u00ea sempre vai querer que qualquer c\u00f3digo espec\u00edfico do site que invoque jQuery apare\u00e7a <strong>ap\u00f3s<\/strong> o link para a pr\u00f3pria biblioteca.<\/p>\n<h3>Linkando o jQuery em um CDN<\/h3>\n<p>A biblioteca jQuery \u00e9 t\u00e3o onipresente em toda a web que h\u00e1 uma boa chance de que um visitante do seu site j\u00e1 tenha a biblioteca em cache no seu navegador para v\u00e1rios <a href=\"https:\/\/kinsta.com\/pt\/blog\/cdn-para-wordpress\/\">CDNs<\/a>. N\u00f3s podemos modificar o snippet HTML acima para fazer uso da rede de entrega de conte\u00fado JavaScript do Cloudflare desta forma:<\/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>Invocando jQuery em seu aplicativo<\/h3>\n<p>Ao escrever seu aplicativo jQuery, uma melhor pr\u00e1tica \u00e9 confirmar que a p\u00e1gina web terminou de carregar antes que seu c\u00f3digo comece a ser executado. Voc\u00ea pode testar isso usando o m\u00e9todo <code>ready()<\/code>, que retira o seu c\u00f3digo quando o documento tiver carregado, assim:<\/p>\n<pre><code class=\"language-js\">$(document).ready(function() {\n  \/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<p>Esse come\u00e7o para um aplicativo jQuery \u00e9 t\u00e3o comum que os desenvolvedores da biblioteca desenvolveram uma sintaxe ainda mais breve:<\/p>\n<pre><code class=\"language-js\">$(function() { \n  \/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<h3>Selecionando elementos no DOM com jQuery<\/h3>\n<p>A base da maioria dos aplicativos jQuery \u00e9 a capacidade de atravessar a estrutura de uma p\u00e1gina web como um objeto (o <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/#the-javascript-dom\" rel=\"noopener\">modelo de objeto de documento, ou DOM<\/a>) e direcionar v\u00e1rios elementos dentro do HTML. Selecionar um elemento (ou um grupo de elementos) \u00e9 o passo antes de <em>fazer <\/em>algo com esse elemento, como mudar sua apar\u00eancia ou atualizar o conte\u00fado pr\u00f3ximo. jQuery selectors target DOM properties em uma variedade de maneiras. As mais comuns incluem:<\/p>\n<ul>\n<li>Pelo nome do elemento HTML (tag)<\/li>\n<li>Por propriedades CSS (incluindo IDs e nomes de classe)<\/li>\n<li>Pela posi\u00e7\u00e3o relativa de um elemento dentro do DOM<\/li>\n<li>Pelo valor do conte\u00fado nos campos do formul\u00e1rio<\/li>\n<li>Pelo estado atual de um elemento<\/li>\n<\/ul>\n<p>Aqui est\u00e3o alguns exemplos:<\/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>Voc\u00ea pode combinar os seletores jQuery para uma segmenta\u00e7\u00e3o mais espec\u00edfica. Exemplos:<\/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>Manipulando o DOM com jQuery<\/h3>\n<p>Agora que voc\u00ea sabe como selecionar v\u00e1rios elementos dentro de uma p\u00e1gina da web, voc\u00ea pode modific\u00e1-los usando os m\u00e9todos jQuery. Como mencionado anteriormente, voc\u00ea pode frequentemente encadear essas a\u00e7\u00f5es para fazer muita coisa com pouca codifica\u00e7\u00e3o. Alguns exemplos:<\/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>Manuseio de eventos com jQuery<\/h3>\n<p>O tipo de manipula\u00e7\u00e3o DOM descrito acima passaria despercebido pelos visitantes da web se tudo acontecesse assim que uma p\u00e1gina fosse carregada. \u00c9 por isso que seu aplicativo jQuery pode detectar e responder a eventos como cliques de mouse, movimento do mouse, toques de teclas e muito mais para criar uma experi\u00eancia verdadeiramente responsiva.<\/p>\n<h4>Detectando cliques do mouse com jQuery<\/h4>\n<p>Responder ao clique de um mouse (ou um toque em um dispositivo touch-screen) \u00e9 uma tarefa comum para aplicativos web. Combinamos alguns jQuery e HTML em um exemplo que tamb\u00e9m aproveita o objeto jQuery incorporado <code>event<\/code>, que conter\u00e1 informa\u00e7\u00f5es \u00fateis sobre nosso &#8220;evento de clique&#8221;:<\/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>O 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=\"Detectando cliques do mouse\" width=\"1024\" height=\"426\"><figcaption class=\"wp-caption-text\">Detectando cliques do mouse<\/figcaption><\/figure>\n<h4><strong>Detectando o movimento do mouse com jQuery<\/strong><\/h4>\n<p>Conhecer a localiza\u00e7\u00e3o atual do ponteiro do mouse sobre uma p\u00e1gina da web \u00e9 \u00fatil em muitos aplicativos web de resposta r\u00e1pida. Aqui est\u00e1 um exemplo de como jQuery pode ajudar:<\/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>O exemplo acima tamb\u00e9m mostra como o m\u00e9todo jQuery <code>css()<\/code> pode ser usado para definir m\u00faltiplas propriedades de CSS de uma s\u00f3 vez. Aqui est\u00e1 o 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=\"Detectando eventos com o mouse\" width=\"1024\" height=\"461\"><figcaption class=\"wp-caption-text\">Detectando eventos com o mouse<\/figcaption><\/figure>\n<h3>Manuseio de pedidos Ajax com jQuery<\/h3>\n<p>Uma grande parte da popularidade do jQuery \u00e9 sua capacidade de simplificar os pedidos Ajax que aplicativos web podem usar para trocar dados com servidores sem recarregar p\u00e1ginas. A biblioteca tem muitas ferramentas para gerenciar as solicita\u00e7\u00f5es Ajax de dados nos formatos texto simples, HTML, XML e JSON. A abordagem jQuery \u00e9 oferecer op\u00e7\u00f5es de abrevia\u00e7\u00e3o para as tarefas mais comuns. Uma das mais simples na caixa de ferramentas do Ajax \u00e9 o 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>Muita coisa est\u00e1 acontecendo l\u00e1 com apenas tr\u00eas linhas de <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> e dois elementos HTML. O resultado seria algo parecido com isto:<\/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=\"jQuery load() m\u00e9todo adiciona conte\u00fado sem uma atualiza\u00e7\u00e3o da p\u00e1gina\" width=\"984\" height=\"375\"><figcaption class=\"wp-caption-text\">jQuery load() m\u00e9todo adiciona conte\u00fado sem uma atualiza\u00e7\u00e3o da p\u00e1gina<\/figcaption><\/figure>\n<h3>Como usar o jQuery UI<\/h3>\n<p>Adicione plugins jQuery UI aos seus projetos, e voc\u00ea ter\u00e1 acesso a muitos efeitos especiais e widgets constru\u00eddos na biblioteca principal do jQuery. Aqui est\u00e1 um exemplo usando o jQuery UI para adicionar um calend\u00e1rio pop-up como um pegador de data dentro de um formul\u00e1rio web.<\/p>\n<p>Primeiro, adicione a biblioteca jQuery UI e seu CSS de suporte \u00e0s suas p\u00e1ginas web. Neste exemplo, n\u00f3s estamos fazendo um link para as bibliotecas no CDN JavaScript do Cloudflare junto com a biblioteca jQuery principal:<\/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>Em seguida, adicione um campo do formul\u00e1rio <code>input<\/code> dentro do seu HTML e, via JavaScript, anexe o m\u00e9todo <code>datepicker()<\/code> da jQuery UI usando um seletor:<\/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>Clicando no campo do formul\u00e1rio <code>input<\/code> agora ser\u00e1 lan\u00e7ado o selecionador de datas:<\/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=\"O selecionador de datas jQuery UI.\" width=\"900\" height=\"317\"><figcaption class=\"wp-caption-text\">O selecionador de datas jQuery UI.<\/figcaption><\/figure>\n<h2>Como usar jQuery no WordPress<\/h2>\n<p>A biblioteca jQuery vem em conjunto com o WordPress e \u00e9 um componente chave de muitos <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">temas WordPress<\/a>. Mesmo que o seu tema atual ainda n\u00e3o esteja usando jQuery, voc\u00ea pode aproveitar o registro de depend\u00eancias JavaScript dentro do WordPress para ter todo o seu c\u00f3digo jQuery pronto e funcionando.<\/p>\n<p>Voc\u00ea far\u00e1 isso editando o arquivo <strong>functions.php<\/strong> que \u00e9 parte do seu tema. Uma atualiza\u00e7\u00e3o de tema pode sobrescrever esse arquivo, ent\u00e3o \u00e9 uma boa pr\u00e1tica manter suas mudan\u00e7as seguras, <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">criando primeiro um tema infantil<\/a> e editando o arquivo <strong>functions.php<\/strong> l\u00e1. No m\u00ednimo, <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/backups-wordpress\/#wordpress-backup#create-wordpress-backup\" rel=\"noopener\">crie um backup manual do WordPress<\/a> antes de prosseguir.<\/p>\n<h3>Registrando seu jQuery JavaScript em functions.php<\/h3>\n<p>Voc\u00ea pode usar um cliente <a href=\"https:\/\/kinsta.com\/pt\/blog\/ftp-vs-sftp\/\" rel=\"noopener\">FTP ou SFTP<\/a> para transferir o arquivo <strong>functions.php<\/strong> entre o seu desktop e o servidor web para edit\u00e1-lo. <a href=\"https:\/\/kinsta.com\/pt\/blog\/funcoes-usuario-wordpress\/\">Os administradores do WordPress<\/a> tamb\u00e9m podem modificar o arquivo <strong>functions.php<\/strong> dentro do CMS:<\/p>\n<p>No painel, selecione <strong>Appearance<\/strong> &gt; <strong>Theme File Editor.<\/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=\"Lan\u00e7amento do Editor de Arquivos de Temas\" width=\"1024\" height=\"605\"><figcaption class=\"wp-caption-text\">Lan\u00e7amento do Editor de Arquivos de Temas<\/figcaption><\/figure>\n<p>Clique em <strong>Fun\u00e7\u00f5es Tem\u00e1ticas<\/strong> no menu do lado esquerdo.<\/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=\"Dentro do Editor de Arquivos de Temas.\" width=\"1024\" height=\"473\"><figcaption class=\"wp-caption-text\">Dentro do Editor de Arquivos de Temas.<\/figcaption><\/figure>\n<p>O conte\u00fado do seu arquivo <strong>functions.php<\/strong> depender\u00e1 do tema atualmente ativo. Acima est\u00e3o as fun\u00e7\u00f5es do <a href=\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/\" rel=\"noopener\">tema Twenty Twenty-One<\/a>. Voc\u00ea pode adicionar seu pr\u00f3prio script jQuery \u00e0 configura\u00e7\u00e3o do seu site usando a fun\u00e7\u00e3o do utilit\u00e1rio WordPress <code>wp_enqueue_script()<\/code>. Aqui est\u00e1 o modelo para essa fun\u00e7\u00e3o:<\/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>E aqui est\u00e1 o que tudo isso significa:<\/p>\n<ul>\n<li><strong>$handle<\/strong>: O nome f\u00e1cil de usar ligado a este script. (A biblioteca central jQuery j\u00e1 est\u00e1 registrada no WordPress com o handle <strong>jquery<\/strong>)<\/li>\n<li><strong>$src<\/strong>: O caminho e nome do arquivo ou URL que aponta para o c\u00f3digo fonte JavaScript.<\/li>\n<li><strong>$deps: <\/strong>Os handles de quaisquer outras fontes JavaScript que este script requer para funcionar corretamente.<\/li>\n<li><strong>$ver<\/strong>: Qualquer n\u00famero de vers\u00e3o que voc\u00ea tenha atribu\u00eddo ao seu c\u00f3digo-fonte JavaScript.<\/li>\n<li><strong>$in_footer<\/strong>: Se definido para <strong>true<\/strong>, o script ser\u00e1 adicionado perto do final da p\u00e1gina. Caso contr\u00e1rio, os scripts ser\u00e3o colocados no bloco <code>&lt;head&gt;<\/code>.<\/li>\n<\/ul>\n<p>Depois que um script \u00e9 enfileirado, ele \u00e9 adicionado a uma p\u00e1gina com a fun\u00e7\u00e3o add_action(). Veja tudo em a\u00e7\u00e3o adicionando um bloco como este na parte inferior do seu arquivo <strong>functions.php:<br \/>\n<\/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>Acima, o novo script jQuery recebe o handle <strong>my_script<\/strong>, e a fun\u00e7\u00e3o do utilit\u00e1rio WordPress <code>get_template_directory_uri()<\/code> ajuda a construir uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-uma-url\/\">URL<\/a> para o arquivo JavaScript dentro dos diret\u00f3rios do tema.<\/p>\n<p>Um array de outras al\u00e7as diz ao WordPress que <strong>meu_script<\/strong> depende do n\u00facleo jQuery, do n\u00facleo jQuery-UI e do plugin jQuery-UI datepicker Finalmente, n\u00f3s designamos o script n\u00famero da vers\u00e3o 1.0 e pedimos que ele fosse colocado perto do final da p\u00e1gina.<\/p>\n<h3>Como carregar o jQuery a partir de um CDN no WordPress<\/h3>\n<p>N\u00f3s sabemos que jQuery pode ser servido a partir de v\u00e1rias redes de entrega de conte\u00fado. N\u00f3s tamb\u00e9m sabemos que, fora da caixa, o WordPress quer carregar jQuery e muitos plugins jQuery do sistema de arquivos do servidor web local.<\/p>\n<p>Voc\u00ea pode mudar esse comportamento eliminando as informa\u00e7\u00f5es de configura\u00e7\u00e3o registradas com o man\u00edpulo do <strong>jquery<\/strong> existente e reescrevendo-as. Para fazer isso, adicione um bloco de c\u00f3digo em <strong>functions.php<\/strong> come\u00e7ando com a fun\u00e7\u00e3o <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>O handle\u00a0<strong>jquery<\/strong> foi atribu\u00eddo \u00e0 biblioteca jQuery no CDN Cloudflare e permanece uma depend\u00eancia para o <strong>my_script<\/strong> local. Voc\u00ea pode usar a mesma abordagem para puxar outros componentes jQuery &#8211; como jQuery-UI &#8211; de um CDN.<\/p>\n<p>Para mais informa\u00e7\u00f5es sobre jQuery e WordPress, temos um guia de solu\u00e7\u00e3o de problemas de configura\u00e7\u00e3o que podem resultar em erros como &#8220;<a href=\"https:\/\/kinsta.com\/pt\/blog\/jquery-nao-esta-definido\/\" rel=\"noopener\">jQuery Is Not Defined&#8221; (jQuery n\u00e3o est\u00e1 definido<\/a>)<\/p>\n\n<h2>Resumo<\/h2>\n<p>Por mais de 15 anos, a biblioteca de c\u00f3digo aberto jQuery tem ajudado os desenvolvedores a construir aplicativos web ricas e din\u00e2micas com o m\u00ednimo de codifica\u00e7\u00e3o poss\u00edvel. Hoje, o jQuery \u00e9 usado em mais sites do que qualquer outra biblioteca JavaScript.<\/p>\n<p>Ele tamb\u00e9m est\u00e1 empacotado com alguns sistemas de gerenciamento de conte\u00fado populares, incluindo o WordPress. Al\u00e9m disso, um ecossistema robusto de plugins jQuery criados por outros programadores JavaScript ajuda os desenvolvedores com diferentes n\u00edveis de experi\u00eancia a adicionar funcionalidades avan\u00e7adas aos seus sites.<\/p>\n<p>E se voc\u00ea quiser construir sites e aplicativos a partir do jQuery, d\u00ea uma olhada nos <a href=\"https:\/\/kinsta.com\/pt\/precos\/\" rel=\"noopener\">planos de hospedagem gerenciada de WordPress da Kinsta<\/a>\u00a0e nas <a href=\"https:\/\/sevalla.com\/application-hosting\/\">solu\u00e7\u00f5es de hospedagem de aplicativos e banco de dados<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Seria dif\u00edcil exagerar o impacto que jQuery teve no desenvolvimento web depois que a biblioteca JavaScript de c\u00f3digo aberto foi lan\u00e7ada h\u00e1 mais de 15 anos. &#8230;<\/p>\n","protected":false},"author":259,"featured_media":52731,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[523,529,799],"topic":[977],"class_list":["post-52730","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>O que \u00e9 jQuery? Um Olhar Sobre a Biblioteca JavaScript mais Usada da Web<\/title>\n<meta name=\"description\" content=\"A biblioteca jQuery JavaScript de c\u00f3digo aberto ajuda os desenvolvedores a construir aplicativos web din\u00e2micos com o m\u00ednimo de codifica\u00e7\u00e3o poss\u00edvel. Saiba mais.\" \/>\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\/pt\/blog\/o-qu-e-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O que \u00e9 jQuery? Um Olhar Sobre a Biblioteca JavaScript mais Usada da Web\" \/>\n<meta property=\"og:description\" content=\"A biblioteca jQuery JavaScript de c\u00f3digo aberto ajuda os desenvolvedores a construir aplicativos web din\u00e2micos com o m\u00ednimo de codifica\u00e7\u00e3o poss\u00edvel. Saiba mais.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-09T07:57:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T20:03:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"A biblioteca jQuery JavaScript de c\u00f3digo aberto ajuda os desenvolvedores a construir aplicativos web din\u00e2micos com o m\u00ednimo de codifica\u00e7\u00e3o poss\u00edvel. Saiba mais.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/09\/what-is-jquery.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"O que \u00e9 jQuery? Um Olhar Sobre a Biblioteca JavaScript mais Usada da Web\",\"datePublished\":\"2022-09-09T07:57:11+00:00\",\"dateModified\":\"2025-10-01T20:03:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/\"},\"wordCount\":2767,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/09\/what-is-jquery.png\",\"keywords\":[\"JavaScript\",\"jQuery\",\"languages\"],\"inLanguage\":\"pt-PT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/\",\"name\":\"O que \u00e9 jQuery? Um Olhar Sobre a Biblioteca JavaScript mais Usada da Web\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/09\/what-is-jquery.png\",\"datePublished\":\"2022-09-09T07:57:11+00:00\",\"dateModified\":\"2025-10-01T20:03:23+00:00\",\"description\":\"A biblioteca jQuery JavaScript de c\u00f3digo aberto ajuda os desenvolvedores a construir aplicativos web din\u00e2micos com o m\u00ednimo de codifica\u00e7\u00e3o poss\u00edvel. Saiba mais.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/09\/what-is-jquery.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/09\/what-is-jquery.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frameworks JavaScript\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/frameworks-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"O que \u00e9 jQuery? Um Olhar Sobre a Biblioteca JavaScript mais Usada da Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"O que \u00e9 jQuery? Um Olhar Sobre a Biblioteca JavaScript mais Usada da Web","description":"A biblioteca jQuery JavaScript de c\u00f3digo aberto ajuda os desenvolvedores a construir aplicativos web din\u00e2micos com o m\u00ednimo de codifica\u00e7\u00e3o poss\u00edvel. Saiba mais.","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\/pt\/blog\/o-qu-e-jquery\/","og_locale":"pt_PT","og_type":"article","og_title":"O que \u00e9 jQuery? Um Olhar Sobre a Biblioteca JavaScript mais Usada da Web","og_description":"A biblioteca jQuery JavaScript de c\u00f3digo aberto ajuda os desenvolvedores a construir aplicativos web din\u00e2micos com o m\u00ednimo de codifica\u00e7\u00e3o poss\u00edvel. Saiba mais.","og_url":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2022-09-09T07:57:11+00:00","article_modified_time":"2025-10-01T20:03:23+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/09\/what-is-jquery.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"A biblioteca jQuery JavaScript de c\u00f3digo aberto ajuda os desenvolvedores a construir aplicativos web din\u00e2micos com o m\u00ednimo de codifica\u00e7\u00e3o poss\u00edvel. Saiba mais.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/09\/what-is-jquery.png","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Steve Bonisteel","Tempo estimado de leitura":"16 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"O que \u00e9 jQuery? Um Olhar Sobre a Biblioteca JavaScript mais Usada da Web","datePublished":"2022-09-09T07:57:11+00:00","dateModified":"2025-10-01T20:03:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/"},"wordCount":2767,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/09\/what-is-jquery.png","keywords":["JavaScript","jQuery","languages"],"inLanguage":"pt-PT"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/","url":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/","name":"O que \u00e9 jQuery? Um Olhar Sobre a Biblioteca JavaScript mais Usada da Web","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/09\/what-is-jquery.png","datePublished":"2022-09-09T07:57:11+00:00","dateModified":"2025-10-01T20:03:23+00:00","description":"A biblioteca jQuery JavaScript de c\u00f3digo aberto ajuda os desenvolvedores a construir aplicativos web din\u00e2micos com o m\u00ednimo de codifica\u00e7\u00e3o poss\u00edvel. Saiba mais.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/09\/what-is-jquery.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/09\/what-is-jquery.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Frameworks JavaScript","item":"https:\/\/kinsta.com\/pt\/topicos\/frameworks-javascript\/"},{"@type":"ListItem","position":3,"name":"O que \u00e9 jQuery? Um Olhar Sobre a Biblioteca JavaScript mais Usada da Web"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/52730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=52730"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/52730\/revisions"}],"predecessor-version":[{"id":53706,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/52730\/revisions\/53706"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52730\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52730\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52730\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52730\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52730\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52730\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52730\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52730\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52730\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52730\/translations\/dk"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52730\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/52731"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=52730"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=52730"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=52730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}