Javascript sin jQuery: Consejos y ejemplos prácticos

jQuery es extremadamente popular entre los desarrolladores front-end y es el framework JavaScript favorito de la mayoría de los programadores. Sabemos que jQuery puede simplificar tu desarrollo y abrirte un gran abanico de posibilidades, pero hay casos en los que no se puede utilizar jQuery. Aquí tienes unos consejos y ejemplos prácticos sobre cómo hacer las cosas que normalmente haces con jQuery sin utilizar el popular framework.

Detectar el document ready

Una página no puede modificarse de forma segura hasta que el document este listo (ready). Por eso razón, hemos cogido la razón de meter nuestro código Javascript dentro de la función $(document).ready():

$( document ).ready(function() {
    console.log( "ready!" );
});

Se puede hacer lo mismo utilizando vanilla Javascript, o Javascript puro:

document.addEventListener('DOMContentLoaded', function () {
    console.log( "ready!" );
});

Añadiendo detectores de eventos

Los detectores de eventos son una parte muy importante del desarrollo en Javascript. Jquery tiene manera muy sencilla de llevarlo a cabo:

$(someElement).on('click', function() {
    // TODO event handler logic
});

No necesitas jQuery para crear detectores de eventos en Javascript. Aquí tienes como hacerlo:

someElement.addEventListener('click', function() {
    // TODO event handler logic
});

Seleccionando elementos

jQuery hace que sea supersencillo seleccionar elementos mediante un ID, una clase, un tag, etc.

// By ID
$('#myElement');

// By Class name
$('.myElement');

// By tag name
$('div');

// Children
$('#myParent').children();

// Complex selecting
$('article#first p.summary');

JavaScript cuenta con diversos modos para seleccionar elementos. Todos los métodos que puedes ver a continuación funcionan en todos los navegadores modernos, así como en IE8+.

// By ID
document.querySelector('#myElement');

// By Class name
document.querySelectorAll('.myElement');

// By tag name
document.querySelectorAll('div');

// Children
$('#myParent').children();

// Complex selecting
document.querySelectorAll('article#first p.summary');

Utilizar AJAX

Como muchos sabéis, AJAX es un conjunto de tecnologías que te permiten crear aplicaciones web asíncronas. Jquery cuenta con un conjunto de útiles métodos para AJAX, incluyendo get() como puedes ver más abajo.

$.get( "ajax/test.html", function( data ) {
    $( ".result" ).html( data );
    alert( "Load was performed." );
});

A pesar de que con jQuery es mucho más fácil y más rápido, también puedes llevarlo a cabo mediante vanilla Javascript sin problema alguno:

var request = new XMLHttpRequest();
request.open('GET', 'ajax/test.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);
        }
    }
};

Añadir y eliminar clases

Si necesitas añadir y eliminar las clases de elementos, jQuery cuenta con dos métodos dedicados para ello:

// Adding a class
$('#foo').addClass('bold');

// Removing a class
$('#foo').removeClass('bold');

Sin jQuery, añadir una clase a un elemento también es muy sencillo. Para eliminar una clase, debes utilizar el método replace:

// Adding a class
document.getElementById('foo').className += 'bold';

// Removing a class
document.getElementById('foo').className = document.getElementById('foo').className.replace(/^bold$/, '');

Fade in

Aquí tienes un ejemplo práctico de por qué jQuery es tan popular. Hacer fade en un elemento se consigue con una sola línea de código:

$(el).fadeIn();

El mismo efecto puede conseguirse también con Javascript puro y duro, pero el código es más extenso y más complicado.

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeIn(el);

Esconder y mostrar elementos

Esconder y mostrar elementos es una tarea bastante común en la labor de un desarrollador front-end. Jquery te proporciona los métodos hide() y show() para modificar el display de un elemento.

// Hiding element
$(el).hide();

// Showing element
$(el).show();

En vanilla Javascript, esconder o mostrar elementos no es mucho más complicado:

// Hiding element
el.style.display = 'none';

// Showing element
el.style.display = 'block';

Manipulación DOM

Manipular el DOM con jQuery es muy sencillo. Mira como en este sencillo script añado un tag p con contenido al elemento container:

$("#container").append("<p>more content</p>");

Digamos que hacerlo en Javascript puro tampoco es una tarea titánica:

document.getElementById("container").innerHTML += "<p>more content</p>";

Fuente: catswhocode.com