Что такое jquery?

Без jQuery!Скопировать ссылку

Наверное, вы думаете: «Так, Реми использует jQuery, а если нет, то просто переписывает все фичи сам?»

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

Нет, всё не так. Просто есть довольно много сценариев, в которых я буду писать код своего приложения без библиотеки, опираясь на встроенные в браузер технологии. Если какая-то часть этих технологий не поддерживается в том или ином браузере, я могу прибегнуть к полифилам — но только после тщательного рассмотрения и понимания, что это имеет смысл.

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

Наконец-то формы!Скопировать ссылку

jQuery-плагин для валидации форм был стабильным плагином с первых дней jQuery, и честно сделал работу с формами намного проще.

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

Но что, если можно было бы выбросить кучу строк JavaScript и плагинов и валидировать эл. адрес как-то так:

Хотите сделать его обязательным полем?

Хотите разрешать пользователю вводить только определенные символы?

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

Так как все эти типы полей при отсутствии в браузере поддержки просто становятся текстовыми полями, и раз уж вам все равно нужно делать валидацию на сервере, я бы на вашем месте выкинул всю JavaScript-валидацию и заменил ее на встроенную в браузеры валидацию HTML5-форм.

Значения параметров

Параметр
Описание
events
Один, или несколько разделенных пробелами типов событий (опционально допускается указывать пространство имен). Например: «click» или «click dblclick.myNamespace»

eventMap
Объект, содержащий строковый ключ, или ключи, определяющие тип события, а в качестве значения этих ключей выступает функция, которая будет выполнена каждый раз, когда конкретное событие срабатывает.Например: {«event»: handler, «anotherEvent.myNamespace»: anotherHandler}

selector
Строка селектора для фильтрации потомков выбранных элементов, запускающих событие

Обратите внимание, что если параметр отсутствует, или имеет значение null, то обработчик всегда вызывается при достижении выбранного элемента (не зависимо событие вызвано на элементе, или вложенном элементе).
data
Какие-либо данные, или объект, содержащий данные, которые будут переданы в обработчик событий при его срабатывании (свойство объекта Event event.data).
handler
Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event и при необходимости дополнительные параметры для решения конкретной задачи

Значение false также может использоваться в качестве сокращенной записи функции, которая имеет тело return false (при вызове возвращает значение false).

Удобная напоминалка вместо диалогового окна

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

Во-первых, диалоговое окно скрывает за собой информацию на странице. Некоторые окна не так-то просто закрыть. Они не дают компьютеру завершить процесс, если пользователя нет на месте и он не может оперативно вмешаться. В конце концов, они только раздражают и не дают сосредоточиться на задаче. Так почему бы не использовать другие методы — менее навязчивые, но не менее эффективные? Например, можно аккуратно разместить дополнительную информацию рядом с основной строкой или использовать раскрывающиеся блоки. 

Объект события

Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример ниже демонстрирует получение координат мыши из объекта события:

Некоторые свойства объекта :

Тип события, в данном случае .

Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у , но если обработчик является функцией-стрелкой или при помощи привязан другой объект в качестве , то мы можем получить элемент из .

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

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

Объект события доступен и в HTML

При назначении обработчика в HTML, тоже можно использовать объект , вот так:

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

Эффекты JQuery

Эффекты JQuery работают рука об руку с событиями, позволяя добавить анимацию и иным образом манипулировать элементами на странице.

Мы сделаем пример, в котором мы открываем и закрыть всплывающее наложение. В то время как мы могли бы использовать два идентификатора – один, чтобы открыть накладку, а другой, чтобы закрыть его – мы вместо того, чтобы использовать класс, открываем и закрываем закладку той же функцией.

Удалим текущий теги и  из тела вашего файла , и добавьте следующую строку в ваш HTML – документ:

index.html

...
<body>
<button class="trigger">Открыть</button>

<section class="overlay">
  <button class="trigger">Закрыть</button>
</section>
...

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

css/style.css

.overlay {
  display: none;
  position: fixed;
  top: 45%;
  left: 45%;
  transform: translate(-45%, -45%);
  height: 210px;
  width: 150px;
  background: blue;
}

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

JS / scripts.js

$(document).ready(function() {
    $(".trigger").click(function() {
        $(".overlay").toggle();
    });
});

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

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

• – Переключение: переключает видимость элемента или элементов. и являются соответствующие эффекты в одну сторону.
• – Fade Переключение: переключает видимость и одушевляет непрозрачность элемента или элементов. и являются соответствующие эффекты в одну сторону.
• – Slide Переключение переключает видимость элемента или элементов со скользящим эффектом. и являются соответствующие эффекты в одну сторону.
• – Анимация выполняет пользовательские эффекты анимации на CSS свойство элемента.

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

Добавление событий к динамически созданным объектам

Для того чтобы повесить событие на элемент, которого ещё нет, можно использовать следующую конструкцию функции :

$(document).on(eventName, selector, handler);

// document или любой другой существующий родительский элемент
// eventName - имя события
// selector - селектор, осуществляющий фильтрацию потомков, для которых необходимо запустить обработчик события
// handler - обработчик события

Это действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является . Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция может программно отобрать среди элементов (элемента, который вызвал это событие () и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции обработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события.

Например, добавим событие к элементу, которого ещё нет на странице:

<button id="addButton" type="button">Добавить кнопку</button>

<script>
// при нажатии на элемент с id="addButton" добавить в начало страницы новую кнопку
$('#addButton').on('click', function(e) {
  $('body').prepend('<button class="deleteMe" type="button">Удалить меня</button>');
});
// добавить событие click, которое будет выполнено для элементов, которых ещё нет на странице
$(document).on('click','.deleteMe', function() {
  $(this).remove();
});
</script>

Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.

$(document).on('click','#comment a',function(e) {
  if(!(location.hostname === this.hostname || !this.hostname.length)) {
    e.preventDefault();
    location.href='away?link='+encodeURIComponent($(this).attr('href'));
  }
});

Выбор элементов с помощью составного CSS-селектора

Вы также можете комбинировать CSS-селекторы, чтобы сделать ваш выбор еще более точным.

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

<script type="text/javascript">
  $(document).ready(function(){
    // Подсвечиваем только элементы параграфа с классом mark
    $("p.mark").css("background", "yellow");

    // Подсвечиваем только элементы span внутри элемента с ID mark
    $("#mark span").css("background", "yellow");

    // Подсвечиваем все элементы li внутри всех элементов ul
    $("ul li").css("background", "red");

    // Подсвечиваем все элементы li внутри элемента ul имеющего ID mark
    $("ul#mark li").css("background", "yellow");

    // Подсвечиваем все элементы li внутри элемента ul имеющего класс mark
    $("ul.mark li").css("background", "green");

    // Подсвечиваем все ссылки которые открываются в новом окне
    $('a').css("background", "yellow");
  });
</script>

Ajax

Библиотека jQuery позволяет удобно выполнять асинхронные запросы к серверу. Ниже представлены функции и методы, позволяющие загружать данные с сервера без обновления страницы браузера и их можно разделить на:

• Низкоуровневые функции;
• Обработка ajax-событий;
• Вспомогательные функции.

.ajaxComplete(), .ajaxError(), .ajaxSend(), .ajaxError(), .ajaxStart(), .ajaxStop(), .ajaxSuccess(), .load(), .serialize(), .serializeArray(), jQuery.ajax(), jQuery.ajaxPrefilter(), jQuery.ajaxSetup(), jQuery.ajaxTransport(), jQuery.get(), jQuery.getJSON(), jQuery.getScript(), jQuery.param(), jQuery.post().

7 лет назад…Скопировать ссылку

17 июня 2006 года я опубликовал мой самый первый настоящий пост в блоге: я взял обычный JavaScript и упростил его с помощью jQuery. В итоге 14 строчек JavaScript превратились в три строчки на jQuery (версии pre-1.0).

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

Я показал jQuery команде разработчиков, с которыми я сотрудничал в середине 2000-х, и даже дизайнеры увидели все плюсы этого подхода, поскольку CSS-селекторы были им уже знакомы (именно так и возникла идея «jQuery для дизайнеров»).

Внезапно навигация по DOM стала простойСкопировать ссылку

В те времена навигация по DOM была очень сложной. Можно было поспорить — если у вас получалось что-то сделать в Firefox 1.5, то в IE6 это не работало.

Простота, с которой можно было изучить jQuery, стала для меня плюсом. Вся навигация по DOM делалась с помощью CSS-селекторов (реализовано это было какой-то безумной магией из «черного ящика», которую придумал Джон Резиг) — главное, что это экономило мои ограниченные мыслительные ресурсы, и, когда я получал нужные мне элементы DOM, я уже мог делать с ними все что угодно (показывать, скрывать, анимировать и т.п.)

Понимание AjaxСкопировать ссылку

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

Итак, мне нужно было работать с объектом . Когда я увидел его впервые, мне стоило усилий понять, как работает событие и пара и . jQuery, как и ряд других библиотек, разобралась с тем ужасом, который представляли собой XHR-запросы в IE через ActiveX…

Когда я увидел, что в jQuery можно использовать функцию , для того чтобы выцепить HTML по какому-то адресу (именно это мы обычно и хотели делать с помощью Ajax), вся технология внезапно стала для меня понятной.

jQuery сразу и надолго стала моим обычным инструментом. Это был мой «швейцарский нож», если позаимствовать !

Ajax

В jQuery реализована возможность выполнения запросов к серверу без перезагрузки страницы, так называемая технология ajax. Базовыми функциями для ее работы являются post() и get() (есть еще более низкоуровневая, ajax(), но мы ее не будем рассматривать):

$.post(url, , , )
$.get(url, , , )

url — url-адрес, по которому будет отправлен запрос.

data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: {fName1:value1, fName2:value2, …}.

callback() — пользовательская функция, которая будет вызвана после ответа сервера.

dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос (подробности тут).

Рассмотрим примеры с методом get, использование второго метода аналогично. Сделаем простейший ajax-запрос: отправим пустой запрос к серверу и не будем обрабатывать ответ. Это может быть использовано, например для подсчета количества наведений курсора на баннер (при каждом наведении серверу будет отправляться сигнал).

$.get("/plusOne.php");

Теперь, отправим данные на сервер и обработаем их. Javascript будет выглядеть следующим образом:

// На сервер будет отправлен запрос страницы http://hostname/ajaxtest.php и указаны два параметра.  
// После получения ответа от сервера будет вызвана функция onAjaxSuccess, которая выведет 
// на экран сообщение с данными, присланными сервером.
$.get(
  "/ajaxtest.php",
  {
    param1 "param1",
    param2 2
  },
  onAjaxSuccess
);
 
function onAjaxSuccess(data)
{
  // Здесь мы получаем данные, отправленные сервером и выводим их на экран.
  alert(data);
}

На сервере, обработка Ajax запроса ничем не отличается от обработки обычного запроса (как когда вызывается главная страница сайта):

<?php
  echo "I get param1 = ".$_GET'param1'." and param2 = ".$_GET'param2';
?>

В результате этого запроса, на странице появится табличка с текстом «I get param1 = param1 and param2 = 2»

С помощью этих методов можно запрашивать XML, который потом без проблем можно будет обработать привычными методами jQuery. Допустим, что на сервере у нас есть следующая страница, генерирующая XML:

<?php
  header("Content-Type: text/xml; charset=utf-8");
?>
<list>
  <item id="1">
    Item 1 
  </item>
  <item id="2">
    Item 2 
  </item>
</list>

Запросив эту страницу методом get или post, полученные данные можно будет легко обработать:

$.get(
  "/ajaxtest.php",
  {},
  onAjaxSuccess
);
 
function onAjaxSuccess(xml)
{
  var items = $("item", xml); // так можно получить коллекцию всех элементов item из полученного xml
  var item = $("#1", xml);    // а так, найти item с id="1"
  alert(item.html());     // и извлечь из него текст
}

Помимо рассмотренных методов, существует и методы с более узкой направленностью: load() запрашивает html-текст и автоматически вставляет его в выбранные элементы, $.getScript() делает запрос javascript-файла и автоматически его выполняет. Эти и другие функции можно найти в разде Ajax.

Названия событий и пространства имен

В качестве аргумента можно использовать любое имя события. jQuery будет просматривать все стандартные JavaScript-события браузера и вызывать функции-обработчики , когда браузер генерирует событие в связи с действиями пользователя, например при клике мыши (). Кроме того метод   может вызывать как стандартные так и пользовательские события. Имена событий могут содержать только буквы латинского алфавита, цифры, подчеркивание и двоеточие.

Названия событий могут быть квалифицированы по событию пространства имен, которые упрощают удаление или инициирование событий. Например определяет для события пространства имен myPlugin и simple. Обработчики назначенные этой строкой могут быть сняты командой или не нарушая другие обработчики назначенные элементам. Пространства имен аналогичны CSS-классам в том, что они не являются иерархичными – должно совпадать только одно имя. Пространства имен, начинающиеся с символа подчеркивания зарезервированы в jQuery.

Во втором варианте синтаксиса метода аргумент является простым объектом. Ключи – это строки, такие же как и аргумент events в первом варианте синтаксиса метода , т.е. название события с пространством имен. Значением для каждого ключа является функция (или специальное значение ), которая будет использоваться в качестве обработчика. В остальном эти два варианта синтаксиса идентичны по работе и их поведение описано ниже.

События мыши

Уроки Javascript #2. Объект Event (Событие), Всплытие и Погружение (Фазы Жизненного Цикла События).

12432

777

67

00:17:15

28.02.2021

Мой Telegram: 🤍

В первой части видео мы разберемся, что собой представляет объект Событие (Event) в Javascript, и уделим особое внимание его свойствам: target и currentTarget. Во сторой части видео мы изучим 3 фазы жизненного цикла события в JS:
1) Погружение (capturing phase)
2) Фаза цели (target phase)
3) Фаза всплытия (bubbling phase)

Во сторой части видео мы изучим 3 фазы жизненного цикла события в JS:
1) Погружение (capturing phase)
2) Фаза цели (target phase)
3) Фаза всплытия (bubbling phase)

Также будем использовать метод .stopPropagation() для того, чтобы остановить передачу событий между элементами.

Мои Курсы:
Gatsby JS (полный курс): 🤍
React для начинающих: 🤍
​Все мои курсы (+ исходные файлы): 🤍

Подписывайся на соц сети:
Telegram: 🤍
VK: 🤍
Instagram: 🤍
Мой блог о веб-разработке: 🤍

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

Функция считается одной из самых используемых в jQuery. Она необходима для переборов элементов объекта.

Объект обладает элементами DOM и предоставляет функции jQuery. Также jQuery предлагает вспомогательную функцию с таким же именем () : ее особенность в том, что ее можно вызывать без предварительного выбора или создания DOM.

Например, с помощью можно осуществлять итерацию по массиву объектов с некоторыми данными. Это очень удобно. В этом случае код будет выглядеть так:

var obj= 

   $.each(obj, function (index, value) {
          var first_name=value.FirstName;
          var last_name=value.LastName;
          console.log(first_name+""+last_name);
   });

Давайте посмотрим на результат, который отображает FirstName и LastName из объектной переменной:

• Andrea Ely
• John Shaw
• Leslie Mac
• David Miller
• Rehana Rewa

Создание элемента из чистого HTML

Метод insertAdjacentHTML позволяет нам вставлять необработанный HTML в документ, но что, если мы хотим создать элемент из необработанного HTML и использовать его позже?

Для этого мы можем использовать объект DomParser и его метод parseFromString. DomParser предоставляет возможность разбора исходного кода HTML или XML в документ DOM.

Используем метод parseFromString для создания документа только с одним элементом и возвратом только этого элемента:

const createElement = domString => new DOMParser().parseFromString(domString, 'text/html').body.firstChild;

const a = createElement('<a href="/home" class="active">Home</a>');

Эффект привязки

Сознание человека полно предубеждений. Как отмечает психолог Даниэль Канеман, «эффект привязки» — одно из труднопреодолимых предубеждений. А это значит, что мы судим по первым числам, которые увидели. Мы видим большие значения, а затем прокручиваем страницу вниз и видим цену, которая уже и не кажется такой внушительной по сравнению с первыми числами. Фокус в том, что первые значения могут быть не ценой за данный товар да и вовсе не ценой, а, допустим, объемом информации! Типичный тому пример — указание рекомендуемой производителем цены, за которой следует более низкая — реальная цена.

Теперь все вместе!

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

Сегментированный элемент управления и Choice Chips

Фон является самым большим отличием между сегментированными элементами управления и кнопками переключения (toggle buttons). Связанный фон помогает пользователю понять, что он должен выбрать один вариант, а отдельный фон указывает, что он может выбрать много вариантов.

Сходство vs Отличие

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

Отличие от кнопки vs Сходство с кнопкой

Радиокнопки и галочки

С таким большим количеством вариантов переключателей, я считаю, что лучше всего размещать переключатели и галочки рядом друг с другом. Радиокнопка, галочка и выделенный элемент списка в iOS хороши сами по себе, но в сочетании с галочкой радиокнопка выигрывает в последовательности размещения. Наличие двух галочек путает пользователя, понимаете, о чем я?

Android & Web vs iOS vs альтернативный паттерн

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

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

Изображения в конце vs изображения вначале

Формат оператора jQuery

Включим в тело (раздел <body>) страницы небольшой код JavaScript, изменяющий стиль и содержимое одной из строк
с помощью библиотеки jQuery. Код JavaScript помещается внутри тегов <script /> :

<body>
  <h3>Пример jQuery</h3>
  <div id="id1">Полный текст первого абзаца</div>
  <div class="id1">Полный текст второго абзаца</div>

  <script>
      // Скрыть все div's на странице
      jQuery('div').filter('#id1').hide();

      // Определить тексты внутри всех div's
      $('div').filter('#id1').text('Сокращенный текст');

      // Добавить атрибут со значением обновления всех div's
      $('div').filter('#id1').addClass("updatedContent");

      // Изменить стиль текста всех div's
      $('div').filter('#id1').css('font-style', 'italic');

      // Включить отображение всех div's на странице
      jQuery('div').filter('#id1').show();
  </script>
</body>

JavaScript-код библиотеки jQuery можно не только размещать внутри тегов <script /> раздела <body>, но и
загружать из внешнего файла.

Рассмотрим код JavaScript’a

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

С чем
связана необходимость применения jQuery для вызова оператора, если описание в виде $ значительно
нагляднее? Дело в том, что на странице могут быть использованы различные JavaScript библиотеки, которые будут между
собой «бороться» за контроль над именем функции в виде символа доллара. Этот символ часто используется в качестве
функции в некоторых библиотеках. Чтобы избежать проблем в данных ситуациях следует использовать jQuery.

Структура оператора библиотеки включает :

Примечание :
1. В селекторе используется фильтр (filter(‘#id1’)). Если его не включить, тогда действие будет применено ко всем
элементам WEB-страницы, включенным в теги ‘div’.
2. При использовании в фильтре символа # выделяются элементы div с идентификатором id=»id1″. Чтобы выделить все
элементы с операндом class=»id1″ необходимо использовать символ точки, т.е. filter(‘.id1’)

Браузер выполнит JavaScript-код, расположенный внутри тегов <script />, и страница примет вид, представленный
на следующем screenshot’e :

Вы можете изменить фильтр ‘#id1’ на ‘.id1’ и перезагрузить страницу; изменения коснуться второй строки с div.

Как работать с сервером в JavaScript ч.1 | AJAX

19298

1016

75

00:31:45

22.11.2019

В этом цикле роликов мы поговорим о том, как работать с сервером при помощи языка программирования JavaScript. Мы разберем технологию асинхронных запросов AJAX и чем её можно реализовать: XMLHttpRequest, Fetch API, axios.

Ссылки:
Скачать материалы для работы:
🤍
Node.js — 🤍
MAMP — 🤍
Open Server — 🤍
Json-server — 🤍
Коды ответа HTTP — 🤍
XMLHttpRequest — 🤍
Методы HTTP запроса — 🤍

Телеграм-канал: 🤍
Телеграм-канал с общением: 🤍

Один из лучших и полных курсов по JS + библиотека React со скидкой 92%:
🤍

JS практика со скидкой: 🤍

И так же по верстке:
🤍

И по WordPress:
🤍

А может нужна реальная практика по созданию приложений React + PHP?
🤍

#уроки #javascript #разработка #джаваскрипт #профи #стандарты #создание #создатьсайт #учить #иванпетриченко #начинающие #сша #видеоуроки #js #base #html #nodejs #electronjs #python #programming #learn #tutorial #бесплатно #java

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

Одна из самых важных областей применения функциональности jQuery — это выбор элементов DOM. В качестве примера ниже показано, как осуществить выбор нечетных элементов img:

Чтобы выбрать элементы, вы просто передаете селектор функции $(). Библиотека jQuery поддерживает все множество CSS-селекторов, а также некоторые дополнительные селекторы, которые обеспечивают удобные возможности детализированного управления процессом выбора элементов. В данном примере используется псевдоселектор :odd, который выбирает нечетные элементы, соответствующие основной части селектора (в данном случае это селектор img, который выбирает все элементы <img>).

В случае использования селектора :odd отсчет элементов начинается с нуля, т.е. первый элемент является четным. Поначалу это может сбивать вас с толку. Наиболее полезные селекторы jQuery перечислены в таблице ниже:

Я назвал эти селекторы наиболее полезными, поскольку они определяют функциональность, обеспечить которую с помощью селекторов CSS было бы нелегко.

В jQuery определены также селекторы, позволяющие выбирать элементы в соответствии с их типом:

<select>
    <option>Option<option/>
</select>

jQuery в действии

<html>
<head>
<title>Прячем элемент после нажатия на него</title>
<script src=»https://code.jquery.com/jquery-3.1.1.min.js»></script>
</head>
<body>
<div class=»hide-me»>
Нажмите,чтобы спрятать этот блок.
</div>
<script>
jQuery(document).ready(function($){
$(document).on(‘click’,’.hide-me’, function(){
$(this).slideUp();
});
});
</script>
</body>
</html>

AjaxСкопировать ссылку

Как я уже говорил, jQuery помогла мне понять Ajax в полной мере. Сейчас Ajax — это довольно просто. Конечно, у меня нет всяких дополнительных опций, но, по большей части я просто выполняю XHR GET или POST-запросы с JSON.

Коротко и просто. XHR — это совсем не сложно, а сейчас есть и хорошая документация. Понимание того, как XHR на самом деле работает и что с его помощью можно сделать, дает нам больше возможностей.

Как насчет событий прогресса? Событий, привязанных к прогрессу загрузки? Что насчёт отправки ? А если нужно разбираться с CORS и заголовком ?

Для этого вам понадобится прямой доступ к объекту XHR (я знаю, что это можно получить и из jQuery), и вам нужно знать, как устроен XHR и что с ним можно делать, потому что такие вещи, как, например, загрузку файлов через перетаскивание сейчас безумно просто реализовать с помощью встроенной функциональности.

Итого

Есть три способа назначения обработчиков событий:

1. Атрибут HTML: .
2. DOM-свойство: .
3. Специальные методы: для добавления, для удаления.

HTML-атрибуты используются редко потому, что JavaScript в HTML-теге выглядит немного странно. К тому же много кода там не напишешь.

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

Последний способ самый гибкий, однако нужно писать больше всего кода. Есть несколько типов событий, которые работают только через него, к примеру и . Также поддерживает объекты в качестве обработчиков событий. В этом случае вызывается метод объекта .

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

Мы изучим больше о событиях и их типах в следующих главах.