Existem 3 linguagens de programação que dominam a internet e são fundamentos dela: HTML, CSS e JavaScript. Embora haja um debate de HTML e CSS não serem linguagens de programação de fato (e sim de marcação e estilização), o JavaScript é responsável por dar mais vida e funcionalidades às páginas da web. Pensando em ajudar programadores e proprietários de site a terem mais poder com JavaScript, foi criado o jQuery. 

Fique tranquilo que, por mais que a introdução possa ter soado técnica, explicaremos em detalhes o que é o jQuery, quais os seus recursos e o que você precisa para que ele funcione corretamente no seu site. Será uma jornada divertida, ideal para programadores que ainda não entenderam a proposta dessa biblioteca ou para proprietários de sites que desejam descobrir o potencial dela para suas páginas. 

Detalhe: esse guia foi escrito considerando que você desconhece o jQuery e é um usuário iniciante. É importante destacarmos isso, para não achar que trataremos de conceitos mais avançados como API ou DOM. 

O que é o jQuery?

jQuery é uma biblioteca JavaScript. Uma biblioteca JavaScript é um conjunto de códigos pré-prontos e otimizados para simplificar a linguagem aos seus usuários. Em outras palavras, o jQuery é feito para deixar a linguagem JavaScript mais fácil para determinadas tarefas. O slogan da ferramenta, que é “Escreva menos, faça mais” resume bem essa ideia.

Uma das grandes vantagens em utilizar o jQuery, está no fato dele funcionar de forma concisa em vários navegadores diferentes. Um código em JavaScript, por exemplo, pode ter um comportamento incomum em determinado navegador de internet, já com jQuery, essas anomalias são reduzidas e se tem a certeza de que o código funcionará corretamente.

Quais são as vantagens do jQuery?

Vários! Falaremos sobre os mais comuns, mas tenha em mente que como o uso do jQuery é abrangente, podem haver ainda mais vantagens:

• Facilidade de uso: essa biblioteca de códigos transforma o JavaScript quase que em outra linguagem de tão simples que fica. Embora não seja uma característica positiva, para se ter ideia, vários programadores sabem desenvolver pequenos programas em jQuery, mas não sabem em JavaScript puro.
• Manipulação dos elementos de uma página: com jQuery é muito mais fácil controlar botões, divs, seções inteiras ou elementos específicos das páginas de um site.
• Animações: justamente pode permitir a manipulação de elementos a um nível bem minucioso, o jQuery simplifica a criação de animações e transições de página. Fazer isso com JavaScript puro pode despender bastante tempo.
• Plugins: assim como funciona no WordPress, o jQuery também possui plugins que expandem sua funcionalidade. Assim, se torna até mais fácil oferecer recursos extras no seu site.
• Compatibilidade com navegadores: como dito anteriormente, essa biblioteca JavaScript tem a vantagem imensa de ser compatível com diversos navegadores diferentes, dos mais antigos aos mais novos. Isso garante um código mais conciso e a certeza de que os usuários verão o comportamento desejado e não algum erro ou bug.
• Comunidade: o jQuery possui uma das comunidades mais engajadas. Para todo e qualquer problema envolvendo a biblioteca, é comum encontrar diversas soluções em fóruns como o Stack Overflow e até mesmo no YouTube.

Quais as desvantagens do jQuery?

Como visto acima, o jQuery possui diversas vantagens, mas há alguns pontos negativos a serem considerados também.

• Peso adicional no carregamento do site: o JQuery é relativamente pesado e muitas vezes ele é inserido de forma mal pensada. Por exemplo, determinado plugin precisa de um recurso de poucas linhas, mas o programador responsável acaba o solicitando por completo. 
• Desempenho: o jQuery é uma biblioteca que simplifica JavaScript, porém, para isso, ele precisa agrupar diversos códigos, o que acaba gerando perda de desempenho. Em uma página comum, essa perda de desempenho não é tão considerável, mas se o foco forem visitantes via mobile ou conexões mais lentas, é algo a se pensar.
• Aprendizado: sim, o jQuery é simples e relativamente fácil de aprender, mas ainda é um item a mais a se considerar na hora de realizar pequenas alterações na página. Sem falar que é necessário conhecer HTML, CSS e JavaScript antes.

Como instalar e configurar o jQuery no seu site?

O jQuery é um arquivo JavaScript vinculado ao seu HTML. Por isso, há duas formas de instalá-lo em seu site. A primeira forma é baixar uma cópia local e a segunda forma é vincular um arquivo via CDN (Content Delivery Network). 

Qual das duas formas é melhor? Depende. 

Instalar jQuery via link

Instalar o jQuery de forma local, te dá mais controle sobre a versão específica. Isso é interessante quando se precisa de determinada versão para que algum recurso do seu site funcione.

Para instalar dessa forma, baixe a biblioteca no link a seguir, insira ela em uma das pastas do seu servidor e insira o seguinte código antes do fechamento da tag </body> do seu site.

<script src="LINK PARA O CÓDIGO DO JQUERY"></script>

Lembrando que para utilizar códigos feitos para jQuery, eles devem ser inseridos abaixo do código acima. Se forem inseridos acima, pela forma de leitura dos documentos HTML, será solicitado um recurso que não foi carregado ainda. 

Instalar jQuery via CDN

Uma CDN (Content Delivery Network, ou Rede de Distribuição de Conteúdo) é o conjunto de diversos servidores espalhados geograficamente que trabalham para te oferecer algum recurso solicitado pelo servidor mais próximo.

No contexto de instalação do jQuery por uma CDN, significa que estará referenciando e carregando a biblioteca via um desses servidores, sem precisar enviar o código do JavaScript para o seu.

A vantagem de instalar via CDN é o fato de acelerar o carregamento do seu site, principalmente por já estar em cache na maioria dos dispositivos dos usuários, por acessarem sites que apontam para o mesmo CDN e por, depender do servidor, oferecer atualizações automáticas do código.

Para instalar via CDN, basta inserir o código abaixo acima da tag </body>

<script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js</a>"></script>

Agora, independente de que método escolha para a instalação, é bom especificar diretamente uma versão específica do jQuery. Assim, se evita prolemas de compatibilidade, algo comum em atualizações automáticas.

Como instalar o jQuery no WordPress?

Provavelmente muitos visitantes chegarão até essa página para saber como instalar a biblioteca JavaScript mais conhecida do mundo no WordPress. Afinal de contas, essa é uma pergunta bem comum e vários plugins dependem de uma versão específica do WordPress para funcionar.

De forma geral, não é necessário fazer nada. O jQuery já está incluído nativamente no WordPress, uma vez que a própria plataforma precisa dele para executar algumas funções. Mas caso esteja desenvolvendo um plugin ou tema personalizado, é necessário instalar da forma correta, para que seu código não entre em conflito com os já existentes no core do WordPress.

Para isso, é essencial usar a função wp_enqueue_script no seu functions.php. Um exemplo básico de como fazer isso pode ser visto logo abaixo: 

function incluir_jquery() {

    // Desregistra a versão do jQuery incluída pelo WordPress

    wp_deregister_script('jquery');

    // Registra e enfileira a versão do jQuery desejada

    wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js', array(), null, true);

    wp_enqueue_script('jquery');

}

add_action('wp_enqueue_scripts', 'incluir_jquery');

O código resregistra a biblioteca padrão e registra a versão específica que desejar. Como exemplo, usamos a 3.6.4. 

Qual a diferença de códigos JavaScript e jQuery?

Para entendermos como o jQuery atua, mostraremos abaixo o mesmo código, só que um feito em JavaScript puro e outro feito em jQuery.

Animação 

Em JavaScript

meuElemento.style.transition = 'opacity 1s';

meuElemento.style.opacity = '0.5';

Com jQuery

$('#meuId').animate({opacity: 0.5}, 1000);

Pegar o campo de um formulário

Em JavaScript

var valorCampo = document.getElementById('meuCampo').value;

Com jQuery

var valorCampo = $('#meuCampo').val();

Manipular texto

Em JavaScript

meuElemento.textContent = 'Novo Texto';

Com jQuery

$('#meuId').text('Novo Texto');

Esconder e mostrar elemento

Em JavaScript

meuElemento.style.display = 'none'; // Para esconder

meuElemento.style.display = 'block'; // Para mostrar

Com jQuery

$('#meuId').hide(); // Para esconder

$('#meuId').show(); // Para mostrar

Requisição AJAX

Em JavaScript

var xhr = new XMLHttpRequest();

xhr.open('GET', 'meuarquivo.txt', true);

xhr.onload = function() {

    console.log(xhr.responseText);

};

xhr.send();

Com jQuery

$.get('meuarquivo.txt', function(data) {

    console.log(data);

});

Onde aprender jQuery?

Existem vários caminhos para aprender jQuery com facilidade. Como esse é um post inicial, não temos como entrar em tantos detalhes assim. Portanto, ficam as sugestões abaixo:

Documentação oficial

A documentação oficial é um ótimo início, principalmente para adentrar no universo da forma correta, entendendo os principais conceitos diretos de quem desenvolveu. Infelizmente, para muitos, essa etapa acaba se tornando técnica demais. Pensando nisso há outras soluções apresentadas a seguir.

YouTube

No YouTube, a principal vantagem é poder ver e entender o raciocínio de quem escreve códigos usando a biblioteca passo a passo. Assim, se tem uma compreensão bem melhor, se compararmos com a leitura da documentação. Sem falar na variedade de instrutores e estilos de aula. Não recomendamos nenhum canal específico porque sabemos que cada um se adapta de forma diferente a algum estilo de aula, mas a busca do YouTube te ajudará em tutoriais específicos, por exemplo: 

• “Como mostrar uma mensagem ao clicar em um botão com jQuery”. 
• “Como mudar o texto de um elemento ao passar o mouse”.
• “Como criar um efeito de sanfona com jQuery”. 

Livros

Embora seja um caminho pouco usual, os livros, principalmente os “jQuery in Action”, “jQuery for Dummies” e “Learning jQuery”, podem te dar uma boa noção de como essa biblioteca funciona e como utilizá-la em seu site. Adiantamos que são livros voltados para programadores, então se quiser apenas corrigir algum erro de um plugin específico ou tentar usar um script simples, ler livros desse tipo é dar um passo muito grande para um objetivo pequeno.

Sites de tutoriais

Existem sites específicos que tratam sobre jQuery e podem te ajudar a explorar o máximo dessa biblioteca. A maneira mais fácil de encontrá-los é pesquisar por tutoriais no Google, visando resolver seu problema o mais rápido possível. Diferente do YouTube, a vantagem dos sites de tutoriais, é que é bem mais simples copiar e colar o código, facilitando colocar o conteúdo em prática para funcionar logo.

Quais os melhores plugins para jQuery?

Existem inúmeros plugins para jQuery, os mais renomados e recomendados são:

fullPage.js

Plugin perfeito para criação de sites que precisam lidar melhor com o Scroll do mouse e animação dos elementos. Utilizá-lo é muito simples e ele garante que a rolagem seja suave e discreta.

Tiny Slider

Se está procurando maiores opções em slide, esse plugin é o ideal. Com dezenas de demos, cada uma com sua própria funcionalidade, se tem muitas opções de modificar ao seu gosto. 

jQuery File Upload

Com esse plugin, se pode fazer upload de qualquer tipo de arquivo com tamanho ilimitado (mas cuidado com isso por questões de segurança) e até soltá-los diretamente na tela, com o recurso de arrasta e solta.

Select2

O Select2 permite a criação de uma caixa de seleção suspensa totalmente personalizável e extensível. Sua documentação é bem trabalhada evitando possíveis dúvidas.

Ajax AutoComplete

Se precisar de um recurso de preenchimento automático, o Ajax AutoComplete é perfeito. Ele deixa a experiência do usuário bem mais positiva e facilita possíveis buscas.

Conclusão

No artigo de hoje mostramos o que é jQuery, como funciona, como instalar e quais os melhores plugins para ele. Esperamos que esse artigo tenha te ajudado a compreender o poder dessa biblioteca JavaScript. 

Se houver quaisquer dúvidas, por favor, fale conosco na seção dos comentários. Obrigado por ler até aqui. Um forte abraço!