События jQuery

jQuery спроектирован специально для обработки событий.

Функции событий jQuery

Методы обработки событий jQuery - это ядро функций jQuery.

Метод обработки событий - это метод, который вызывается при возникновении某些 событий в HTML. Термин, часто используемый, - событие «выхолакивает» (или «порождает»).

Обычно jQuery-код помещается в метод обработки событий в разделе <head>.

Пример

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>Это заголовок</h2>
<p>Это абзац.</p>
<p>Это еще один абзац.</p>
<button>Нажми меня</button>
</body>
</html>

Попробуйте это на практике

В вышеуказанном примере функция вызывается при нажатии на кнопку:

$("button").click(function() {  // some code... } )

Этот метод скрывает все элементы <p>.

$("p").hide();

Функции в отдельном файле

Если ваш сайт содержит множество страниц и вы хотите, чтобы ваши функции jQuery были легко обслуживаемыми, то поместите свои функции jQuery в отдельный файл .js.

Когда мы демонстрируем jQuery в учебнике, мы напрямую добавляем функции в раздел <head>. Однако, лучше всего поместить их в отдельный файл, как это (с помощью атрибута src для ссылки на файл):

Пример

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

Конфликт имен jQuery

jQuery использует символ $ в качестве краткого способа представления jQuery.

Функции некоторых других библиотек JavaScript (например, Prototype) также используют символ $.

jQuery использует метод noConflict() для решения этой проблемы.

var jq=jQuery.noConflict()，который поможет вам использовать свои собственные имена (например, jq) вместо символа $.

Попробуйте это на практике

Заключение

Поскольку jQuery особенно спроектирована для обработки событий HTML, если вы следите за следующим принципом, ваш код будет более подходящим и удобным для обслуживания:

  • Поместите все код jQuery в обработчик события
  • Поместите все обработчики событий в обработчик события готовности документа
  • Поместите код jQuery в отдельный файл .js
  • Если существует конфликт имен, переименуйте библиотеку jQuery

События jQuery

Ниже приведены несколько примеров методов событий jQuery:

Функции событий Связать функцию с
$(document).ready(function) Связать функцию с событием готовности документа (когда документ завершает загрузку)
$(selector).click(function) Инициировать или связать функцию с событием клика на выбранном элементе
$(selector).dblclick(function) Инициировать или связать функцию с событием двойного клика на выбранном элементе
$(selector).focus(function) Инициировать или связать функцию с событием фокусировки на выбранном элементе
$(selector).mouseover(function) Инициировать или связать функцию с событием наведения мыши на выбранном элементе

Для получения полной справки, пожалуйста, посетите наш Руководство по событиям jQuery。