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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
//----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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//----"Anexa" (append) elementos HTML---- /* jQuery */ $(document.body).append("<div id='myDiv'><img src='im.gif'/></div>"); /* Equivalente nativo ruim */ document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>"; /* 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!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 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!