Frontend
Como parar de usar o Jquery
É 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:
<a hre="https://schoolofnet.com" id="link-da-son" class="btn btn-primary">Visite o nosso site</a>
Com Jquery podemos trazer carregar este elemento de diversas formas:
$('#link-da-son');
$('.btn');
$('a');
// Outros
Mas imagine que você não tem acesso ao Jquery, como faria para repetir o processo somente com Javascript:
document.getElementById('link-da-son');
document.getElementsByClassName('btn')[0];
document.getElementsByTagName('a')[0];
// Outros
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:
document.querySelector('#link-da-son');
document.querySelector('.btn');
document.querySelector('a');
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:
const buttons = document.querySelectorAll(".btn");
for (let i = 0; i < buttons.length; i++) {
buttons[i].style.backgroundColor = "red";
}
Este exemplo muda as cores do background de todos os elementps com class `.btn` para vermelho, poderia ter usado cores hex também:
const buttons = document.querySelectorAll(".btn");
for (let i = 0; i < buttons.length; i++) {
buttons[i].style.backgroundColor = "#ff0000";
}
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.
const button = document.querySelector(".btn");
button.addEventListener('click', function (event) {
event.preventDefault();
});
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?
const button = document.querySelector(".btn");
button.addEventListener('click', function (event) {
event.preventDefault();
event.target.style.backgroundColor = "#ff0000";
});
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:
<div id="app"></div>
<script>
const app = document.getElementById('app');
app.innerHTML = '<h1>Título legal que eu quero colocar</h1>';
</script>
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:
<div id="app"></div>
<script>
$('#app').html('<h1>Título legal que eu quero colocar</h1>');
</script>
Ainda podemos fazer alterações de texto:
$('#app').text('Texto dentro do elemento'); //jquery
// Javascript
const app = document.getElementById('app');
app.innerText = 'Texto dentro do elemento';
Trabalhar classes sem o Jquery:
const app = document.getElementById('app');
//substituir classes
app.className = 'btn btn-danger';
//adicionar classes (note o espaço no início da string)
app.className += ' btn-lg'
//remover todas as classes
app.className = ""
//remover uma classe específica
let appClasses = app.className.split(' ');
for (let i = 0; i < buttons.length; i++) {
if (appClasses[i] === 'classe-que-quero-remove') {
appClasses.splice(i, 1);
}
}
app.className = appClasses.join(' ');
Mas não são só classes, atributos:
const app = document.getElementById('app');
app.getAttribute('href') // valor do html
app.getAttribute('href', 'https://www.google.com'); // altera ou adiciona href e valor
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:
- Cursos e direto ao ponto de Javascript e Jquery (role para baixo para ver)
- Plano de estudo – Javascript para Front-end
- Outros 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.