10 Tips para cambiar Jquery por JavaScript puro

Jquery es una de las librerías más usadas por los desarrolladores web en la actualidad, pero para nadie es un secreto que es lenta y añade 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 animación a algún elemento, cosas que podemos hacer con simple JavaScript sin escribir mucho más código y sin necesidad de importar librerías.

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 fácil 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 librería, 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");

Seleccionar atributos, get, add, has, remove

GET

var x = document.getElementById("myAnchor").getAttribute("target");

result _blank

HAS

var x = document.getElementById("myBtn").hasAttribute("onclick");

REMOVE

document.getElementById("myAnchor").removeAttribute("href");

SET

element.setAttribute("style", "background-color: red;");

Append

var divBtnsNw = document.createElement("div");
divBtnsNw.id = "divBtnsNw";
divBtnsNw.innerHTML = htmlOb;
document.querySelector("body").appendChild(divBtnsNw);

After - Before

var x = document.querySelector("textarea");

var div = document.createElement("div");
div.id = "test";
div.innerHTML = t;

//before

x.parentNode.insertBefore(div, x.firsChild);

//after

x.parentNode.insertBefore(div, x.nextSibling);

Par Impar

if (n % 2 === 1) {
//impar
}

Añadir y eliminar eventos

Los eventos con JavaScript son muy fáciles de añadir incluso necesitan la misma cantidad de código 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 fácilmente sin mucho código 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 función append de Jquery es genial te permite insertar elementos dentro de otros, pero podemos hacerlo con JavaScript igual de fácil.

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 pequeño 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 métodos 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 también tiene métodos para recorrer arreglos y manipularlos sin usar librerías 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 métodos que lo hagan sin embargo gracias a CSS3 podemos usar librerías como AnimateCSS para hacer excelentes animaciones sin Jquery.

var circle = document.querySelector("#circle");

circle.classList.add('animated');

// Podemos colocar la animación 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.

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 librería.

Ejemplo de uso de las anteriores funciones en JavaScript Puro:

function createAll() {
var container = document.querySelector(".container");
var div = document.createElement("div");
div.classList.add("container");

for(var i = 0; i < 10; i++) {
var html = "<div class='containLinks'>";
html += "<div class='test test_" + i + "' data='" + i + "' ><strong>Link " + i + "</strong> || </div>";
html += "<span class='accion' dataType='open' dataId='" + i + "' >Abrir</span> ";
html += "<span class='accion' dataType='changeName' dataId='" + i + "' >Change Name</span>";
html += "</div>";
div.innerHTML += html;
}

document.querySelector(".containerExample").appendChild(div);

var buttons = document.querySelectorAll(".accion");
for(var x = 0; x < buttons.length; x++) {
var button = buttons[x];
button.addEventListener("click", function() {
var type = this.getAttribute("dataType");
var id = this.getAttribute("dataId");
var classUsed = ".test_" + id;
if(type == "changeName") {
changeName(classUsed);
}
else
if(type == "open") {
openDiv(classUsed);
}

var removerClase = document.querySelectorAll(".test");
for(var y = 0; y < removerClase.length; y++) {
removerClase[y].classList.remove("classNew");
}

document.querySelector(".test_" + id).classList.add("classNew");
});
}

}

function openDiv(object) {
var divMain = document.querySelector(object);
var divRemove = document.querySelector(".divList");
if(divRemove != null)
divRemove.remove();

var html = "<h1>perfect strong</h1>";
var element = document.createElement("div");
element.classList.add("divList");
element.innerHTML = html;
divMain.appendChild(element);
}

function changeName(object) {
var divMain = document.querySelector(object);
divMain.innerHTML = "New text";
}
</script>