10 Tips para cambiar Jquery por JavaScript puro

Jquery es una de las libreras ms usadas por los desarrolladores web en la actualidad, pero
para nadie es un secreto que es lenta y aade bytes adicionales a la carga de nuestro sitio
por la que muchos dicen que es totalmente innecesario su uso.
Muchas veces Jquery es mal utilizado solo para asignar un evento a unos botones o colocar
alguna animacin a algn elemento, cosas que podemos hacer con simple JavaScript sin
escribir mucho ms cdigo y sin necesidad de importar libreras.
Document ready
Este es un evento muy usado en Jquery que indica cuando el DOM esta listo para ser
manipulado pero esto podemos hacerlo muy fcil con JavaScript.

document.addEventListener('DOMContentLoaded', function () {
console.log('Aloha');
});Seleccionar elementos
Los selectores en Jquery son practicante el 70% de las razones por la que usamos la
librera, sin embargo JavaScript tiene un api que nos permite seleccionar elementos de la
misma forma que Jquery mediante clases, id o nombre de los tag.

//Devuelve el primer elemento que coincida con el selector
var lochNess = document.querySelector(".monsters");
//Devuelve todos los elementos que coincidan con el selector
var scary = document.querySelectorAll(".monsters");



Aadir y eliminar eventos
Los eventos con JavaScript son muy fciles de aadir incluso necesitan la misma cantidad
de cdigo que con Jquery y no tenemos que importar librerias.

var btn = document.querySelector("button");
var button_click = function () {
console.log("click");
};
btn.addEventListener("click", button_click);
btn.removeEventListener("click", button_click);

Manipular clases y atributos
Otra cosa que podemos hacer con solo JavaScript es manipular las clases y atributos css de
los elementos en el DOM.

var div = document.querySelector("#myDiv");
console.log(div.id);
var classes = div.classList;
classes.add("red");
classes.toggle("hidden");





Get y Set del contenido de los elementos
Podemos modificar el contenidos de los elementos en el DOM fcilmente sin mucho
cdigo y claro sin Jquery.

var myText = document.querySelector("#myParagraph");
var myContent = myText.textContent;
console.log("textContent: " + myContent);
myText.textContent = "Nuevo contenido";
var myHtml = myText.innerHTML;
console.log("innerHTML: " + myHtml);
myText.innerHTML = "<button> Nuevo HTML </button>";
Insertar y remover elementos
La funcin append de Jquery es genial te permite insertar elementos dentro de otros, pero
podemos hacerlo con JavaScript igual de fcil.
var lunch = document.querySelector("#lunch");
var fries = document.createElement("div");
fries.innerHTML = '<li><h4> Fries </h4></li>';
lunch.appendChild(fries);
var pickles = document.querySelector("#pickles");
pickles.parentNode.removeChild(pickles);
var beef = document.querySelector("#Beef"),
topSlice = document.createElement("li"),
bottomSlice = document.createElement("li");
// De esta forma podemos insertar antes del elemento.
beef.parentNode.insertBefore(topSlice, beef);

// Con un pequeo truco insertar entre el elemento y el que le sigue.
beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
Navegando en el arbol del DOM
Moverse entre los elementos del DOM es muy til y el api de JavaScript provee mtodos
muy tiles para hacerlo.

var snakes = document.querySelector('#snakes');
var parent = snakes.parentNode;
var children = snakes.children;
var previous = snakes.previousElementSibling;
var next = snakes.nextElementSibling;

Funciones para recorrer arreglos
JavaScript tambin tiene mtodos para recorrer arreglos y manipularlos sin usar libreras
externas.
var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];
ninjaTurtles.forEach(function (entry) {
console.log(entry);
});
var lovesPizza = ninjaTurtles.map(function (entry) {
return entry.concat(" loves pizza!");
});



Animaciones
En este caso si es complicado ganarle al motor de animaciones de Jquery ya que JavaScript
no tiene mtodos que lo hagan sin embargo gracias a CSS3 podemos usar libreras como
AnimateCSS para hacer excelentes animaciones sin Jquery.
var circle = document.querySelector("#circle");
circle.classList.add('animated');
// Podemos colocar la animacin deseada en el atributo data-animation
var animation = circle.getAttribute('data-animation');
circle.classList.add(animation);
window.setTimeout(function () {
circle.classList.remove(animation);
}, 1000);
Ajax
Esta es la parte que todos detestan y por eso usan Jquery, pero la verdad las llamadas Ajax
no son tan complicadas en JavaScript.
var request = new XMLHttpRequest();
request.open('GET', 'http://tutorialzine.com/misc/files/my_url.html',
true);
request.onload = function (e) {
if (request.readyState === 4) {
// Check if the get was successful.
if (request.status === 200) {
console.log(request.responseText);
} else {
console.error(request.statusText);
}
}
};
request.onerror = function (e) {
console.error(request.statusText);
};
request.send(null);
La idea de esto no es pedirles que dejen de usar Jquery, sin embargo es bueno saber lo que
podemos hacer sin necesidad de usar esta librera.