РуЛиб - онлайн библиотека > Никсон Робин > Интернет > Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 > страница 89
Читаем онлайн «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5» 89 cтраница
этот
элемент выглядеть потерявшим фокус, и оно является хорошим партнером для
события focus. Оба этих события могут использоваться для добавления обработчика к событию, или же они будут инициировать событие, если в круглых скобках
при вызове метода будут опущены все аргументы.
В примере 21.5 показаны четыре поля ввода, и первое из них благодаря вызову метода focus, применяемого к элементу с идентификатором first, сразу же
528
Глава 21. Введение в jQuery
получает фокус. Затем ко всем элементам input добавляются два обработчика.
Обработчик события focus устанавливает для этих элементов желтый фон, когда
они получают фокус, а обработчик события blur устанавливает для них светлосерый фон, когда фокус с них убирается (у них теряется).
Пример 21.5. Использование событий focus и blur
События: blur
Щелкните в пределах и за пределами этих полей
$('#first').focus()
$('input').focus(function() { $(this).css('background', '#ff0') } )
$('input') .blur(function() { $(this).css('background', '#aaa') } )
Между закрывающей скобкой метода и оператором-точкой, используемым для прикрепления к нему еще одного метода, разрешается включать пробельные символы (и после точки
тоже), что я и сделал в предыдущем примере, чтобы выровнять по правому краю имена
событий focus и blur, находящиеся друг под другом, чтобы все остальные части инструкций
также выстроились в столбец.
На рис. 21.4 показано, как с помощью этого кода любым полям ввода, у которых
когда-либо был фокус, придается светло-серый цвет фона. Если у одного из полей
в данный момент имеется фокус, цвет его фона становится желтым, а непосещенные
поля по-прежнему имеют белый цвет фона.
Рис. 21.4. Прикрепление к событиям blur и focus
Функции и свойства событий
529
Ключевое слово this
Этот пример также служит иллюстрацией применения ключевого слова this.
При вызове события объекту this передается элемент, в отношении которого это
событие было инициировано, и теперь этот объект может быть передан методу $
для обработки. Или же, поскольку он является стандартным объектом JavaScript
(а не объектом jQuery), он может быть использован в качестве такого объекта.
Поэтому, если хотите, можете заменить следующий код:
$(this).css('background', '#ff0')
вот этим кодом:
this.style.background = '#ff0'
События click и dblclick
Событие click ранее уже рассматривалось, но есть также событие, предназначенное
для обработки двойных щелчков. Чтобы воспользоваться любым из них, нужно
прикрепить метод события к селектору jQuery, а в качестве его аргумента поместить jQuery-метод, который будет запущен, когда это событие произойдет:
$('.myclass')
.click( function() { $(this).slideUp() })
$('.myclass').dblclick( function() { $(this).hide()
})
Здесь я решил использовать безымянные функции, но при желании вместо них
можно воспользоваться функциями с именами (но не забудьте, что предоставить
нужно только имя функции без круглых скобок, в противном случае она будет вызвана несвоевременно). Объекту this будет передано то, что и ожидалось, и он
станет доступен именованной функции:
$('.myclass').click(doslide)
function doslide()
{
$(this).slideUp()
}
Подробное описание методов slideUp и hide дается в разделе «Специальные
эффекты» данной главы. А сейчас просто попробуйте запустить код примера 21.6
и сделайте одинарный либо двойной щелчок на кнопках, чтобы посмотреть, как
одни из них исчезают с применением анимации (при использовании slideUp),
а другие просто исчезают (при использовании hide). Результат работы кода показан
на рис. 21.5.
Пример 21.6. Прикрепления к событиям click и dblclick
События: click & dblclick
530
Глава 21. Введение в jQuery
Сделайте на кнопках одинарный и двойной щелчок
Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4
Кнопка 5
$('.myclass').click( function() { $(this).slideUp() })
$('.myclass').dblclick( function() { $(this).hide() })
Рис. 21.5. На кнопке 3 был сделан одинарный щелчок, и она ускользнула вверх
Событие keypress
Периодически возникает потребность в более тщательном контроле работы пользователя на клавиатуре, в особенности при обработке сложных форм или написании игр. В таких случаях можно воспользоваться методом keypress, который может
быть прикреплен к любому элементу, воспринимающему клавиатурный ввод, например к полю ввода или даже самому документу.
В примере 21.7 метод прикреплен к документу, чтобы перехватывать все нажатия клавиш, и результат его запуска показан на рис. 21.6.
Пример 21.7. Перехват нажатия клавиш
События: keypress
531
Функции и свойства событий
Нажмите какие-нибудь клавиши
$(document).keypress(function(event)
{
key = String.fromCharCode(event.which)
if (key >= 'a' && key = 'A' && key = '0' && key
элемент выглядеть потерявшим фокус, и оно является хорошим партнером для
события focus. Оба этих события могут использоваться для добавления обработчика к событию, или же они будут инициировать событие, если в круглых скобках
при вызове метода будут опущены все аргументы.
В примере 21.5 показаны четыре поля ввода, и первое из них благодаря вызову метода focus, применяемого к элементу с идентификатором first, сразу же
528
Глава 21. Введение в jQuery
получает фокус. Затем ко всем элементам input добавляются два обработчика.
Обработчик события focus устанавливает для этих элементов желтый фон, когда
они получают фокус, а обработчик события blur устанавливает для них светлосерый фон, когда фокус с них убирается (у них теряется).
Пример 21.5. Использование событий focus и blur
События: blur
Щелкните в пределах и за пределами этих полей
$('#first').focus()
$('input').focus(function() { $(this).css('background', '#ff0') } )
$('input') .blur(function() { $(this).css('background', '#aaa') } )
Между закрывающей скобкой метода и оператором-точкой, используемым для прикрепления к нему еще одного метода, разрешается включать пробельные символы (и после точки
тоже), что я и сделал в предыдущем примере, чтобы выровнять по правому краю имена
событий focus и blur, находящиеся друг под другом, чтобы все остальные части инструкций
также выстроились в столбец.
На рис. 21.4 показано, как с помощью этого кода любым полям ввода, у которых
когда-либо был фокус, придается светло-серый цвет фона. Если у одного из полей
в данный момент имеется фокус, цвет его фона становится желтым, а непосещенные
поля по-прежнему имеют белый цвет фона.
Рис. 21.4. Прикрепление к событиям blur и focus
Функции и свойства событий
529
Ключевое слово this
Этот пример также служит иллюстрацией применения ключевого слова this.
При вызове события объекту this передается элемент, в отношении которого это
событие было инициировано, и теперь этот объект может быть передан методу $
для обработки. Или же, поскольку он является стандартным объектом JavaScript
(а не объектом jQuery), он может быть использован в качестве такого объекта.
Поэтому, если хотите, можете заменить следующий код:
$(this).css('background', '#ff0')
вот этим кодом:
this.style.background = '#ff0'
События click и dblclick
Событие click ранее уже рассматривалось, но есть также событие, предназначенное
для обработки двойных щелчков. Чтобы воспользоваться любым из них, нужно
прикрепить метод события к селектору jQuery, а в качестве его аргумента поместить jQuery-метод, который будет запущен, когда это событие произойдет:
$('.myclass')
.click( function() { $(this).slideUp() })
$('.myclass').dblclick( function() { $(this).hide()
})
Здесь я решил использовать безымянные функции, но при желании вместо них
можно воспользоваться функциями с именами (но не забудьте, что предоставить
нужно только имя функции без круглых скобок, в противном случае она будет вызвана несвоевременно). Объекту this будет передано то, что и ожидалось, и он
станет доступен именованной функции:
$('.myclass').click(doslide)
function doslide()
{
$(this).slideUp()
}
Подробное описание методов slideUp и hide дается в разделе «Специальные
эффекты» данной главы. А сейчас просто попробуйте запустить код примера 21.6
и сделайте одинарный либо двойной щелчок на кнопках, чтобы посмотреть, как
одни из них исчезают с применением анимации (при использовании slideUp),
а другие просто исчезают (при использовании hide). Результат работы кода показан
на рис. 21.5.
Пример 21.6. Прикрепления к событиям click и dblclick
События: click & dblclick
530
Глава 21. Введение в jQuery
Сделайте на кнопках одинарный и двойной щелчок
Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4
Кнопка 5
$('.myclass').click( function() { $(this).slideUp() })
$('.myclass').dblclick( function() { $(this).hide() })
Рис. 21.5. На кнопке 3 был сделан одинарный щелчок, и она ускользнула вверх
Событие keypress
Периодически возникает потребность в более тщательном контроле работы пользователя на клавиатуре, в особенности при обработке сложных форм или написании игр. В таких случаях можно воспользоваться методом keypress, который может
быть прикреплен к любому элементу, воспринимающему клавиатурный ввод, например к полю ввода или даже самому документу.
В примере 21.7 метод прикреплен к документу, чтобы перехватывать все нажатия клавиш, и результат его запуска показан на рис. 21.6.
Пример 21.7. Перехват нажатия клавиш
События: keypress
531
Функции и свойства событий
Нажмите какие-нибудь клавиши
$(document).keypress(function(event)
{
key = String.fromCharCode(event.which)
if (key >= 'a' && key = 'A' && key = '0' && key