AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Как обойтись без jQuery.

JQuery - огромная библиотека. Она пришла приблизительно в то время, когда IE6 был браузером номер один. Тогда было много специфических моментов и разногласий, что делали процесс разработки утомительным и JQuery был идеальным инструментом для написания кроссбраузерного кода.

С тех пор, однако, веб-браузеры намного усовершенствовались. Вы можете с удобством использовать все возможности, предоставляемые ES5, и имеете в полном распоряжении огромную API-библиотеку HTML5, которая делает работу с DOM-элементами намного приятнее. Разработчики теперь могут выбирать, что же можно оставлять из JQuery для некоторых проектов, продолжая сохранять свою производительность.

Не поймите неправильно – JQuery по-прежнему отличная библиотека и чем чаще вы будете использовать ее, тем лучше. Тем не менее, для небольших проектов, например простые страницы с ограниченным JS взаимодействием, расширениями браузеров и мобильных сайтов, вы можете использовать vanlla JS.

Вот 10 советов, которые помогут в вашей деятельности.

1. Обработка события готовности документа (Document Ready)

Первое, что вы делаете, когда пишете JQuery, это упаковка своего кода в вызов $(document).ready(), для того, чтобы определить готовность DOM к манипуляциям. Без JQuery у вас есть событие DOMContentLoaded. Вот как оно используется.

document.addEventListener('DOMContentLoaded', function () {
    console.log('Aloha');
});

2. Выбор элементов

Давным-давно Вы могли только выбирать элементы по ID, классу и имени тега, а JQuery с ее умными CSS-селекторами выступала своеобразным спасателем. Браузеры исправили это и представили две важные API - querySelector и querySelectorAll.

<ul>
    <li class="monsters">Nessy</li>
    <li class="monsters">Big foot</li>
    <li class="monsters">La chupacabra</li>
</ul>

<script>

    // Мы можем использовать document.querySelector, чтобы получить первый элемент, который соответствует определенным критериям.
    // Это единственный аргумент является строкой, содержащей один или более 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);
    }
</script>

3. Установка и удаление слушателей событий

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

<style>
    .green {
        color: green;
    }

    .zoomed {
        cursor: pointer;
        font-size: 23px;
    }
</style>

<button>Разрешить zoom</button>
<button>Запретить zoom</button>
<br> <br>
Нажмите на любое имея, для изменения его цвета на зеленый:
<ul>
    <li>Вася</li>
    <li>Петя</li>
    <li>Сережа</li>
    <li>Костя</li>
</ul>

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

    // Мы вызываем метод addEventListener на нашем цели событий (в данном случае кнопка).
    // Это будет начать слушателя, что будет ждать до щелчка генерируется на элементе.
    btn[0].addEventListener("click", function () {
        // Когда эта кнопка нажата, мы хотим включить масштабирование нашего списка.
        // Для этого мы добавляем обработчик событий на наш список,
        // Так при наведении курсора на него будет вызыватся функция enlarge
        list.addEventListener("mouseover", enlarge);
    });

    // Чтобы отключить масштабирование, мы можем просто использовать removeEventListener.
    btn[1].addEventListener("click", function () {
        // Удаление обработчиков событий не работает на анонимные функции, поэтому всегда используйте именнованные.
        list.removeEventListener("mouseover", enlarge);
    });

    // Создадим нашу функцию увеличения.
    var enlarge = function () {

        // Добавить класс zoomed в список.
        list.classList.add("zoomed");

        // Если курсор покидает список вернуться к нормальному размеру, удаляя класс.
        list.addEventListener("mouseout", function () {
            list.classList.remove("zoomed")
        });

    };

    // Теперь мы хотим иметь возможность раскрасить имена, выбрав их.

    // Когда "нажмите кнопку" зарегистрирован на одной из записей в списке следует изменить свой цвет на зеленый.
    // Благодаря делегации событий мы можем на самом деле добавить прослушиватель событий в родительский объект всей.
    // Таким образом, мы не должны добавить отдельные обработчики событий каждого <LI>.
    list.addEventListener("click", function (e) {

    // Изменить цвет эллемента, если на него щелкнули.
    e.target.classList.add('green');

    });
</script>

4. Манипулирование классами и свойствами

Манипулирование именами классов элементов без JQuery было очень неудобно использовать. Но проблема была решена благодаря свойству ClassList. И если нужно управление атрибутами, Вам нужен SetAttribute.

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

    .hidden {
        visibility: hidden;
    }

    .red {
        background-color: red;
    }
</style>

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

<button>Display id</button>

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

<script>
    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");
    });
</script>

5. Получение и установка содержимого элементов

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

<p id="myParagraph"><strong> Which are the best animals? </strong></p>
<button>Koalas</button>
<br>
<button>Penguins</button>

<script>
    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>";
    });
</script>

6. Установка и удаление элементов

Хотя JQuery и делает все намного проще, добавление и удаление DOM-элементов невозможно без простого JavaScript. Здесь показано, как добавлять, удалять и заменять любые элементы, какие Вы только захотите.

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

<script>
    var lunch = document.querySelector("#lunch");

    // На вкладке HTML мы имеем наш обед на сегодняшний день.
    // Скажем, мы хотим, чтобы добавить к нему картофель.
    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';

        // Установка верхняя часть:
        // Возьмите родителя говядины (это сэндвич) и использовать InsertBefore на нем.
        // Первый аргумент InsertBefore является новым элементом мы собираемся добавить.
        // Второй аргумент узел, перед которым новый элемент вставляется.
        beef.parentNode.insertBefore(topSlice, beef);

        // Нижняя часть:
        // Мы должны использовать маленькую хитрость здесь!
        // Поставка на следующий ближайший элемент в качестве второго аргумента InsertBefore,
        // Таким образом, мы можем на самом деле вставить после элемента мы хотим.
        beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
    };

    var removePickles = function () {

        // Наконец, мы хотим, чтобы избавиться от этих соленья. Опять Javascript получил нас распространяется!
        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);
</script>

7. Прохождение по DOM дереву

Любой настоящий JS-ниндзя знает, что есть много возможностей, скрытых в DOM. По сравнению с JQuery, простые интерфейсы DOM предлагают ограниченную функциональность для выбора нескольких уровней. И тем не менее, есть множество вещей, которые Вы можете делать, путешествуя по DOM - дереву.

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

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

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

        // Это возвращает HTMLCollection (тип массив), так что мы должны повторять для доступа к контенту каждого ребенка.
        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);
        }

        // Однако, чтобы получить всех братьев и сестер узла является немного более сложным.
        // Мы должны принять все дети своего родителя, а затем исключить оригинальное элемент.
        // Это делается с помощью фильтра и вызова функции, которая проверяет каждому ребенку по одному.
        console.log("All siblings: ");

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

    });
</script>

8. Обработка массивов

Некоторые из утилитных методов, которые предоставляет JQuery, доступны со стандартом ES5. При переборе массивов можно использовать forEach и map вместо их JQuery аналогов - each() и map(). Просто будьте осторожны при различиях в аргументах и значениях по умолчанию в обратных вызовах.

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

9. Animations

Методы анимации JQuery самым лучшим образом подходят ко всему, что Вы бы хотели «оживить», и если нужны сложные анимации из скриптов в приложении, Вы должны по-прежнему иметь дело с ней. Но благодаря всем чудесам CSS3, некоторые простые случаи можно обработать с помощью легкой библиотеки Animate.css, которая позволяет запускать анимацию, добавляя или удаляя имена классов элементов.

<style>
    body {
        text-align: center;
    }

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

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

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

    // Во-первых, мы должны добавить класс анимированные нашего объекта, поэтому библиотека может признать его.
    circle.classList.add('animated');

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

                // Для того, чтобы его работу более одного раза, мы должны удалить класс после завершения анимации.
                window.setTimeout(function () {
                    circle.classList.remove(animation);
                }, 1000);
            });
        }(i));
    }
</script>

10. AJAX

Ajax – это еще одна технология, которая используется при кросс-браузерном беспорядке. Теперь можно использовать один и тот же код везде.

<script>
// Это простой пример регистрирует тело нашего URL (а) файл HTML в консоли.
// Это можно делать вручную запрос GET, но это несколько утомительно.
var request = new XMLHttpRequest();
request.open('GET', 'http://htmlweb.ru/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);
</script>

Выводы

Стремление к минимальному, нулевому количеству наворотов на веб-странице - достойная цель, что окупит себя быстрой загрузкой и лучшим пользовательским опытом. Но будьте осторожны - никто не выиграет, если Вы будете изобретать велосипед, который уже используется в JQuery. Не жертвуйте хорошей практикой разработки только для того, чтобы сократить количество кода. Но есть множество мест, где на сегодня советы вполне применимы. Например, на данном сайте библиотека jQuery не используется.


.

© Copyright 2008-2017 by KDG