Афоризм
Гляжу, Вы лирик с матерным уклоном.
Наталья Резник
Последние статьи

 • Библиотека jQuery
Описание библиотеки jQuery, подключение jquery.min.js
 • Селектор jQuery
Описание селектора jQuery, выбор элементов DOM
 • Фильтрация выборки
Фильтрация наборов jQuery и поиск элементов : filter, find
 • CSS и jQuery
Управления стилями методами css, addClass, removeClass
 • Советы программистам
instanceOf, valueOf vs new, generic, поддержка ПО
 • Советы программистам
Валидация даты, конкатенация строк
 • Домашние финансы
Приложение учета домашних финансов
 • Сохранение значений
Сохранение и восстановление значений компонентов
 • APK-файл Android
Создание apk-файла для android устройств, .dex файлы
 • Загрузка драйвера
Динамическая загрузка JDBC-драйвера
 • платформа JaBricks
Платформа OSGi-приложения JaBricks
 • уроки JaBricks
Учебные примеры изучения платформы Jabricks
 • бандлы JaBricks
Бандлы приложения JaBricks
Поддержка проекта

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

 • Webmoney
  R335386147728
  Z369087728698

Библиотека jQuery

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

После описания загрузки библиотеки на страницу перейдем к включению операторов вызова функций 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.

Связанные страницы

Выбор элементов из объектной модели документа DOM
Фильтрация наборов и поиск элементов jQuery методами filter, find
Загрузка скриптов из внешнего файла
CSS в сочетании с jQuery
  Рейтинг@Mail.ru