Seria difícil exagerar o impacto que jQuery teve no desenvolvimento web depois que a biblioteca JavaScript de código aberto foi lançada há mais de 15 anos. Uma caixa de ferramentas que criou uma nova abreviação para a programação JavaScript, de outra forma complexa, jQuery continua a fazer jus ao lema de seus desenvolvedores: “Escreva menos, faça mais”

Ainda hoje, jQuery é popular entre os desenvolvedores profissionais, enquanto outros com pouca ou nenhuma experiência em programação podem usar a biblioteca para adicionar funcionalidades avançadas aos seus sites. Aqui está o que está por trás de uma das maiores histórias de sucesso do desenvolvimento web.

Quão popular é o jQuery?

A pesquisa StackOverflow de 2022 sobre tecnologias web utilizadas por desenvolvedores profissionais descobriu que pouco mais de 29% dos mais de 45.000 entrevistados estavam trabalhando com jQuery. Entre as bibliotecas JavaScript, o jQuery foi o segundo colocado apenas no React.js, a biblioteca desenvolvida pela primeira vez no Facebook (agora Meta) em 2011 e que agora é abraçada por mais de 44% desses desenvolvedores.

Frameworks e tecnologias populares da web em 2022
Frameworks e tecnologias populares da web em 2022. (Fonte de imagem: StackOverflow)

Mas os projetos atuais dos desenvolvedores web não contam a história toda. Baseado nas tendências da tecnologia da Internet da BuiltWith, jQuery foi encontrado em mais de 80 milhões de sites em 2022. Isso é uma enorme vantagem sobre os quase 11 milhões de sites que rodam o React.

A biblioteca jQuery tem sido agregada ao núcleo do WordPress por mais de uma década, tornando-a disponível para centenas de temas que dependem de sua funcionalidade para criar sites dinâmicos. Drupal é outro sistema de gerenciamento de conteúdo popular que incluiu o jQuery entre seus componentes principais. Não importa quais tecnologias são as atuais favoritas dos desenvolvedores, jQuery continua sendo a biblioteca JavaScript mais utilizada na web.

Uma breve história do jQuery

A batalha dos navegadores tem sido travada desde o início da web, e os desenvolvedores sempre foram vítimas. Em 2006, quando o desenvolvedor web John Resig revelou o jQuery, o navegador Internet Explorer da Microsoft era o líder indiscutível do mercado – uma inversão da vantagem da Netscape menos de uma década antes.

Na época, o novo Firefox da Mozilla tinha uma participação 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íder de mercado atual, não existia. Programadores de JavaScript como a Resig lutavam regularmente para escrever código que fosse executado em todos os navegadores.

Sua nova biblioteca jQuery foi construída para resolver as diferenças na forma como o JavaScript foi implementado por esses navegadores e ajudar os desenvolvedores a escrever menos código enquanto realizavam tarefas como essas:

  • Manipulando os elementos HTML em uma página web
  • Modificando dinamicamente o CSS
  • Respondendo a eventos como cliques de mouse e pressionamentos de teclas
  • Manuseio de pedidos Ajax para atualizar o conteúdo de uma página sem recarregar

Após o lançamento da biblioteca pela Resig, outros desenvolvedores construíram aplicativos em cima do jQuery, muitas vezes compartilhando seu trabalho como plugins para tornar novas funcionalidades disponíveis para todos.

O que é jQuery UI?

jQuery UI é uma coleção popular de plugins projetados para melhorar as interfaces do usuário. É visto como um companheiro “oficial” do núcleo da biblioteca jQuery e adiciona uma série de efeitos especiais e widgets, tais como: data-pickers, barras de progresso, barras deslizantes, giratórias e painéis com abas ou dobráveis.

Qual é a diferença entre jQuery e JavaScript?

É importante saber que jQuery é JavaScript. Quando você usa jQuery, você está trabalhando com instâncias de objetos JavaScript que refletem as convenções de nomenclatura de jQuery para métodos (funções) e propriedades. Vamos dar uma olhada no vanilla JavaScript e jQuery, abordando a mesma tarefa.

Aqui está um trecho de HTML em algum lugar em uma página da web:

<p id="target">Old text</p>

O código Vanilla JavaScript que pode encontrar o elemento <p> com o “target” id – e depois substituir o texto entre as tags – poderia se parecer com isto:

const content = document.getElementById( "target" );
content.textContent = "New text";

O método getElementById() do JavaScript retorna um objeto que inclui o HTML e o conteúdo de texto do parágrafo com o “alvo” id. O objeto é atribuído à referência constante content, então sua propriedade textContent é alterada para “Novo texto”.

O JavaScript permite a você utilizar métodos em cadeia, tornando possível alcançar o acima descrito com uma única afirmação:

 document.getElementById( "target" ).textContent = "New text";

Não surpreende, então, que você também possa realizar ações jQuery em cadeia. Para mudar “texto antigo” para “texto novo” usando jQuery, você pode fazer isso:

$( "#target" ).text( "New text" );

O símbolo do dólar ($) é um abreviação para jQuery, e ( "#target" ) é um exemplo de um seletor jQuery. Neste caso, o seletor está procurando por um elemento HTML com o id do nosso parágrafo alvo. O método jQuery text() é acorrentado para fazer do “Novo texto” o conteúdo do parágrafo.

Como usar jQuery em seu site

Adicione jQuery ao seu site, ligando o código da biblioteca a partir das páginas do site. A biblioteca jQuery pode estar em seu servidor web ou em uma rede de entrega de conteúdo acessível ao público (CDN). O site oficial da jQuery pode conectar você com as últimas versões da biblioteca.

A biblioteca jQuery está disponível em JavaScript minificado (comprimido) para carregamento rápido na produção ou não comprimido para legibilidade e depuração.

O site oficial da jQuery
O site oficial da jQuery

Você também irá escrever pelo menos um pouco de JavaScript para invocar o jQuery e resolver tarefas específicas para o seu aplicativo web. No HTML das páginas do seu site, você pode fazer um link para a biblioteca jQuery e para o arquivo que contém seu código desta forma:

<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>

Neste exemplo, a versão 3.6.0 de jQuery e seu código específico do site em um arquivo chamado my_script.js estão localizados no diretório/js/ no site. A biblioteca jQuery está normalmente incluída na seção <head> de uma página da web. É comum que os desenvolvedores coloquem alguns links para arquivos JavaScript, incluindo código que depende da biblioteca jQuery, perto do final de uma página, geralmente um pouco antes do fechamento da tag <body>. Você sempre vai querer que qualquer código específico do site que invoque jQuery apareça após o link para a própria biblioteca.

Linkando o jQuery em um CDN

A biblioteca jQuery é tão onipresente em toda a web que há uma boa chance de que um visitante do seu site já tenha a biblioteca em cache no seu navegador para vários CDNs. Nós podemos modificar o snippet HTML acima para fazer uso da rede de entrega de conteúdo JavaScript do Cloudflare desta forma:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>

Invocando jQuery em seu aplicativo

Ao escrever seu aplicativo jQuery, uma melhor prática é confirmar que a página web terminou de carregar antes que seu código comece a ser executado. Você pode testar isso usando o método ready(), que retira o seu código quando o documento tiver carregado, assim:

$(document).ready(function() {
  // Your jQuery application will go here
});

Esse começo para um aplicativo jQuery é tão comum que os desenvolvedores da biblioteca desenvolveram uma sintaxe ainda mais breve:

$(function() { 
  // Your jQuery application will go here
});

Selecionando elementos no DOM com jQuery

A base da maioria dos aplicativos jQuery é a capacidade de atravessar a estrutura de uma página web como um objeto (o modelo de objeto de documento, ou DOM) e direcionar vários elementos dentro do HTML. Selecionar um elemento (ou um grupo de elementos) é o passo antes de fazer algo com esse elemento, como mudar sua aparência ou atualizar o conteúdo próximo. jQuery selectors target DOM properties em uma variedade de maneiras. As mais comuns incluem:

  • Pelo nome do elemento HTML (tag)
  • Por propriedades CSS (incluindo IDs e nomes de classe)
  • Pela posição relativa de um elemento dentro do DOM
  • Pelo valor do conteúdo nos campos do formulário
  • Pelo estado atual de um elemento

Aqui estão alguns exemplos:

// Select all HTML paragraph tags in a document
$( "p" );

// Select the element with the ID "myID"
$( "#myID" );

// Select all elements with the CSS class name "myClass"
$( ".myClass" );

// Select all input, textarea, select, and button elements in a form
$( ":input" );

// Select the children of some other element
// (In this case, the entries in an unordered list)
$( "ul > li" ); 

// Select all anchors with the rel attribute “nofollow”
$( "a[rel='nofollow']" ); 

// Select all checkboxes in a “checked” state
$( "input:checked" )

Você pode combinar os seletores jQuery para uma segmentação mais específica. Exemplos:

// HTML paragraph tags with the CSS class “myClass”
$( "p.myClass" ); 

// HTML paragraphs with the text “Kinsta” anywhere within them
$( "p:contains('Kinsta')" ); 

// HTML div tags that have at least one paragraph tag as a descendent
$( "div:has(p)" ); 

// The first entry in any unordered list with the CSS class “myList” 
$( "ul.myList li:first" );

Manipulando o DOM com jQuery

Agora que você sabe como selecionar vários elementos dentro de uma página da web, você pode modificá-los usando os métodos jQuery. Como mencionado anteriormente, você pode frequentemente encadear essas ações para fazer muita coisa com pouca codificação. Alguns exemplos:

// Select the element with the ID “alert” and add a red background
$( "#alert" ).css( "background-color", "red" ); 

// Select the element with the ID “alert” and add the class “urgent” to its markup
$( "#alert" ).addClass( "urgent" ); 

// Find any paragraph with the class “myName” and make its content “Kinsta”
$( "p.myName" ).text( "Kinsta" );

// Like the statement above, but with support for HTML markup
$( "p.myName" ).html( "<strong>Kinsta</strong>" ); 

// Add the attribute/value rel=”nofollow” to every anchor
$( "a" ).attr( "rel", "nofollow" );

// Hide the element with the ID “myDiv” (but keep it in the DOM)
$( "#myDiv" ).hide(); 

// Make the element hidden above visible again
$( "#myDiv" ).show();

// Remove from the DOM everything INSIDE the element with the ID “myDiv”
$( "#myDiv" ).empty(); 

// Remove from the DOM the entire element with the ID “myDiv”
$( "#myDiv" ).remove();

Manuseio de eventos com jQuery

O tipo de manipulação DOM descrito acima passaria despercebido pelos visitantes da web se tudo acontecesse assim que uma página fosse carregada. É 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ência verdadeiramente responsiva.

Detectando cliques do mouse com jQuery

Responder ao clique de um mouse (ou um toque em um dispositivo touch-screen) é uma tarefa comum para aplicativos web. Combinamos alguns jQuery e HTML em um exemplo que também aproveita o objeto jQuery incorporado event, que conterá informações úteis sobre nosso “evento de clique”:

<script>
// Invoke jQuery
$(document).ready(function () {
    // Assign “click” method to all button elements
    // Our function passes the built-in object with event details
    $( "button" ).click(function ( event ) { 
        // Make sure all button backgrounds are white
        $( "button" ).css( "background-color", "white" );
        // Change our H2 text to report the ID of the clicked button
        $( "#buttonReport" ).text("You clicked " + event.target.id); 
        // Set the background color of the clicked button to red 
        $( "#" + event.target.id ).css("background-color", "red");
    });
}); 
</script>

<h2 id="buttonReport">Click a button!</h2>
<button id="Button1">Button 1</button>
<button id="Button2">Button 2</button>
<button id="Button3">Button 3</button>

O resultado:

Detectando cliques do mouse
Detectando cliques do mouse

Detectando o movimento do mouse com jQuery

Conhecer a localização atual do ponteiro do mouse sobre uma página da web é útil em muitos aplicativos web de resposta rápida. Aqui está um exemplo de como jQuery pode ajudar:

<script>
$(document).ready(function () { 
    // Detect when the mouse is over a div with the mouseover() method  
    $( "div" ).mouseover(function ( event ) { 
        // Make the div under the mouse grey and taller
        $( "#" + event.target.id ).css({ 
           "background-color" : "lightgrey",
           "height" : "8em"
        });
    }); 
    // Detect when the mouse moves away with the mouseout() method 
    $( "div" ).mouseout(function ( event ) { 
        // Return the size and color of the div to its original state
        $( "#" + event.target.id ).css({
           "background-color" : "white",
            "height" : "4em"
        });
    });
}); 
</script>

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>

O exemplo acima também mostra como o método jQuery css() pode ser usado para definir múltiplas propriedades de CSS de uma só vez. Aqui está o resultado:

Detectando eventos com o mouse
Detectando eventos com o mouse

Manuseio de pedidos Ajax com jQuery

Uma grande parte da popularidade do jQuery é sua capacidade de simplificar os pedidos Ajax que aplicativos web podem usar para trocar dados com servidores sem recarregar páginas. A biblioteca tem muitas ferramentas para gerenciar as solicitações Ajax de dados nos formatos texto simples, HTML, XML e JSON. A abordagem jQuery é oferecer opções de abreviação para as tarefas mais comuns. Uma das mais simples na caixa de ferramentas do Ajax é o método load():

<div id="myContent">Replace Me</div>
<button>Load Content</button>

<script> 
// Request the file content.php from the server after a button is clicked.
// Place the results in the HTML element with the ID “myContent” 
$( "button" ).click( function (){ 
    $( "#myContent" ).load( "content.php" );
}); 
</script>

Muita coisa está acontecendo lá com apenas três linhas de JavaScript e dois elementos HTML. O resultado seria algo parecido com isto:

jQuery load() método adiciona conteúdo sem uma atualização da página
jQuery load() método adiciona conteúdo sem uma atualização da página

Como usar o jQuery UI

Adicione plugins jQuery UI aos seus projetos, e você terá acesso a muitos efeitos especiais e widgets construídos na biblioteca principal do jQuery. Aqui está um exemplo usando o jQuery UI para adicionar um calendário pop-up como um pegador de data dentro de um formulário web.

Primeiro, adicione a biblioteca jQuery UI e seu CSS de suporte às suas páginas web. Neste exemplo, nós estamos fazendo um link para as bibliotecas no CDN JavaScript do Cloudflare junto com a biblioteca jQuery principal:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />

Em seguida, adicione um campo do formulário input dentro do seu HTML e, via JavaScript, anexe o método datepicker() da jQuery UI usando um seletor:

<label for="myDate">Date:</label>
<input type="text" id="myDate" name="myDate">

<script>
$( function() { 
    $( "#myDate" ).datepicker();
} );
</script>

Clicando no campo do formulário input agora será lançado o selecionador de datas:

O selecionador de datas jQuery UI.
O selecionador de datas jQuery UI.

Como usar jQuery no WordPress

A biblioteca jQuery vem em conjunto com o WordPress e é um componente chave de muitos temas WordPress. Mesmo que o seu tema atual ainda não esteja usando jQuery, você pode aproveitar o registro de dependências JavaScript dentro do WordPress para ter todo o seu código jQuery pronto e funcionando.

Você fará isso editando o arquivo functions.php que é parte do seu tema. Uma atualização de tema pode sobrescrever esse arquivo, então é uma boa prática manter suas mudanças seguras, criando primeiro um tema infantil e editando o arquivo functions.php lá. No mínimo, crie um backup manual do WordPress antes de prosseguir.

Registrando seu jQuery JavaScript em functions.php

Você pode usar um cliente FTP ou SFTP para transferir o arquivo functions.php entre o seu desktop e o servidor web para editá-lo. Os administradores do WordPress também podem modificar o arquivo functions.php dentro do CMS:

No painel, selecione Appearance > Theme File Editor.

Lançamento do Editor de Arquivos de Temas
Lançamento do Editor de Arquivos de Temas

Clique em Funções Temáticas no menu do lado esquerdo.

Dentro do Editor de Arquivos de Temas.
Dentro do Editor de Arquivos de Temas.

O conteúdo do seu arquivo functions.php dependerá do tema atualmente ativo. Acima estão as funções do tema Twenty Twenty-One. Você pode adicionar seu próprio script jQuery à configuração do seu site usando a função do utilitário WordPress wp_enqueue_script(). Aqui está o modelo para essa função:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

E aqui está o que tudo isso significa:

  • $handle: O nome fácil de usar ligado a este script. (A biblioteca central jQuery já está registrada no WordPress com o handle jquery)
  • $src: O caminho e nome do arquivo ou URL que aponta para o código fonte JavaScript.
  • $deps: Os handles de quaisquer outras fontes JavaScript que este script requer para funcionar corretamente.
  • $ver: Qualquer número de versão que você tenha atribuído ao seu código-fonte JavaScript.
  • $in_footer: Se definido para true, o script será adicionado perto do final da página. Caso contrário, os scripts serão colocados no bloco <head>.

Depois que um script é enfileirado, ele é adicionado a uma página com a função add_action(). Veja tudo em ação adicionando um bloco como este na parte inferior do seu arquivo functions.php:

// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
    wp_enqueue_script( 
       'my_script'
       get_template_directory_uri() . '/assets/js/my_script.js',
       array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
       '1.0',
       true ); 
} 
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

Acima, o novo script jQuery recebe o handle my_script, e a função do utilitário WordPress get_template_directory_uri() ajuda a construir uma URL para o arquivo JavaScript dentro dos diretórios do tema.

Um array de outras alças diz ao WordPress que meu_script depende do núcleo jQuery, do núcleo jQuery-UI e do plugin jQuery-UI datepicker Finalmente, nós designamos o script número da versão 1.0 e pedimos que ele fosse colocado perto do final da página.

Como carregar o jQuery a partir de um CDN no WordPress

Nós sabemos que jQuery pode ser servido a partir de várias redes de entrega de conteúdo. Nós também sabemos que, fora da caixa, o WordPress quer carregar jQuery e muitos plugins jQuery do sistema de arquivos do servidor web local.

Você pode mudar esse comportamento eliminando as informações de configuração registradas com o manípulo do jquery existente e reescrevendo-as. Para fazer isso, adicione um bloco de código em functions.php começando com a função wp_deregister_script():

// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
    wp_deregister_script('jquery');
    wp_register_script(
        'jquery', 
        'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
         null,
        '3.6.0',
         False
    ); 
    wp_enqueue_script( 
        'my_script'
        get_template_directory_uri() . '/assets/js/my_script.js',
        array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
        '1.0',
        true
    ); 
 } 
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

O handle jquery foi atribuído à biblioteca jQuery no CDN Cloudflare e permanece uma dependência para o my_script local. Você pode usar a mesma abordagem para puxar outros componentes jQuery – como jQuery-UI – de um CDN.

Para mais informações sobre jQuery e WordPress, temos um guia de solução de problemas de configuração que podem resultar em erros como “jQuery Is Not Defined” (jQuery não está definido)

Resumo

Por mais de 15 anos, a biblioteca de código aberto jQuery tem ajudado os desenvolvedores a construir aplicativos web ricas e dinâmicas com o mínimo de codificação possível. Hoje, o jQuery é usado em mais sites do que qualquer outra biblioteca JavaScript.

Ele também está empacotado com alguns sistemas de gerenciamento de conteúdo populares, incluindo o WordPress. Além disso, um ecossistema robusto de plugins jQuery criados por outros programadores JavaScript ajuda os desenvolvedores com diferentes níveis de experiência a adicionar funcionalidades avançadas aos seus sites.

E se você quiser construir sites e aplicativos a partir do jQuery, dê uma olhada nos planos de hospedagem gerenciada de WordPress da Kinsta e nas soluções de hospedagem de aplicativos e banco de dados.