Front-End

Como parar de usar o Jquery

Por em

É muito comum ouvirmos coisas como “programar em Jquery” ou “você está usando Jquery” de forma depreciativa, sinceramente não vejo desta forma, a biblioteca é excelente no que se propoe e se você usar para deveria, manipular o DOM, vai descobrir que agiliza muito o dia a dia, mas se é realmente SEMPRE necessária é outra conversa.

O Jquery foi criado nos primórdios da web, em um momento que precisavamos de alguma organização, em que cada navegador aplicava regras para o Javascript diferentemente de outros, mas estes tempos passaram e hoje temos um suporte muito melhor a linguagem e a necessidade de uma biblioteca para normalizar as coisas já não existe tanto assim, mesmo assim ainda temos a vantagem de acabar escrevendo bem menos com Jquery do que com Javascript nativo.

Veja a seguir algumas formas de evitar o uso do Jquery e usar Javascript quando for necessário.

Seletores

Uma das grandes sacadas do Jquery para quem inicia logo com a biblioteca é a vantagem de se utilizar seletores comuns do CSS para identificar elementos da página, imagine o seguinte HTML:

Com Jquery podemos trazer carregar este elemento de diversas formas:

Mas imagine que você não tem acesso ao Jquery, como faria para repetir o processo somente com Javascript:

Cada linha do exemplo acima faz o mesmo do exemplo anterior com Jquery, note que o getElementsByClassName e o getElementsByTagName retornam uma coleção (funciona como um array na prática, vou me manter prático e chamar de coleção), entao usei o [0] para pegar o primeiro elemento.

Agora, e esse comentário // Outros?

O Javascript tem um outro recurso muito legal, quem quer largar o Jquery vai adorar, ele se chama querySelector, com ele você pode continuar utilizando os seletores que já está acostumado no Jquery:

Mas ele só retorna um único elemento do DOM, se você quiser aplicar algum efeito a vários vai precisar do querySelectorAll e um loop:

Este exemplo muda as cores do background de todos os elementps com class .btn para vermelho, poderia ter usado cores hex também:

Trabalhar com seletores no Javascript é muito simples e existem várias alternativas para facilitar sua vida.

Eventos

No campo de eventos, o Jquery é o melhor, se você quer ouvir um evento de click usamos o click(function(){}) ou on('click', function(){}), com Javascript e sem Jquery também é simples.

No código acima eu simplesmente pego o elemento pela classe btn e adiciono um evento de click com addEventListener, isso quer dizer que quando eu clicar no link a ação dentro do function será executada, neste caso, previnir qualquer ação padrão (o click no link não deverá fazer nada, é o que o event.preventDefault() faz).

Se você quiser ter acesso ao elemento que foi clicado pode usar p event.target, vamos mudar a cor do botão quando ele for clicado?

Legal né!

Manipulação do DOM

Se você quiser manipular o DOM sem utilizar Jquery também é simples, imagine que você quer substituir ou alterar o html dentro de um elemento:

Claro que com Jquery ficaria bem menor, mas vale a pena incluir vários kbytes da biblioteca só para economizar na escrita? Só você pode responder esta!

Versão com Jquery:

Ainda podemos fazer alterações de texto:

Trabalhar classes sem o Jquery:

Mas não são só classes, atributos:

Basicamente, qualquer coisa que o Jquery faz ele vai precisar traduzir para Javascript internamente, básicamente serão executados estes mesmos recursos, afinal de contas Jquery é uma biblioteca escrita em Javascript, isso faz sentido pra você? Estamos eliminando o intermediário.

Requisições Ajax

Uma outra feature que merece destaque são as requisições Ajax, elas podem ser feitas somente com Javascript? É obvio que podem. Atualmente existem duas formas de se fazer isso, uma é relativamente nova e está sendo mais usada, mas pode ser que algum navegador não de suporte, os mais antigos principalmente, a outra forma é totalmente aceita por qualquer navegador, mas seu uso está sendo desestimulado, já que a nova feature é mais simples e poderosa:

– fetch() – modo novo, mas ainda em implantação
– XMLHttpRequest() – modo antigo, com uso desestimulado

Como você deve imaginar, o fetch é bem mais simples, já usa promises e é uma alternativa superior, mas eu acabo usando o Axios, que é um cliente HTTP super simples e que assim como o Jquery vai traduzir internamente para o Javascript nativo, a vantagem (do meu ponto de vista) é que ele inclui configurações e facilidades que são idispensáveis, como configurações padrão de headers, uma URL base padrão quando eu informo uma URL com barra (exemplo: /perfil), interceptadores e outros recursos interessantes, mas eu vou deixar alguns links para você se informar, já que Ajax é um assunto extenso e eu quero deixar para detalhar em outro artigo.

Aulas na School of Net que vão te ajudar:

Alguns links oficiais:

Como a school of Net pode te ajudar a aprender mais sobre Javascript?

Essa é fácil, temos muitos Direto ao Ponto (screencasts que vão direto ao assunto), cursos e planos de estudo:

Você ainda vai poder ir além e aprender algum framework Javascript, como Angular, Vue.js ou React e ai sim, largar o Jquery de vez, ou não!

Usar Jquery não é um crime, ainda mais se você PRECISAR dele por conta de alguma dependência, afinal, se ele está lá e facilita sua vida… só não seja dependente dele e não de ouvidos aos haters.