10 советов, как составлять JavaScript без jQuery

// Добавляем ожидание события DOMContentLoaded ко всему документу и вызываем анонимную функцию.
// Вы можете заключить код в функцию,
// и он будет выполняться сразу после того, как завершится загрузка.
document.addEventListener('DOMContentLoaded', function () {
    // Наше гавайское приветствие высветится на экране, как только загрузится страница,
    console.log('Aloha');
});

// Этот единственный аргумент является строкой, содержащей один или больше CSS-селекторов.
var lochNess = document.querySelector(".monsters");
console.log("It's from Scotland - " + lochNess.textContent);
// Мы также можем извлечь элемент определенного типа или класса, используя document.querySelectorAll.
// Этот код возвращает NodeList всех элементов, отвечающих нашему критерию.
var scary = document.querySelectorAll(".monsters");
console.log("Hide and seek champions: ");
for (var i = 0; i < scary.length; i++) {
    console.log(scary[i].innerHTML);
}

<ul>
<li class="monsters">Несси</li>

    <li class="monsters">Бигфут</li>

    <li class="monsters">Чупакабра</li>

</ul>

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

    });

};

// Теперь мы хотим окрашивать названия в разные цвета при нажатии на них мышью.

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

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

    // Обеспечиваем, чтобы менялся цвет только выбранного элемента, задавая цель события.

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

});

<button>Отключить увеличение</button>
<br><br>
Кликните на любое название, что оно стало зеленого цвета
<ul>
    <li>Чюбака</li>
    <li>Хан Соло</li>
    <li>Люк</li>
    <li>Боба Фетт</li>
</ul>

.green {
    color: green;
}

.zoomed {
    cursor: pointer;
    font-size: 23px;
}

console.log(classes);
});
btn[2].addEventListener("click", function () {
    // Он поддерживает добавление и удаление классов.
    classes.add("red");
});
btn[3].addEventListener("click", function () {
    // Вы можете также установить переключатель для класса включить/отключить
    classes.toggle("hidden");
});

<div id='myDiv' class="square"></div>

<button>Display id</button>

<button>Display classes</button>
<button>Color red</button>
<button>Toggle visibility</button>

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

.hidden {
    visibility: hidden;
}

.red {
    background-color: red;
}

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

});

<p id="myParagraph"><strong> Какое животное самое лучшее? </strong></p>

<button>Коала</button>

<br>

<button>Пингвин</button>

// Вставка верхнего слоя:
    // Возьмите говядину (это сэндвич) и примените для нее insertBefore.
    // Первый аргумент для insertBefore и будет элементом, который мы хотим добавить.
    // Второй аргумент будет узлом, перед которым вставляется новый элемент.
    beef.parentNode.insertBefore(topSlice, beef);
    // Нижний слой:
    // Здесь нам придется применить маленькую хитрость!
    // Предложите следующий ближайший элемент в качестве второго аргумента для  insertBefore,
    // таким образом, мы можем осуществить вставку непосредственно после элемента, который нам нужен.
    beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
};
var removePickles = function () {
    // Наконец мы хотим избавиться от этих элементов. Это тоже можно сделать с помощью javascript!

<button>Добавить к ланчу мясо </button>
<button>Добавить в сэндвич сыр</button>
<button>Убрать соленые огурцы</button>

<h3>Мой ланч</h3>
<ul id="lunch">
    <li><h4>Мой сэндвич</h4></li>
    <li>Хлеб</li>
    <li id="pickles">Соленые огурцы</li>
    <li id="Beef">Мясо</li>
    <li>Майонез</li>
    <li>Хлеб</li>
</ul>

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;
    // Этот код возвращает HTMLCollection (тип массива), так что мы должны перебрать каждый элемент подчиненного содержимого.
    for (var i = 0; i < children.length; i++) {
        console.log(children[i].textContent);
    }
});
birds.addEventListener('click', function (e) {

Кликните на объект, чтобы увидеть все его подчиненные элементы

<div id="snakes">
    Змеи
    <ul id="venomous">
        Ядовитые
        <li>Кобра</li>
        <li>Гремучая змея</li>
    </ul>

    <ul id="non-venomous">
        Не ядовитые
        <li>Питон</li>
        <li>Анаконда</li>
    </ul>

</div>

Кликните на название любой птицы, чтобы увидеть список всех птиц того же вида

<div>
    Птицы
    <ul id="birds">
        <li>Фламинго</li>
        <li>Чайка</li>
        <li>Ворон</li>
        <li>Додо</li>
    </ul>
</div>

div {
    color: white;
    background-color: #93d0ea;
    font-family: sans-serif;
    width: 180px;
    text-align: center;
    padding: 10px;
    margin: 5px;
}

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

circle.classList.add('animated');
// Мы перебираем каждую из кнопок и добавляем к каждой обработчик событий.
for (var i = 0; i < btn.length; i++) {
    // Здесь определяется анонимная функция, чтобы сделать возможным использование переменной  i.
    (function (i) {
        btn[i].addEventListener('click', function () {
            // Чтобы запустить анимацию, вам нужно просто добавить к объекту определенный класс.
            // В нашем случае все имена классов содержатся в атрибуте data-animation каждой кнопки.
            var animation = btn[i].getAttribute('data-animation');

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

body {
    text-align: center;
}

#circle {
    border-radius: 50%;
    margin: 50px auto;
    width: 50px;
    height: 50px;
    background-color: #93d0ea;
}

// Этот простой пример регистрирует тело url-адреса (html-файл) в консоли.
// В принципе можно вручную выполнить запрос GET, но это несколько утомительное занятие.
var request = new XMLHttpRequest();
request.open('GET', 'http://tutorialzine.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);
        }
    }
};