jQuery es una gran librería. Llegó al mundo en la época en la que IE6 era el número uno en cuanto a navegadores se refiere. En aquel entonces, existían peculiaridades y diferencias que eran tediosas de evitar. Y ahí estaba jQuery, la herramienta perfecta para escribir código que fuese compatible con todos los navegadores.
Ahora, sin embargo, los navegadores web han avanzado mucho desde aquellos días. Cómodamente podemos utilizar todas las características que nos proporciona ES5, y tenemos a nuestra disposición APIs de HTML5 totalmente alucinantes que hacen que trabajar con el DOM sea mucho más agradable. Los desarrolladores nos encontramos ahora en una posición en la que podemos optar por dejar de lado jQuery para ciertos proyectos, y seguir siendo productivos.
A ver, no quiero que me malinterpretéis, jQuery sigue siendo una librería fantástica pero, para cosas más pequeñitas como páginas simples con interacciones de JS limitadas, extensiones para el navegador y apps web para móvil, me parece mejor opción Vanilla JS. Aquí tienes 10 consejos que te ayudarán en esta tarea.
Detectando el Document Ready
La primera cosa que haces cuando codificas en jQuery es meter el código en una llamada al $(document).ready(), para saber cuando el DOM está listo para su manipulación. Sin jQuery, tenemos el evento DOMContentLoaded. Aquí tienes cómo utilizarlo:
// Add an event listener of DOMContentLoaded to the whole document and call an anonymous function. // You can then wrap your code in that function's brackets // and it will execute once loading is complete. document.addEventListener('DOMContentLoaded', function () { // Our hawaiian greeting is displayed as soon as the page loads, console.log('Aloha'); });
Seleccionando elementos
Hace tiempo, solo se podían seleccionar los elementos por id, class y nombre de tag, y jQuery fue el salvador que nos proporcionó los inteligentes selectores de CSS. Los navegadores han captado la indirecta y han introducido dos importantes APIs: querySelectir y querySelectorAll:
JS
// We can use document.querySelector to get the first element that matches a certain criteria. // It's only argument is a string containing one or more CSS selectors. var lochNess = document.querySelector(".monsters"); console.log("It's from Scotland - " + lochNess.textContent); // We can also get all elements of a certain type or class by using document.querySelectorAll. // This returns a NodeList of all the elements that fit our criteria. var scary = document.querySelectorAll(".monsters"); console.log("Hide and seek champions: "); for (var i = 0; i < scary.length; i++) { console.log(scary[i].innerHTML); }
HTML
<ul>
<li class="monsters">Nessy</li>
<li class="monsters">Big foot</li>
<li class="monsters">La chupacabra</li>
</ul>
Adjuntando y eliminando detectores de eventos
Detectar eventos es una parte fundamental a la hora de desarrollar una aplicación. Antes había dos grandes bandos que diferenciaban cómo hacer esto: IE, y el resto. Pero ahora solo tienes que utilizar addEventListener:
JS
var btn = document.querySelectorAll("button"),
list = document.querySelector("ul");
// We call the addEventListener method on our desired event target(in this case a button).
// This will start a listener that will wait until a click is generated on the element.
btn[0].addEventListener("click", function () {
// When this button is clicked we want to enable zooming of our list.
// To do this we add an event listener to our list itself,
// so when the cursor hovers it, the enlarge function gets called.
list.addEventListener("mouseover", enlarge);
});
// To disable the zooming we can simply use removeEventListener.
btn[1].addEventListener("click", function () {
// Removing event listeners doesn't work on anonymous functions, so always use a named one.
list.removeEventListener("mouseover", enlarge);
});
// Let's create our enlarge function.
var enlarge = function () {
// Add class zoomed to the unordered list.
list.classList.add("zoomed");
// When the cursor leaves the list return to normal size by removing the class.
list.addEventListener("mouseout", function () {
list.classList.remove("zoomed")
});
};
// Now we want to be able to color the names by clicking them.
// When a 'click' is registered on one of the list entries it should change its color to green.
// Thanks to event delegation we can actually add an event listener to the whole parent object.
// This way we don't have to add separate event listeners to each <li>.
list.addEventListener("click", function (e) {
// Make the coloring happen only to the clicked element by taking the target of the event.
e.target.classList.add('green');
});
HTML
<button>Enable zoom</button>
<button>Disable zoom</button>
<br><br>
Click on any of the names to color them green
<ul>
<li>Chewbacca</li>
<li>Han Solo</li>
<li>Luke</li>
<li>Boba fett</li>
</ul>
CSS
.green { color: green; } .zoomed { cursor: pointer; font-size: 23px; }
addEventListener solía requerir un tercer argumento (useCapture), pero ha pasado a ser opcional desde hace algún tiempo. Como resultado, el código se parece un poco a jQuery
Manipular clases y atributos
Manipular los nombres de las clases de un elemento sin utilizar jQuery solía ser muy incómodo. Pero ya no más gracias a la propiedad classList. Y si necesitas manipular atributos, tienes setAttribute.
JS
var btn = document.querySelectorAll("button"), div = document.querySelector("#myDiv"); btn[0].addEventListener("click", function () { // Get any attribute easily. console.log(div.id); }); // Element.classList stores all classes of the element in the form of a DOMTokenList. var classes = div.classList; btn[1].addEventListener("click", function () { console.log(classes); }); btn[2].addEventListener("click", function () { // It supports adding and removing classes. classes.add("red"); }); btn[3].addEventListener("click", function () { // You can also toggle a class on and off classes.toggle("hidden"); });
HTML
<div id='myDiv' class="square"></div>
<button>Display id</button>
<button>Display classes</button>
<button>Color red</button>
<button>Toggle visibility</button>
CSS
.square { width: 100px; height: 100px; margin-bottom: 20px; border: 1px solid grey; border-radius: 5px; } .hidden { visibility: hidden; } .red { background-color: red; }
Obteniendo y estableciendo contenido en un elemento
jQuery tiene los útiles métodos text() y html(). En su lugar, podemos utilizar las propiedades textContent e innerHTML, los cuales hemos tenido desde hace mucho tiempo:
JS
var myText = document.querySelector("#myParagraph"),
btn = document.querySelectorAll("button");
// We can easily get the text content of a node and all its descendants.
var myContent = myText.textContent;
console.log("textContent: " + myContent);
// When using textContent to alter the text of an element
// it deletes the old content and replaces it with new.
btn[0].addEventListener('click', function () {
myText.textContent = " Koalas are the best animals ";
});
// If we want to grab all the HTML in a node (including the tags) we can use innerHTML.
var myHtml = myText.innerHTML;
console.log("innerHTML: " + myHtml);
// To change the html simply supply new content.
// Of course we aren't limited to text only this time.
btn[1].addEventListener('click', function () {
myText.innerHTML = "<button> Penguins are the best animals </button>";
});
HTML
<p id="myParagraph"><strong> Which are the best animals? </strong></p>
<button>Koalas</button>
<br>
<button>Penguins</button>
Insertando y eliminando elementos
Aunque jQuery hace que sea mucho más fácil añadir y eliminar elementos DOM no es imposible hacer esto con JavaScript puro. Aquí tienes cómo anexar, eliminar y reemplazar cualquier elemento que se desees:
JS
var lunch = document.querySelector("#lunch");
// In the HTML tab we have our lunch for today.
// Let's say we want to add fries to it.
var addFries = function () {
// First we have to create our new element and set its content
var fries = document.createElement("div");
fries.innerHTML = '<li><h4> Fries </h4></li>';
// After that's done, we can use appendChild to insert it.
// This will make our fries appear at the end of the lunch list.
lunch.appendChild(fries);
};
// Now we want to add cheese both before and after the beef in our burger.
var addCheese = function () {
var beef = document.querySelector("#Beef"),
topSlice = document.createElement("li"),
bottomSlice = document.createElement("li");
bottomSlice.innerHTML = topSlice.innerHTML = 'Cheese';
// Inserting the top slice:
// Take the parent of the beef (that's the sandwich) and use insertBefore on it.
// The first argument to insertBefore is the new element we're gonna add.
// The second argument is the node before which the new element is inserted.
beef.parentNode.insertBefore(topSlice, beef);
// The bottom slice:
// We have to use a little trick here!
// Supply the next nearest element as the second argument to insertBefore,
// that way we can actually insert after the element we want.
beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
};
var removePickles = function () {
// Finally, we want to get rid of those pickles. Again javascript got us covered!
var pickles = document.querySelector("#pickles");
if (pickles) {
pickles.parentNode.removeChild(pickles);
}
};
// Delicious!
var btn = document.querySelectorAll("button");
btn[0].addEventListener('click', addFries);
btn[1].addEventListener('click', addCheese);
btn[2].addEventListener('click', removePickles);
HTML
<button>Add fries to lunch</button>
<button>Add cheese to sandwich</button>
<button>Remove pickles</button>
<h3>My Lunch</h3>
<ul id="lunch">
<li><h4>My sandwich</h4></li>
<li>Bread</li>
<li id="pickles">Pickles</li>
<li id="Beef">Beef</li>
<li>Mayo</li>
<li>Bread</li>
</ul>
Analizando el árbol del DOM
Como cualquier ninja de JS sabe, DOM cuenta con una gran cantidad de poder oculto. En comparación con jQuery, la API DOM te ofrece una funcionalidad limitada para seleccionar los antepasados o hermanos. Sin embargo, todavía tienes un montón de cosas que puedes hacer para explorar el árbol.
JS
var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');
snakes.addEventListener('click', function (e) {
// To access the parent of a certain element in the DOM tree, we use the parentNode method.
var parent = e.target.parentNode;
console.log("Parent: " + parent.id);
// For the opposite, calling the .children method gets all child elements of the selected object.
console.log("Children: ");
var children = e.target.children;
// This returns a HTMLCollection (a type of array), so we have to iterate to access every child's content.
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});
birds.addEventListener('click', function (e) {
// Getting the nearest sibling to our element is self-explanatory.
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}
// However, to acquire all the siblings of a node is a bit more complex.
// We have to take all of its parent's children and then exclude the original element.
// This is done by using filter and calling a function that checks every child one by one.
console.log("All siblings: ");
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});
});
HTML
Click on the objects to see their parent and children elements
<div id="snakes">
Snakes
<ul id="venomous">
Venomous
<li>Cobra</li>
<li>Rattlesnake</li>
</ul>
<ul id="non-venomous">
Non venomous
<li>Python</li>
<li>Anaconda</li>
</ul>
</div>
Click on any of the birds to see its siblings
<div>
Birds
<ul id="birds">
<li>Flamingo</li>
<li>Seagull</li>
<li>Raven</li>
<li>Dodo</li>
</ul>
</div>
CSS
div { color: white; background-color: #93d0ea; font-family: sans-serif; width: 180px; text-align: center; padding: 10px; margin: 5px; }
Recorriendo arrays
Muchos de los útiles métodos que jQuery proporciona están disponibles en el estándar ES5. Para iterar arrays, podemos utilizar forEach y map en lugar de sus versiones de jQuery, each() y map(). Solamente hay que tener cuidado de las diferencias de sus atributos y de los valores por defecto en los callbacks.
JS
var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"]; // ForEach automatically iterates through an array. ninjaTurtles.forEach(function (entry) { console.log(entry); }); // The map method calls a function on every element of an array and creates a new array with the results. var lovesPizza = ninjaTurtles.map(function (entry) { return entry.concat(" loves pizza!"); }); console.log(lovesPizza);
Animaciones
El método animate de jQuery es superior a cualquier cosa que puedas hacer por ti mismo, además, si necesitas animaciones complejas en tu aplicación te animo a que sigas utilizándolo. Pero gracias a las maravillas de CSS3, muchos de los casos más simples pueden ser gestionados con una ligera librería como Animate.css, que te permite disparar animaciones mediante la inserción o eliminación de nombres de clases a los elementos.
JS
var btn = document.querySelectorAll("button"),
circle = document.querySelector("#circle");
// First, we have to add a class of animated to our object, so the library can recognize it.
circle.classList.add('animated');
// We iterate over all of our buttons and add event listeners to each one.
for (var i = 0; i < btn.length; i++) {
// Define an anonymous function here, to make it possible to use the i variable.
(function (i) {
btn[i].addEventListener('click', function () {
// To start an animation you just have to add a specific class to the object.
// In our case we stored the classes' names in the data-animation attribute of each button.
var animation = btn[i].getAttribute('data-animation');
circle.classList.add(animation);
// To make it work more then once we have to remove the class after the animation is complete.
window.setTimeout(function () {
circle.classList.remove(animation);
}, 1000);
});
}(i));
}
HTML
<button data-animation="bounce">Bounce</button>
<button data-animation="pulse">Pulse</button>
<button data-animation="fadeInLeftBig">Fade in</button>
<button data-animation="fadeOutRightBig">Fade out</button>
<button data-animation="flip">Flip</button>
<div id="circle"></div>
CSS
body { text-align: center; } #circle { border-radius: 50%; margin: 50px auto; width: 50px; height: 50px; background-color: #93d0ea; }
Fuente: tutorialzine.com