Библиотека jQuery зарекомендовала себя как простой, но мощный инструмент для управления содержимым WEB-страниц и их трансформации. Многогранность данной библиотеки и её возможности невозможно описать на одной или нескольких страницах. В содержании представлено описание jQuery на страницах сайта.

Содержание

Введение		открыть
Формат оператора jQuery		открыть
Включение jQuery в WEB-страницу		открыть
Загрузка скриптов из внешнего файла		открыть
Выборка, фильтрация, модификация, украшение DOM-элементов
	Селектор jQuery - выбор элементов из объектной модели документа DOM	открыть
	Фильтрация наборов и поиск элементов jQuery методами filter, find	открыть
	Действия и обработчики событий jQuery	открыть
	Модификация WEB-страницы библиотекой jQuery	открыть
	CSS в сочетании с jQuery	открыть
Анимация DOM-элементов библиотекой jQuery
	Базовая анимация	открыть
	Метод animate : анимация css-свойств, подсветка, скорость анимации	открыть
	Выскакивающие панели, опции и цепочки действий метода animate	открыть
	Анимированная навигация jQuery	открыть
Интерфейс : меню, вкладки, панели
	Всплытие событий в структуре DOM	открыть
	Выпадающее вниз меню, сворачиваемое меню типа аккордеон	открыть
	Виджет вкладок tabs	открыть
	Виджет вкладок accordion	открыть
Кострукция, Ajax и интерактивность
	Асинхронные ajax-запросы	открыть
	Описание и примеры создания объекта jQuery.Deferred	открыть

Введение

Библиотека jQuery включает набор функций JavaScript, облегчающих взаимодействие HTML и JavaScript. jQuery облегчает манипулирование объектной моделью документа DOM, предоставляет доступ к атрибутам и содержимому элементов DOM. Таким образом, jQuery помогает выбирать элементы HTML-страниц и выполнять с ними различные операции. Кроме этого, библиотека включает простой API для создания Ajax-запросов к серверу. Пример использования jQuery на JSP-странице для формирования Ajax-запроса представлен здесь.

Как говорится, лучше один раз увидеть, чем много раз прочитать. Рассмотрим простейшую HTML-страницу :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>JQuery example</title>
  </head>
  <body>
      <h3>Пример jQuery</h3>
      <div id="id1">Полный текст первого абзаца</div>
      <div class="id1">Полный текст второго абзаца</div>
  </body>
</html>

Страница включает заголовок <h3> и два <div>. При этом, один из div имеет идентификатор id1, а второй ссылается на class, определенный в стилях (style CSS) как id1. Поскольку страница не имеет ссылок на файл со стилями, то браузер проигнорирует class во втором div'e, и на странице будет представлен следующий контент :

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

Включение jQuery в WEB-страницу

Загрузим в WEB-страницу библиотеку jQuery. Для загрузки библиотеки можно использовать сайт Google CDN (Content Delivery Network). Компания Google размещает в сети CDN некоторые популярные библиотеки с открытым исходным кодом, к которым относится jQuery. Для этого в раздел <head> введем строку script/javascript с адресом URL библиотеки :

<head>
  <title>JQuery example</title>
  <script type="text/javascript" 
             src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
  </script>
</head>

Второй способ включения библиотеки в WEB-страницу связан с загрузкой на сервер последней версии библиотеки с сайта, посвященному jQuery (https://jquery.com/download/), после чего её можно включить в страницу :

<head>
  <title>JQuery example</title>
  <script type="text/javascript" 
             src="jquery-1.4.min.js"></script>
</head>

Библиотеку можно загрузить на страницу без скачивания на сервер. К примеру, на странице описания метода библиотеки animate приводится пример включения библиотеки jquery-1.12.4.js и библиотеки со вспомогательными пользовательскими функциями jquery-ui.js для выполнения цветовой анимации.

После описания загрузки библиотеки на страницу перейдем к включению операторов вызова функций jQuery.

Формат оператора 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.

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

Наименование	Описание	Пример
функция	jQuery, может быть заменена псевдонимом $
selector	используется для выборки элемента/ов на WEB-странице	jQuery('div') , $('div').filter('#id1')
action	выполнение какого-либо действия	hide(), text(...),css(), show()
parameters	определение параметров для выбранного действия	('Сокращенный текст') , ('font-style', 'italic')

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

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

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