Incrivelmente, muitos desenvolvedores não sabem que a maioria dos métodos da jQuery têm seus equivalentes nativos em JavaScript que requerem a mesma (ou apenas uma ligeira maior) quantidade de código. E não é preciso fazer uma extensa lista das vantagens de se usar JS puro sempre que possível, já que existem milhares de artigos na web sobre isso.

A seguir, conheça alguns equivalentes de código que demonstram algumas funções jQuery populares juntamente com as suas contrapartes em JavaScript nativo.

Seletores

Seletores são capazes de, facilmente, encontrar elementos no DOM (e isso é o cerne sobre o que a jQuery é). Você pode passar a string de um seletor CSS e ela vai recuperar todos os elementos no DOM correspondentes àquele seletor. Na maior parte dos casos, isso pode ser facilmente alcançado com JavaScript nativo usando a mesma quantidade de código.

Manipulação de DOM

Outra área em que jQuery é frequentemente usada é para manipular o DOM, seja para inserir ou remover elementos. Para fazer isso corretamente com métodos nativos, você definitivamente vai ter que escrever algumas linhas extra de código, mas, claro, você sempre pode escrever suas próprias funções para fazer coisas como essa mais facilmente.

Classes CSS

É muito fácil com jQuery adicionar, remover ou verificar a existência de classes CSS de elementos no DOM. Felizmente, fazer isso com métodos nativos de JavaScript é tão fácil quanto!

Modificação de propriedades CSS

A necessidade de definir e recuperar propriedades CSS usando JavaScript surge a todo tempo. Ao fazer isso, ele é muito mais rápido do que simplesmente definir os estilos individualmente, um a um, ao invés de passá-los todos para a função de CSS da jQuery.

Conclusão

Lembre-se: jQuery é uma biblioteca incrível que faz nossas vidas como desenvolvedores web bem mais fácil! Mas você deve sempre optar por usar equivalentes nativos de JavaScript, caso estejam disponíveis. Isso é especialmente verdadeiro se você estiver usando jQuery dentro de loops e/ou temporizadores.

Principalmente em tempos de aprimoramento e consolidação do web design responsivo, ter preocupação extra com o desempenho de seus projetos web torna-se, mais do que nunca, uma obrigação!

Em relação à compatibilidade dos browsers às funções nativas de JavaScript mostradas, aqui está essa informação: