O que é jQuery: diferenças para o JavaScript, como usar AJAX, eventos e máscaras

jQuery é uma biblioteca JavaScript criada para facilitar a manipulação do DOM (Document Object Model), fazer requisições AJAX de maneira simples e adicionar funções como máscaras em campos de formulário.

Apesar do crescimento de frameworks modernos como React, Angular e Vue, muitos projetos ainda usam o jQuery pela sua praticidade. 

Nesse artigo vamos fazer um tour por alguns dos recursos mais importantes que o jQuery possui e que podem economizar muito tempo de stackoverflow. 

Como o jQuery para manipular no DOM: exemplos práticos para inciantes 

O jQuery, nada mais é do que uma abstração ou em outras palavras, uma forma "mais fácil" de manipular os elementos presentes em uma página HTML via JavaScript através do DOM Document Object Model, que é um objeto JavaScript que nos permite ter acesso a tudo que tem dentro do HTML e fazer alterações.

Ou seja tudo o que é feito via jQuery você consegue fazer via JavaScript puro. 

Porém no passado, existia uma complexidade bem grande em fazer esse tipo de manipulação, que era garantir que o código que fizemos rodasse em todos os navegadores. 

Selecionando elementos da página com jQuery: A principal magia por trás da função $() do jQuery 

Se você quer saber como selecionar links de um site, via jQuery precisamos somente escrever o seguinte código: 

$('a') 

Resultado após colocar o código que seleciona todos os elementos via JavaScript puro no console do site https://jquery.com/. 

Enquanto que via JavaScript puro nós precisamos escrever apenas: 

Criando elementos com jQuery 

A função $() no jQuery possui vários super poderes, mas os mais utilizados no dia a dia são os de selecionar elementos e o de criar estruturas HTML. 

$('<div>Eu sou um elemento criado via jQuery</div>') 

O resultado no console pode ser meio estranho, mas vale ressaltar que o jQuery envolve todo o código que estamos mexendo com uma "capa" ou objeto que ajuda na padronização de qual código deve ser executado em cada navegador.

Para manipular um elemento, basta escrever de uma forma única e rodar em qualquer lugar desde os primórdios da ferramenta. 

Se quisermos ver o elemento do DOM criado, devemos rodar no console: 

$('<div>Eu sou um elemento criado via jQuery</div>').get(0) 

É importante ressaltar que dessa forma, não temos mais acesso aos recursos do jQuery, o .get(0) basicamente diz que queremos pegar o primeiro item dentro do "objeto jquery" que estamos trabalhando. 

Sempre que fazemos o uso do $() para criar ou selecionar um elemento o resultado da função parece um array, mas na verdade o jQuery sempre retorna um objeto com vários itens em uma estrutura que chamamos de array-like, pois ele parece um array mas não possui recursos como .map, .filter e outras funções comuns para um array de verdade. 

Caso queira percorrer uma lista de elementos com jQuery, o correto é utilizar a função .each como no exemplo abaixo: 

$('li').each(function (index, element) { 
    console.log(index, element, this) // o this aqui retorna o próprio elemento que estamos trabalhando, mas como o this no JavaScript é meio confuso, normalmente eu recomendo usar o element. É importante ressaltar que em ambos os casos precisamos passar o this ou o element como argumento para a função `$()`, para que ela envolva o elemento novamente na capa do jQuery e nós possamos trabalhar em cima da sua API novamente. 
})

Como usar eventos de clique no jQuery 

Para adicionar um evento de click ou qualquer outro tipo para uma tag HTML, tudo o que precisamos fazer é um dos códigos abaixo: 

$('button').click(function (index, element) { 
    console.log('click!', index, element) 
}); 
$('button').on('click', function (index, element) { 
    console.log('click!', index, element) 
});

Por padrão o código anterior vai adicionar o evento para todos os elementos da página, por isso já deixo aqui que também é possível trabalhar com o conceito de event delegation que é mais performático que o mostrado no exemplo anterior, e vai funcionar perfeitamente em casos onde você tenha elementos que sejam adicionados dinamicamente na página. 

Um outro tópico, importante de tomar cuidado é que como todas as alterações são feitas de forma global, é importante criar "escopos" prefixando seletores por página, seja trabalhando via módulos ou alguma outra estratégia que julgar interessante.

Eu particularmente acho bem interessante o formato que o pessoal do BootStrap criou os componentes jQuery dele na versão 3 da biblioteca sempre utilizando data atributos para não ficar preso nas classes do CSS. 

Como criar "componentes dinâmicos com jQuery" no estilo React? 

Hoje em dia com recursos mais modernos na linguagem JavaScript como a template string, é possível criarmos elementos dinamicamente de forma bem similar a como é feito no React: 

O array que usamos poderia ser a resposta de uma API qualquer e tudo funcionaria normalmente. 

Como selecionar elementos pai e filho no jQuery 

Se a partir de um elemento você quiser fazer um filtro mais específico se aprofundando nos elementos filhos, basta utilizar a função .find(): 

$('section').find('a'); 

Já se a partir de um elemento filho você quiser selecionar o elemento pai com um nível voltando para cima no html, você pode utilizar o .parent() ou se quiser selecionar todos os anteriores, basta utilizar .parents() 

$('a').parent(); 
$('a').parents();

Caso você queira procurar a partir de um filho o pai mais próximo subindo até a tag html na raíz de tudo, você pode utilizar o .closest(); 

$('a').closest('html'); 

Como alterar atributos de elementos HTML usando jQuery 

Como disse anteriormente, o jQuery é simplesmente uma casca em volta das funcionalidades padrão do DOM e para alterar atributos, ao invés de utilizarmos .getAttribute ou setAttribute, utilizamos a função .attr() 

$('a').attr('id') // pega o id das tags a 
$('a').attr('data-teste', 'valor no data atributo') // atribui um valor para um atributo das tag a

Existem diversas funções específicas para lidar com atributos que podem ser super úteis como addClass e removeClass, mas no geral o attr vai resolver boa parte dos problemas. 

Existem diversas funções específicas para lidar com atributos que podem ser super úteis como addClass e removeClass, mas no geral o attr vai resolver boa parte dos problemas. 

Como fazer requisição AJAX com jQuery? 

$.getJSON 

Hoje em dia é super comum trabalharmos com APIs para pegarmos dados de diversos serviços e só então mostrar algo para o usuário, muito antes da Fetch API ser muito usada ou o próprio axios, o próprio jQuery já possuía uma alternativa embutida com a lib que facilitava trabalhar com as requisições entre browsers.

Se quisermos só pegar dados de algum serviço podemos executar o código abaixo 

$.getJSON('https://api.github.com/users/omariosouto', (response) => { 
console.log(response) 
})

$.ajax 

$.ajax({ 
url: 'https://api.github.com/users/omariosouto', 
method: 'get', 
success: (response) => { 
console.log(response) 
}, 
error: () => { 
console.log('Deu erro') 
}, 
complete: () => { 
console.log('Executado depois de erro/sucesso') 
} 
})

Antigamente, era comum utilizar o JSONP (dataType: 'jsonp') para contornar algumas restrições de CORS em APIs que ofereciam suporte a essa técnica. Atualmente, porém, essa abordagem é considerada legada e raramente é utilizada.

Em projetos modernos o ideal é configurar corretamente o CORS no servidor ou utilizar um proxy para intermediar a requisição. 

Solucionando problemas comuns com jQuery 

Históricamente o jQuery possui diversas soluções para problemas comuns da web, segue abaixo uma listinha com alguns dos mais comuns que ele resolveu com libs que funcionam muito bem até os dias de hoje. 

Como criar máscaras de campos com jQuery Mask: 

É comum também a dúvida sobre como fazer máscara sem jQuery. Existe a opção de usar HTML5 (pattern) ou bibliotecas JavaScript puras como VanillaMasker para casos onde se deseja evitar carregar o jQuery em projetos mais modernos.

Para trabalhar com máscaras no jQuery, sem precisar de regex ou algo do tipo, tudo o que precisamos fazer é adicionar a lib jQuery Mask e executá-las ao carregar de uma página web um ou mais dos códigos abaixo.

Exemplo de máscara de CPF com jQuery:

$('.date').mask('00/00/0000'); 
  $('.time').mask('00:00:00'); 
  $('.date_time').mask('00/00/0000 00:00:00'); 
  $('.cep').mask('00000-000'); 
  $('.phone').mask('0000-0000'); 
  $('.phone_with_ddd').mask('(00) 0000-0000');

Os patterns aqui ficaram super bem abstraídos e você pode ver como usar melhor acessando a documentação da lib aqui 

Outras bibliotecas úteis 

• Swiper: é uma das bibliotecas mais populares para criar carrosséis e sliders responsivo. Possui suporte a gestos em dispositivos móveis, autoplay, paginação, navegação e diversos efeitos de transição sendo amplamente utilizada em projetos modernos. 
• SweetAlert: Eu tenho certezae que várias vezes você já pensou "Como colorir o alert do navegador?" essa lib sem dúvidas é uma resposta para essa pergunta, relativamente leve e super completa é uma alternativa quando você precisa dar um feedback mais bonitnho para o usuário e por algum motivo isso não foi inicialmente planejado no sistema (já passei por vários casos assim). 
• GSAP com ScrollTrigger: É uma das soluções mais completas para criar anomações controladas pelo Scroll. Permite sincronizar animações, criar transições complexas e desenvolver experiências interativas semelhantes às encontradas em páginas de apresentação de produtos.  

JQuery vale a pena? Quando usar?

Mesmo com o uso da biblioteca não sendo mais tão popular assim em projetos novos, o jQuery possui um pacotão de soluções para facilitar a vida em diversos casos, seja para trabalhar com manipulação de elementos, ajax e até mesmo resolver diversos problemas comuns da web relacionados a validação e componentes interativos. 

Ainda me arrisco a falar que em diversos casos onde você só precisa fazer uma coisa simples ele pode ser uma boa saída, ao invés de utilizar um framework JavaScript do momento. E caso você queira mais dicas sobre o mundo do Front End, da uma olhada na minha série aqui na Alura Fronteiras do Front End 

E ai quer conhecer mais sobre o jQuery ?? Aqui na Alura temos uma Formação Front-end onde além de aprender HTML, CSS e JavaScript, você ainda vai aprender muito mais sobre o jQuery 

Por hoje é isso, espero que tenha gostado, em breve trarei mais dicas sobre diversos outros tópicos relacionados a Front End, não deixe de me seguir nas minhas redes sociais e acompanhar meus outros artigos em meu site pessoal https://mariosouto.com.