Афоризм
— Почему Вы не сделаете пластическую операцию?
— А толку! Фасад обновишь, а канализация все равно старая!
Фаина Раневская
Последние статьи

 • WebSocket
Описание и пример реализации WebSocket
 • jQuery ajax
Описание и примеры асинхронных ajax запросов
 • jQuery Deferred
Описание и примеры объектов jQuery.Deferred
 • Всплытие событий
Всплытие событий в структуре DOM, останов всплытия
 • Навигация jQuery
Создание анимированных навигационных панелей
 • Анимация jQuery
Описание и примеры анимации элементов DOM
 • Домашние финансы
Приложение учета домашних финансов
 • APK-файл Android
Создание apk-файла для android устройств, .dex файлы
 • платформа JaBricks
Платформа OSGi-приложения JaBricks
 • уроки JaBricks
Учебные примеры изучения платформы Jabricks
 • бандлы JaBricks
Бандлы приложения JaBricks
Поддержка проекта

Если Вам сайт понравился и помог, то будем признательны за Ваш «посильный» вклад в его поддержку и развитие
 • Yandex.Деньги
  410013796724260

 • Webmoney
  R335386147728
  Z369087728698

Библиотека jQuery

Библиотека 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.

  Рейтинг@Mail.ru