Equivalentes nativos de JavaScript para funções jQuery

Conheça equivalentes nativos de JavaScript para funções jQuery e saiba como aumentar o desempenho de seus projetos web.

Ir para o artigo

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.

//----Pega todas as divs na página---------

/* jQuery */
$("div")

/* Equivalente nativo */
document.getElementsByTagName("div")

//----Pega todos pela classe CSS---------

/* jQuery */
$(".my-class")

/* Equivalente nativo */
document.querySelectorAll(".my-class")

/* Equivalente nativo RÁPIDO */
document.getElementsByClassName("my-class")

//----Pega pelo seletor CSS----------

/* jQuery */
$(".my-class li:first-child")

/* Equivalente nativo */
document.querySelectorAll(".my-class li:first-child")

//----Pega o primeiro elemento pelo seletor CSS----

/* jQuery */
$(".my-class").get(0)

/* Equivalente nativo */
document.querySelector(".my-class")

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.

//----"Anexa" (append) elementos HTML----

/* jQuery */
$(document.body).append("
"); /* Equivalente nativo ruim */ document.body.innerHTML += "
"; /* Equivalente nativo MUITO MELHOR */ var frag = document.createDocumentFragment(); var myDiv = document.createElement("div"); myDiv.id = "myDiv"; var im = document.createElement("img"); im.src = "im.gif"; myDiv.appendChild(im); frag.appendChild(myDiv); document.body.appendChild(frag); //----"Precede" (prepend) elementos HTML---- // Mesmo que o acima, exceto pela última linha document.body.insertBefore(frag, document.body.firstChild);

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!

// Pegando a referência do elemento no DOM
var el = document.querySelector(".main-content");

//----Adicionando uma classe------

/* jQuery */
$(el).addClass("someClass");

/* Equivalente nativo */
el.classList.add("someClass");

//----Removendo uma classe-----

/* jQuery */
$(el).removeClass("someClass");

/* Equivalente nativo */
el.classList.remove("someClass");

//----Verificando se tem uma classe---

/* jQuery */
if($(el).hasClass("someClass"))

/* Equivalente nativo */
if(el.classList.contains("someClass"))

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.

// Pegando a referência do elemento no DOM
var el = document.querySelector(".main-content");

//----Especificando múltiplas propriedades CSS----

/* jQuery */
$(el).css({
  background: "#FF0000",
  "box-shadow": "1px 1px 5px 5px red",
  width: "100px",
  height: "100px",
  display: "block"
});

/* Equivalente nativo */
el.style.background = "#FF0000";
el.style.width      = "100px";
el.style.height     = "100px";
el.style.display    = "block";
el.style.boxShadow  = "1px 1px 5px 5px red";

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:

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS