Методы jQuery на чистом JavaScript

7:56 10.06.2017
Родилась идея создать тему, где будет представлен код на чистом JavaScript, который мог бы заменить методы jQuery. Первое с чего я начну это будет функция .ready(). Функция ready выполняется, только после того, как DOM будет загружен полностью. Пример использования:
$(document).ready(function() {
    // Код, который необходимо выполнить после загрузки
});

// "Короткий" вариант
$(function() {
    // Код, который необходимо выполнить после загрузки
});

На чистом JavaScript это можно написать так:
// Все загружено, от кода документа, до последнего подключаемого файла
document.addEventListener('load', function() {
    // Код, который необходимо выполнить после загрузки
});

// Еще вариант "DOMContentLoaded"
// Обозреватель полностью загрузил HTML документ и построил DOM дерево 
// Однако, какие то подключаемые файлы могут быть еще не загружены
// Но, выполнять работу с DOM уже можно
document.addEventListener('DOMContentLoaded', function() { 
    // Код, который необходимо выполнить после загрузки
});

Более подробно о методе addEventListener можно почитать тут: Метод addEventListener.

Если есть необходимость получить все элементы документа, скажем, блоки (<div>), то на jQuery это делается так:
var div = $('div');

Все. Теперь переменная div содержит в себе все блоки и можно делать с ними все, что угодно. На чистом JavaScript получить все блоки можно так:
var div = document.querySelectorAll('div');

Функция querySelectorAll - получает все указанные элементы, в заданном месте. Получив элементы, так же делаем все, что вздумается, например, считаем их количество.

Чтобы добавить класс элементу при помощи jQuery, делают так:
$('#element').addClass('nameClass');

На чистом JavaScript это можно сделать так:
document.querySelector('#element').classList.add('nameClass');

Функция querySelector - вернет первый элемент, который соответствует CSSселектору css.
Функция classList (со свойство .add (classList.add)) - добавит класс указанному элементу.

Подумал, как можно заменить метод on, на примере такого кода, мы отслеживаем клики по ссылкам, как только будет выполнен клик по одно из ссылок на странице, тут же начнется выполнение, какого то сценария. Так код выглядит в jQuery (пример):
$('a').on('click', function() {
    // Код функции
});

Так я его переписал на чистый JavaScript:
var a = document.getElementsByTagName('a');

for (var i = 0; a.length > i; i++) {
    a[i].onclick = function(e) {
        // Код функции
    };
};

Например, можно открывать все ссылки в новом окне:
for (var i = 0; a.length > i; i++) {
    a[i].onclick = function(e) {
        e.preventDefault();
        window.open(this.href);
    };
};

Ну, или добавить условие и открывать в новом окне только ссылки ведущие на сторонние сайты.

Возможно, будет интересно: Реализация метода "$()" jQuery на чистом JavaScript.