Artigos de Tecnologia e Negócios > Front-end

jQuery: DOM, AJAX e Máscaras

Mario Souto
Mario Souto

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.

Capa do post, imagem do topo do site do jQuery

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:

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

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>')

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

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

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.

Leia também:

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana