JQuery это великолепная библиотека. Она помогала отлично обойти все подводные камни IE6. В прошлые времена кроссбраузерность была большим вопросом, который стоял перед разработчиками. Jquery отлично справлялся со всеми расхождениями отображения верстки в различных браузерах.

На сегодня, браузеры имеют отличные унифицированные решения. Мы можем комфортно использовать все привилегии ES5, также в нашем распоряжении HTML5 API с которым гораздо легче обрабатывать DOM элементы. Разработчики стоят на грани забвения и ухода в сторону от jQuery для некоторых проектов. Особенно, в случае с микросервисами и не сложными программами.

Не поймите не правильно — Jquery все еще остается чудесной библиотекой, и конечно же, в 70% случаев вам придется использовать ее. Хотя для маленьких страничек с ограниченным JS, вы можете использовать VanillaJS или другой фреймворк. Таковы подойдут для мобильных приложений.

Что же, вот вам 10 примеров рабочего кода, с которым можно обойтись без jquery.

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

Первая вещь, которой пользуются используя jQuery - это обвертка кода в $(document).ready() метод, чтобы знать когда DOM готов для манипуляций. Без Jquery, мы можем использовать DOMContentLoaded событие. Вот пример кода:

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

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

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

// Можно использовать 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); }

• Nessy
• Big foot
• La chupacabra

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

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

Var btn = document.querySelectorAll("button"), list = document.querySelector("ul"); // Вызываем addEventListener на желаемое событие. // запускает слежение за событием клика по элементу. btn.addEventListener("click", function () { // При нажатии кнопки, мы хотим инициировать событие масштаба нашего списка. // Для этого нам необходимо добавить событие в наш список, // чтобы при наведении мыши на элемент функция сработала. list.addEventListener("mouseover", enlarge); }); // Для отмены события масштабирования используем removeEventListener. btn.addEventListener("click", function () { // Удаление событий не будет работать с безымянными функциями, используйте только именованные list.removeEventListener("mouseover", enlarge); }); // Давайте создадим функцию, которая будет масштабировать. var enlarge = function () { // Добавляем класс для элементов list.classList.add("zoomed"); // когда курсор уйдет из списка, уберем класс, чтобы вернуться к обычному масштабу list.addEventListener("mouseout", function () { list.classList.remove("zoomed") }); }; // Теперь мы хотим подсветить имена при нажатии на них. // Когда клик сработает на элементе, он должен стать зеленым // Благодаря делегированию событий, мы можем просто добавить обработчик на родительский элемент // В этом способе, мы не будем создавать слушатели событий для каждого

. list.addEventListener("click", function (e) { // подсвечиваем целевой элемент зеленым e.target.classList.add("green"); });

Enable zoom Disable zoom

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

• Chewbacca
• Han Solo
• Luke
• Boba fett

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

addEventListener использовал третий аргумент, но это опционально. Как видите, код выглядит весьма похоже на jQuery.

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

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

Var btn = document.querySelectorAll("button"), div = document.querySelector("#myDiv"); btn.addEventListener("click", function () { // легкий способ получать аттрибуты элемента console.log(div.id); }); // Element.classList хранит все классы элемента из DOMTokenList. var classes = div.classList; btn.addEventListener("click", function () { console.log(classes); }); btn.addEventListener("click", function () { // Добавление и удаление классов classes.add("red"); }); btn.addEventListener("click", function () { // Переключение класса classes.toggle("hidden"); });

Display id Display classes Color red Toggle visibility

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.

Var myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("button"); // Так с легкостью можно узнать весь текст древа элементов var myContent = myText.textContent; console.log("textContent: " + myContent); // Используйте textContent для замены текста элемента // удаляет старый, замещая новым текстом btn.addEventListener("click", function () { myText.textContent = " Koalas are the best animals "; }); // Если нам нужен HTML элемента, используем innerHTML. var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // Для замены html, просто предоставьте новый btn.addEventListener("click", function () { myText.innerHTML = " Penguins are the best animals "; });

Which are the best animals?

Koalas
Penguins

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

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

Var lunch = document.querySelector("#lunch"); // Допустим у нас есть меню, нашего ланча // Давайте добавим в него что нибудь var addFries = function () { // Прежде создаем элемента, и наполняем контентом var fries = document.createElement("div"); fries.innerHTML = "

Fries

"; // Когда это сделано, далее используем 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.addEventListener("click", addFries); btn.addEventListener("click", addCheese); btn.addEventListener("click", removePickles);

Add fries to lunch Add cheese to sandwich Remove pickles My Lunch

• My sandwich
• Bread
• Pickles
• Beef
• Mayo
• Bread

С появлением jQuery, у веб-программистов появилась возможность создавать впечатляющие визуальные эффекты, не прибегая к использованию технологии flash. В данной статье представлено несколько ярких примеров того, каких потрясающих результатов можно достичь, используя стандартные средства браузера и свое воображение.

Эффект увеличительного стекла

Хорошо организованный эффект, позволяющий увеличивать ту часть изображения, над которой будет находиться курсор. В браузерах, незнакомых с CSS3 увеличительное стекло будет квадратным.

Aviaslider

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

Широкомасштабная навигация
Слайдшоу больших изображений
Навигация, основанная на кругах

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

Выпадающая панель входа на сайт
Circulate

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

Flip box

Плагин Flip позволяет переворачивать элементы так, как будто это карточки.

Hovering gallery

Неформальная галерея изображений. Предпросмотр содержимого представляет из себя группу разбросанных фотографий, сделанных на фотоаппарат полароид.

icarousel

Простой, но очень приятный слайдер изображений.

Imageflow

Слайдшоу, с перемещением изображений в пространстве.

Interactive picture

Очень интересный способ сделать интерактивный каталог товаров.

Jqfancy transitions
Photo shoot

Позволяет делать снимки отдельных частей изображения на странице. Нажмите кнопкой мыши на нужную часть изображения и увидите результат на экране.

Quick sand

Плагин Quicksand позволит вам сортировать и фильтровать набор элементов, используя для этого очень качественные эффекты.

Slideout context tips

Этот плагин будет очень полезен для создания детального описания сложных объектов и интерактивных туров, когда требуется, занимая как можно меньше места предоставить большое количество информации.

Sliding boxes

Плагин Sliding boxes поможет сделать необычную динамичную галерею изображений с заголовками к ним.

zoomer gallery

Галерея изображений, элементы которой будут весело выскакивать вперед при наведении курсора на них.

10.03.17 14K

Функция each jQuery используется для перебора элементов объекта jQuery . Он содержит один или несколько элементов DOM и предоставляет все функции jQuery . Дополнительно jQuery предоставляет вспомогательную функцию с тем же именем, которая может быть вызвана без предварительного выбора или создания элементов DOM . Давайте узнаем об этом более подробно.

Синтаксис функции jQuery .each()

В следующем примере мы выбираем на веб-странице все элементы div и выводим индекс и идентификатор каждого из них. Возможный результат: “div0:header ”, “div1:body ”, “div2:footer ”. В примере используется функция jQuery each() , а не вспомогательная:

// Элементы DOM $("div").each(function (index, value) { console.log("div" + index + ":" + $(this).attr("id")); });

В следующем примере продемонстрировано использование вспомогательной функции. В данном случае объект, для которого выполняется цикл, задается в качестве первого аргумента. В этом примере я покажу, как перебрать массив через цикл с помощью jQuery each function :

// Массивы var arr = [ "один", "два", "три", "четыре", "пять" ]; $.each(arr, function (index, value) { console.log(value); // Выполнение останавливается после "три" return (value !== "три"); }); // Результат: один два три

В последнем jQuery each примере я хочу представить циклы через свойства объекта:

// Объекты var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; $.each(obj, function (index, value) { console.log(value); }); // Результат: 1 2 3 4 5

Все это сводится к формированию надлежащего обратного вызова. Контекст обратного вызова this будет равен второму аргументу, который является текущим значением. Но поскольку контекст всегда будет объектом, то простые значения должны быть «обернуты ». Поэтому строгое равенство между значением и контекстом не может быть задано. Первый аргумент — текущий индекс, который является числом для jQuery each array или строкой (для объектов ).

Основной пример использования функции jQuery .each ()

Давайте посмотрим, как функция each() применяется в сочетании с объектом jQuery . В первом примере выбираются все элементы a на странице, и выводится их атрибут href :

$("a").each(function (index, value){ console.log($(this).attr("href")); });

Во втором примере использования jQuery each object выводятся все внешние href на веб-странице (при условии, что используется протокол HTTP ):

$("a").each(function (index, value){ var link = $(this).attr("href"); if (link.indexOf("http://") === 0) { console.log(link); } });

Предположим, что на странице есть следующие ссылки:

JQUERY4U PHP4U BLOGOOLA

Второй код выдаст:

http://jquery4u.com http://www.phpscripts4u.com http://www.blogoola.com

Элементы DOM из объекта jQuery при использовании внутри each() необходимо снова «обернуть ». Потому что сам jQuery — это фактически контейнер для массива элементов DOM . С помощью jQuery each function этот массив обрабатывается так же, как и обычный. Поэтому мы не получаем обернутые элементы сразу после обработки.

Пример массива jQuery.each()

Еще раз рассмотрим, как можно обрабатывать обычный массив:

var numbers = ; $.each(numbers , function (index, value){ console.log(index + ":" + value); });

Результат выполнения кода: 0:1, 1:2, 2:3, 3:4, 4:5 и 5:6.

Массив содержит числовые индексы, поэтому мы получаем числа, начиная с 0 и до N — 1 , где N — количество элементов в массиве.

Пример JSON JQuery.each()

У нас могут быть более сложные структуры данных, такие как массивы в массивах, объекты в объектах, массивы в объектах или объекты в массивах. Давайте рассмотрим, как jQuery find each может применяться в подобных сценариях:

var json = [ { "red": "#f00" }, { "green": "#0f0" }, { "blue": "#00f" } ]; $.each(json, function () { $.each(this, function (name, value) { console.log(name + "=" + value); }); });

Результат выполнения кода: red=#f00, green=#0f0, blue=#00f.

Мы обрабатываем структуру с помощью вложенного вызова each() . Внешний вызов обрабатывает массив переменной JSON , внутренний вызов обрабатывает объекты. В этом примере каждый jQuery each element имеет только один ключ. Но с помощью представленного кода может быть присвоено любое количество ключей.

Пример класса jQuery.each()

В этом примере показано, как перебрать каждый элемент с классом productDescription :

Красный Розовый Оранжевый Синевато-зеленый Зеленый

Вместе с селектором мы используем вспомогательную функцию each() вместо метода each() :

$.each($(".productDescription"), function (index, value) { console.log(index + ":" + $(value).text()); });

Результат использования jQuery each function будет следующим: 0:Красный , 1: Оранжевый , 2:Зеленый .

Нам не нужно использовать индекс и значение. Это параметры, которые помогают определить, какой элемент DOM в настоящее время обрабатывается циклом. Кроме этого в сценарии можно использовать более удобный метод each() :

$(".productDescription").each(function () { console.log($(this).text()); });

Результат .

AJAX - группа технологий, которая используется в веб разработке для создания интерактивных приложений. AJAX позволяет передавать данные с сервера без перезагрузки страницы. Таким образом можно получать очень впечатляющие результаты. А библиотека jQuery существенно облегчает реализацию AJAX с помощью встроенных методов.

Для реализации технологии используется метод $.ajax или jQuery.ajax :

$.ajax(свойства) или $.ajax(url [, свойства])

Второй параметр был добавлен в версии 1.5 jQuery.

url - адрес запрашиваемой страницы;

properties - свойства запроса.

Полный список параметров приведен в документации jQuery.

В уроке мы используем несколько наиболее часто используемых параметров.

success (функция) - данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.

data (объект/строка) - пользовательские данные, которые передаются на запрашиваемую страницу.

dataType (строка) - возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.

type (строка) - тип запроса. Возможные значения: GET или POST. По умолчанию: GET.

url (строка) - адрес URL для запроса.

Пример 1

Простая передача текста.

$.ajax({ url: "response.php?action=sample1", success: function(data) { $(".results").html(data); } });

Для ответа имеется элемент div .result .

Ждем ответа

Сервер просто возвращает строку:

Echo "Пример 1 - передача завершилась успешно";

Пример 2

Передаем пользовательские данные PHP скрипту.

$.ajax({ type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data){ $(".results").html(data); } });

Сервер возвращает строку со вставленными в нее переданными данными:

Echo "Пример 2 - передача завершилась успешно. Параметры: name = " . $_POST["name"] . ", nickname= " . $_POST["nickname"];

Пример 3

Передача и выполнение кода JavaScript

$.ajax({ dataType: "script", url: "response.php?action=sample3", })

Сервер выполняет код:

Echo "$(".results").html("Пример 3 - Выполнение JavaScript");";

Пример 4

Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.

$.ajax({ dataType: "xml", url: "response.php?action=sample4", success: function(xmldata){ $(".results").html(""); $(xmldata).find("item").each(function(){ $(" ").html($(this).text()).appendTo(".results"); }); } });

Сервер должен возвращать XML код:

Header ("Content-Type: application/xml; charset=UTF-8"); echo