jQuery: DOM, AJAX e Máscaras

Introdução

O jQuery já foi tão utilizado, que algumas pessoas achavam que ele era uma linguagem diferente do JavaScript que rodava na web. Hoje em dia apesar de frameworks como Angular, React, Vue e outros estejam em alta, ainda existam muitos projetos que utilizam essa ferramenta e é bem provável que na empresa onde você trabalha, você possa precisar mexer em algum projeto que esteja usando essa biblioteca.

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 manipular elementos do das páginas no DOM com jQuery?

O jQuery, mesmo hoje em sua versão 3, 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 quisermos selecionar todos os links de um site, via jQuery precisamos somente escrever o seguinte código:

$('a')

Código do bloco anterior sendo executado no console do navegador

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.
})

Adicionando eventos com 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 trabalhar com "componentes 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.

Selecionando elementos antes e depois de ter um previammente um selecionado

Se a partir de um elemento você quiser fazer um filtro mais específico se aprofundando nos elentos 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');

Alterando atributos de uma tag

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.

Como fazer 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')
    }
})

Se você já teve problema com CORS o jQuery possui uma forma bem legal de resolver isso somente passando no objeto que o $.ajax recebe essa combinação de chave valor dataType: 'jsonp'

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.

Trabalhando com mascaras de campos com jQuery Mask:

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:

  $('.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

SlickJS: Sem dúvidas é uma das bibliotecas mais completas quando o assunto é criar aquele famoso componente amado por vários clientes e não tão puplar assim com o pessoal de UX para fazer os Carrosseis tanto com imagens como com elementos.
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).
FitText: Essa lib eu recomendo para alguns casos específicos, mas no geral ela pode ser uma boa saída quando você está fazendo alguma página que tem um layout muito específico e cada elemento texto precisa ocupar exatamente a quantidade de linhas especificadas no layout, não recomendo como solução para todo caso, mas é sempre bom saber que existe algo para ajudar.
ScrollMe: Sabe aqueles sites que enquanto você da scroll vão fazendo uma série de mágicas e vários elementos pipocam na tela? Essa lib ajuda justamente a fazer isso.
Parallax.JS: Quem já trabalhou em agência sabe que esse é o top 1 efeito solicitado e que da arrepios na espinha quando você vê alguém discutindo sobre ele, o tal do parallax. Essa lib tem uma solução bem legal e usei em vários projetos no passado
ScrollMagic: Já acessou sites tipo o de campanhas de produtos novos da apple com diversas coisas surgindo como se fossem um filme e se perguntou como aquilo é possível de ser feito via Scroll? O scroll magic é uma lib que resolve justamente esse tipo de site e usa o jQuery. E caso você queira uma outra referência deixo a lib Skrollr que também resolve legal esse tipo de site.

Conclusão

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.