При описании структуры вызова функций библиотеки jQuery последним оператором было обозначено действие action с параметрами или без параметров. На страницах описания селектора и фильтра в качестве действия для выбранных элементов использовался метод css().

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

Листинг страницы


<body>
   <h3>Действия и обработчики событий jQuery</h3>

   <p id="first">Первое сообщение</p>
   <p id="second">Второе сообщение</p>

   <input type="button" id ="actionButton" value="Hide" />

   <script type="text/javascript">
      $(document).ready(function() {
         $('#actionButton').click(function() {
            $('p:#second').hide();
         });
      });
   </script>
</body>

В представленном примере скриптовый блок <script /> содержит функцию (document-ready), связанную с проверкой полной загрузки библиотеки jQuery и формированием объектной модели документа DOM. В теле функции вызывается метод кнопки click с параметром в виде функции, которая с помощью селектора jQuery выбирает «Второе сообщение» и скрывает его методом hide(). Интерфейс страницы представлен на следующем скриншоте.

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

Отображение скрытых элементов

Описанный выше jQuery-скрипт скрывает второе сообщение. Чтобы при повторном нажатии на кнопку показать ранее скрытое сообщение необходимо использовать метод show(). При этом, необходимо выполнить проверку состояния сообщения : видимое или невидимое. Для этого можно использовать метод .is() с фильтром (параметром) ':visible' : процесс скрытия и повторного отображения сообщения с использованием jQuery функции/действия .is(':visible') примет следующий вид :


$('#actionButton').click(function() {
   if ($('p:#second').is (':visible')) {
       $('p:#second').hide();
   } else {
       $('p:#second').show();
   }
)};

Представленный метод включает проверку видимости сообщения с использованием выражения if-else и jQuery функции/действия .is(). Если выбранный селектором элемент объектной модели документа DOM «видим», то будет выполнено действие hide(), которое «уберет» его из WEB-страницы, в противном случае будет выполнено действие show(), которое «вставит» его на страницу. Следует иметь в виду, что все действия выполняются браузером без обращения к серверу. Т.е. браузер выполняет определенные действия с элементами объектной модели документа DOM, созданной им согласно описанию WEB-страницы.

Функция toggle

Логика подобного поведения, когда выполняется переключение между двумя состояниями элемента, является весьма распространенной и называется toggle. В библиотеке jQuery имеется функция, которая позволяет контролировать свойство элемента 'visible' и переключать его состояния, т.е. выполнять действия hide()/show() в зависимости от «видимости»; данная функция имеет такое же наименование toggle. Если использовать toggle в нашем примере, то контент функции существенно упростится :


$('#actionButton').click(function() {
   $('p:#second').toggle();
)};

При каждом нажатии на кнопку выполняется интертирование видимости visible выбранного элемента.

Ссылка на вызванный элемент this

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


<script type="text/javascript">
   $(document).ready(function() {
      $('#actionButton').click(function() {
         // Показать/скрыть сообщение
         $('p:#second').toggle();

         // Определить надпись кнопки
         if ($('p:#second').is (':visible')) {
            $(this).val('Скрыть сообщение');
         } else {
            $(this).val('Показать сообщение');
         }
      });
   });
</script>

В представленной функции в качестве селектора используется ссылка this на элемент, вызвавший данное событие. Поскольку метод click привязан к кнопке, то селектор $(this) внутри функции-параметра (function) также будет указывать на кнопку. Осталось только методом val() определить соответствующий текст на кнопке.

Демонстрация

Ниже представлен блок <div />, в котором реализован описанный выше пример, включая функцию библиотеки jQuery. Нажатием на кнопку Вы можете скрыть/открыть второе сообщение.

Действие и обработчик событий jQuery

Первое сообщение

Второе сообщение

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

Описание библиотеки jQuery
Выбор элементов из объектной модели документа DOM
Фильтрация наборов и поиск элементов jQuery методами filter, find
CSS в сочетании с jQuery
Модификация WEB-страницы библиотекой jQuery
Базовая анимация библиотекой jQuery