MDM Studio | Responsive Design
Compartilhe esta notícia no Facebook

Métodos nativos do Javascript equivalentes a jQuery

Você realmente precisa do jQuery para tudo? Existem duas razões pelas quais jQuery é legal e vale a pena usar:

Possui suporte ao IE6, 7 e 8 e você não precisa criar códigos alternativos para resolver esse problema de compatibilidade e sem a biblioteca jQuery você passaria muito tempo criando funções que já existem e estão disponíveis para utilização imediata.

Para os outros casos, seja pragmático. O jQuery possui 270Kb de códigos genéricos e, geralmente, você não precisa de tudo isso para fazer suas aplicações funcionarem. Sendo assim, vamos inserindo (aos poucos), funções equivalentes que podem ser utilizadas em Javascript Nativo e economizam grande quantidade de código.

Document Object Model - Seletores DOM

jQuery permite selecionarmos nós DOM usando os seletores do CSS (Classes, IDS etc)
O código abaixo encontra todos os parágrafos com a classe "sumario" na tag "article" que tenha o ID "primeiro"

var n = $("article#primeiro p.sumario");

Veja o equivalente nativo do Javascript:

var n = document.querySelectorAll("article#primeiro p.sumario");

-> document.querySelectorAll está implementado em todos os navegadores modernos e IE8 (embora apenas suporte seletores do CSS2.1).


O jQuery tem suporte adicional para seletores avançados mas a maior parte do código da biblioteca utiliza o document.querySelectorAll dentro do invólucro "$()"

Existem também mais quatro alternativas (mais rápidas) que o seletor querySelectorAll em JavaScript:

  1. document.querySelector(seletor) - Busca apenas o primeiro nó correspondente
  2. document.getElementById(ID) - Busca um elemento através de seu ID (resultado único)
  3. document.getElementsByTagName(tagname) - Busca nós correspondentes de uma tag (strong, b, h1, div)
  4. document.getElementsByClassName(class) - Busca nós com uma classe específica
Os métodos getElementsByTagName e getElementsByClassName permitem trazer resultados únicos em nós específicos. Basta informar o número do array que deseja obter os dados (getElementsByTagName(tag)[3])

Manipulação DOM


jQuery oferece algumas maneiras de adicionar conteúdo a um elemento na página. Exemplo:
$("#container").append("

Mais Conteúdo em uma Tag de Parágrafo

");

Sob o capô o jQuery utiliza elementos nativos em Javascript (innerHTML)

document.getElementById("container").innerHTML = "

Mais Conteúdo em uma Tag de Parágrafo

";

Você também pode usar técnicas de construção DOM, que são mais seguras, mas raramente mais rápidas do que innerHTML:

var p = document.createElement("p");
p.appendChild(document.createTextNode("Mais Conteúdo em uma Tag de Parágrafo");
document.getElementById("container").appendChild(p);

Removendo nós filhos em jQuery:

$("#container").empty();

Equivalente em Javascript:

document.getElementById("container").innerHTML = null;

Ou, também é possível através de uma função usando childs:

var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);

Removendo o elemento inteiro utilizando o jQuery:

$("#container").remove();

Equivalente em Javascript:

var c = document.getElementById("container");
c.parentNode.removeChild(c);



Artigo adaptado e traduzido de SitePoint.com

13 de Junho de 2013 [11:45:37]

CEO da MDM Studio, Marcelo Motta participa ativamente do processo de produção de websites, tendo em seu portfólio mais de 130 trabalhos finalizados, entre marcas, websites e sistemas web. Os projetos mais recentes contam com a estrutura do HTML 5, combinados com CSS3 e versões mobile através de media queries.
 

TechNews

Informativos MDM Studio, Games e Tecnologia

Assine nosso Feed RSS