JS без jQuery: 10 примеров кода, которыми можно обойтись без jquery

Отслеживание события завершения загрузки страницы

// Слушаем событие DOMContentLoaded для всего документа, анонимной функцией
// Вы можете обвернуть свой код, в дужки этой функции
// и она выполнится, когда страница будет загруженной.

document.addEventListener('DOMContentLoaded', function () {

    // наш гавайский привет, будет показан в консоле

    console.log('Aloha');

});

Селекторы элементов без Jquery

Однажды, нам придется выбирать элементы с помощью id, class или тэгов, и jQuery один из лучших. Селекторы которого полностью идентичны синтаксису CSS. На сегодня, браузеры презентовали два важнейших API – querySelector и querySelectorAll.

JS

// Можно использовать document.querySelector чтобы получить первый элемент соответствующий критерию
// принимает всего один аргумент - CSS селекторы.

var lochNess = document.querySelector(".monsters");

console.log("It's from Scotland - " + lochNess.textContent);

// также можем получить коллекцию используя document.querySelectorAll.
// возвращает список dom элементов, соответствующий критерию

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>

Создание и удаление обработчиков (методов) событий

Слушание событий, это фундаментальная часть построения веб приложений. Исторически произошло два больших лагеря — IE и остальные. Но сегодня, мы просто используем addEventListener

JS

var btn = document.querySelectorAll("button"),
    list = document.querySelector("ul");

// Вызываем addEventListener на желаемое событие.
// запускает слежение за событием клика по элементу.

btn[0].addEventListener("click", function () {

    // При нажатии кнопки, мы хотим инициировать событие масштаба нашего списка.

    // Для этого нам необходимо добавить событие в наш список,
    // чтобы при наведении мыши на элемент функция сработала.

    list.addEventListener("mouseover", enlarge);
});

// Для отмены события масштабирования используем removeEventListener.

btn[1].addEventListener("click", function () {

    // Удаление событий не будет работать с безымянными функциями, используйте только именованные

    list.removeEventListener("mouseover", enlarge);
});

// Давайте создадим функцию, которая будет масштабировать.

var enlarge = function () {

    // Добавляем класс для элементов

    list.classList.add("zoomed");

    // когда курсор уйдет из списка, уберем класс, чтобы вернуться к обычному масштабу

    list.addEventListener("mouseout", function () {

        list.classList.remove("zoomed")

    });

};

// Теперь мы хотим подсветить имена при нажатии на них.

// Когда клик сработает на элементе, он должен стать зеленым
// Благодаря делегированию событий, мы можем просто добавить обработчик на родительский элемент
// В этом способе, мы не будем создавать слушатели событий для каждого <li>.

list.addEventListener("click", function (e) {

    // подсвечиваем целевой элемент зеленым

    e.target.classList.add('green');

});

HTML

<button>Enable zoom</button>
<button>Disable zoom</button>

<br><br>

Нажмите на имя, чтобы выделить его

<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 использовал третий аргумент, но это опционально. Как видите, код выглядит весьма похоже на jQuery.

Добавление, удаление классов без jQuery на чистом JS

Управление классами элементов без jQuery было огромной проблемой в былые времена. Но больше нет. Благодаря свойству classList. А если необходимо изменять аттрибуты, можно использовать setAttribute.

JS

var btn = document.querySelectorAll("button"),
    div = document.querySelector("#myDiv");

btn[0].addEventListener("click", function () {

    // легкий способ получать аттрибуты элемента
    console.log(div.id);
});

// Element.classList хранит все классы элемента из DOMTokenList.

var classes = div.classList;

btn[1].addEventListener("click", function () {

    console.log(classes);

});

btn[2].addEventListener("click", function () {

    // Добавление и удаление классов
    classes.add("red");

});

btn[3].addEventListener("click", function () {

    // Переключение класса
    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>

JS

.square {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    border: 1px solid grey;
    border-radius: 5px;
}

.hidden {
    visibility: hidden;
}

.red {
    background-color: red;
}

Получение и изменение HTML контента элемента

jQuery имеет удобные методы text() и html(). Вместо них, вы можете использовать textContent и innerHTML свойства, которые существовали еще задолго до появления jQuery.

JS

var myText = document.querySelector("#myParagraph"),
    btn = document.querySelectorAll("button");

// Так с легкостью можно узнать весь текст древа элементов

var myContent = myText.textContent;

console.log("textContent:  " + myContent);

// Используйте textContent для замены текста элемента
// удаляет старый, замещая новым текстом

btn[0].addEventListener('click', function () {

    myText.textContent = " Koalas are the best animals ";

});

// Если нам нужен HTML элемента, используем innerHTML.

var myHtml = myText.innerHTML;

console.log("innerHTML:  " + myHtml);

// Для замены html, просто предоставьте новый

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>

Вставка новых и удаление существующих элементов

Не смотря на то, что Jquery значительно упрощает работу с добавлением и удалением элементов, никто не говорил, что этого не реально сделать на чистом JavaScript коде. Вот пример, как добавить, удалить или заменить элемент на странице.

JS

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

// Допустим у нас есть меню, нашего ланча

// Давайте добавим в него что нибудь

var addFries = function () {

    // Прежде создаем элемента, и наполняем контентом

    var fries = document.createElement("div");
    fries.innerHTML = '<li><h4> Fries </h4></li>';

    // Когда это сделано, далее используем appendChild для вставки в страницу.
    // Наш элемент появится на странице в меню

    lunch.appendChild(fries);

};

// Добавим сыр в наш бургер ).

var addCheese = function () {

    var beef = document.querySelector("#Beef"),

            topSlice = document.createElement("li"),
            bottomSlice = document.createElement("li");

    bottomSlice.innerHTML = topSlice.innerHTML = 'Cheese';

    // Вставляем верхний срез:
    // Берем родительский элемент beef и используем insertBefore.
    // Первый аргумент в методе insertBefore это наш добавляемый элемент
    // Второй аргумент - элемент перед которым мы добавим создаваемый

    beef.parentNode.insertBefore(topSlice, beef);

    //Нижний срез:
    // Надо будет сделать маленький фокус!
    // Предоставьте следующий ближащий элемент как второй параметр в insertBefore,
    // таким способом мы вставляем содержимое "после" желаемого элемента.

    beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);

};

var removePickles = function () {

    // убираем элемент

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

    if (pickles) {
        pickles.parentNode.removeChild(pickles);
    }

};

// Вкуснятина!

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>

Прохождение через уровни DOM элементов

Как всем нам известно, много силы сокрыто в DOM структуре. Сравнительно с jQuery, нативный DOM API предлагает ограниченный функционал выборки вложенных или рядом лежащих элементов. Хм, хотя можно много чего реализовать путешествуя по DOM структурам.

JS

var snakes = document.querySelector('#snakes'),
    birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {

    // Чтобы получить родительский элемент DOM, мы используем parentNode метод.

    var parent = e.target.parentNode;

    console.log("Parent: " + parent.id);

    // С другой стороны children метод, отдает всех потомков элемента

    console.log("Children: ");
    var children = e.target.children;

    // Возвращает коллекцию html элементов (на подобии массива), чтобы получить контент каждого нужна итерация.

    for (var i = 0; i < children.length; i++) {

        console.log(children[i].textContent);

    }
});

birds.addEventListener('click', function (e) {

    // получаем близлежащий элемент, название метода понятно само по себе.

    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);

    }

    // Хотя, получение всех соседних элементов немножко сложнее
    // Нам нужно выбрать всех потомков этого родителя, и исключить текущий элемент
    // Это реализуется с помощью filter, и перебираем каждого потомка по отдельности

    console.log("All siblings: ");

    Array.prototype.filter.call(e.target.parentNode.children, function (child) {
        if (child !== e.target) {
            console.log(child.textContent);
        }
    });

});

HTML

Нажмите на элемент, чтобы увидеть его родителей и потомков
<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>

Нажмите на птичку, чтобы увидеть все соседние
<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;
}

Прохождение циклом js массивов

Некоторые из утилитов, предлагаемые jquery библиотекой существуют в ES5 стандартах. Для итерации массивов, мы можем пользоваться forEach и map вместо аналогов each() и map(). Просто будьте осторожны с отличиями в аргументах и определите this переменную в каллбэках.

var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];

// ForEach автоматически проходит массив.

ninjaTurtles.forEach(function (entry) {
    console.log(entry);
});

// map вызывает функцию на каждый элемент массива и создает новый массив результатов

var lovesPizza = ninjaTurtles.map(function (entry) {

    return entry.concat(" loves pizza!");

});

console.log(lovesPizza);

Анимации

jQuery animate() метод будем лучшим решением, нежели все что вам придет в голову. И если вам нужно обрабатывать сложные анимации с помощью js скриптов, все же лучше использовать jquery. Однако, чудеса CSS3 помогают использовать анимации верстки с помощью добавления и удаления классов элементов.

Лучше всего, подключить маленькую библиотеку https://daneden.github.io/animate.css/

JS

var btn = document.querySelectorAll("button"),
        circle = document.querySelector("#circle");

// Прежде всего, необходимо добавить класс animated, чтобы библиотека смогла распознать элемент.

circle.classList.add('animated');

// Проходим по всем кнопкам и добавляем слушателей событий.

for (var i = 0; i < btn.length; i++) {

    // Пишем анонимную функцию, чтобы можно было пользоваться переменными

    (function (i) {

        btn[i].addEventListener('click', function () {

            // Чтобы запустить анимацию, просто добавьте нужный класс на элемент
            // В нашем случае, мы храним имя анимации в аттрибуте data-animation

            var animation = btn[i].getAttribute('data-animation');

            circle.classList.add(animation);

            // Чтобы весь спектакль играл повторно, нужно убирать класс по завершению анимации

            window.setTimeout(function () {

                circle.classList.remove(animation);

            }, 1000);

        });

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;
}

AJAX запросы на JS

AJAX — еще одна технология которая создавала проблемы в различных браузерах. Хорошая новость, что сегодня мы можем использовать один код везде! Плохая новость в том, что инициализация AJAX запросов с помощью обьекта XMLHttpRequest выглядит сумбурно. Все же лучше переложить эту задачу на маленькие библиотеки. Например reqwest.

// Этот простой пример, покажет в консоле содержимое url.

// Можно самому создавать GET запросы, но это выглядит странно )

var request = new XMLHttpRequest();
request.open('GET', 'https://site.com/misc/files/my_url.html', true);

request.onload = function (e) {
    if (request.readyState === 4) {

        // проверяем, если ответ успешен

        if (request.status === 200) {
            console.log(request.responseText);
        } else {
            console.error(request.statusText);
        }
    }
};

// Отлавливаем ошибки

request.onerror = function (e) {
    console.error(request.statusText);
};

request.send(null);

// Используя микробиблиотеки, например reqwest, упрощают наши задачи.

reqwest({
    url: 'https://site.com/misc/files/my_url.html',
    method: 'get',
    error: function (err) {
    },
    success: function (resp) {
        console.log(resp);
    }
});

В заключение

Стремление к минимализму, нулевой энергии и прочим радостям — это достойные цели в жизни. Плата этому — быстрая скорость загрузки и лояльность пользователей.

Дальше: Где брать выделенный сервер? Решения от RUVDS