Largue o jQuery AGORA!

Só não larga quem não quer! :p

ps: quase todos os exemplos são IE9+ até pq quem ainda usa IE8 não merecia estar na Internet!

Ajax

Vamos começar com uma das funções mais utilizada no jQuery:

$.getJSON('/nois/que/voa', function(data) {

});

E agora no nosso bom e velho Vanilla:

var request = new XMLHttpRequest();  
request.open('GET', '/my/url', true);

request.onload = function() {  
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {  
  // There was a connection error of some sort
};

request.send();  

Tudo bem que não fica em 1 linha né mas modularizar isso também não é difícil e se quiser só o AJAX pode usar a lib ajax do grande Fernando Daciuk.

Mas olha como no POST fica ainda mais simples, antes o jQuery:

$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
});

E agora em Vanilla:

var request = new XMLHttpRequest();  
request.open('POST', '/my/url', true);  
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');  
request.send(data);  

Pronto! No jQUERY!

Mágica - show e hide

Bah esse aqui chega até ser ridículo!

$(el).hide();
$(el).show();

Agora tadaaaa:

MAGICAAAA

el.style.display = 'none';  
el.style.display = '';  

Elementos

Sim eu sei que é a coisa mais simples do mundo trabalhar com elementos no jQuery:

$(el).addClass(className);

Mas não que em Vanilla não fique tão grande:

if (el.classList) el.classList.add(className);  
else el.className += ' ' + className;  

E quando se trata de adicionar ou remover coisas dos elementos o Vanilla ta pau a pau!

Vejamos o caso do after:

$(el).after(htmlString);

Traduzindo em JavaScriptnes:

el.insertAdjacentHTML('afterend', htmlString);  

Já fica a dica ai para você estudar o insertAdjacentHTML caso nunca tenha visto na vida.

Onde 'afterend' é a posição, de onde htmlString entrará, relativa ao el que é o elemento em si.

Para ficar mais claro essas posições preste atenção abaixo:

<!-- beforebegin -->  
<p>  
<!-- afterbegin -->  
foo  
<!-- beforeend -->  
</p>  
<!-- afterend -->  

Claro que depois do after teremos o before, é óbvio!

Em JoãoQuery:

$(el).before(htmlString);

Traduzindo:

el.insertAdjacentHTML('beforebegin', htmlString);  

Agora tem uns que é coisa de vagabundo mesmo.

Olhe esse empty:

$(el).empty();

POOOOOORRRAA MANO! VÁ SE FODER!

Vai cair o dedo escrever isso aqui???

el.innerHTML = '';  

Você achou isso pouco?

Então leia TODO o material original youmightnotneedjquery.com, acredito que o link fala por si só.

Até a próxima dica marota!

Comentários

comments powered by Disqus