JQuery Підручник

Оброблювачі подій- це функції, код яких виконується тільки після здійснення певних дій.

Приклади дій, після яких виконуються обробники:

  • Курсор миші наведено елемент;
  • Веб-сторінка або картинка повністю завантажена;
  • Змінено вміст поля форми;
  • HTML форма відправлена;
  • Натиснута клавіша на клавіатурі;

Загальний вид визначення обробників jQuery:

Обробники подій jQuery у дії

Код обробникаmouseoverбуде виконано, коли курсор миші буде наведено елемент.

Код обробникаmouseoutбуде виконано, коли курсор миші буде виведений із меж елемента.

Код обробникаclickбуде виконано після одинарного натискання миші на елементі.

Код обробникаdblclickбуде виконано після подвійного натискання миші на елементі.

Код обробникаfocus()буде виконано, коли елемент стане активним.

Код обробникаblur()буде виконано, коли елемент перестане бути активним.

Код обробникаchange()буде виконано при зміні вмісту елемента.

За допомогою jQuery Ви також можете викликати обробники подій прив'язані до елемента.

Наприклад:$('#test').blur()викликає обробник blur у елемента з id='test'.

Зверніть увагу:повний список всіх існуючих подій у jQuery з прикладами використання Ви знайдете в нашому довіднику jQuery.

Об'єкт event

Об'єкт eventмістить інформацію про подію, що відбулася.

Об'єкт event створюється для кожної події, що відбулася, але для того, щоб мати можливість звертатися до її властивостей і методів його необхідно явно передати вобробник події.

Після того, як об'єкт event був переданий обробнику події, Ви можете звертатися до його властивостей та методів.

У прикладі нижче за допомогою об'єкта event ми виводитимемо координати, на яких знаходився курсор миші під час того, як відбулася подія.

Зверніть увагу:повний список всіх існуючих властивостей та методів об'єкта event з прикладами використання Ви знайдете в нашому jQuery довіднику.

Управління обробниками подій

Метод jQueryone()дозволяє створювати обробники, які можуть бути викликані лише один раз.

Метод jQuerytoggle()дозволяє перемикатися між різними обробниками подій по клацанню миші.

Зверніть увагу:повний список всіх існуючих функцій для керування обробниками подій з прикладами використання Ви знайдете в нашому довіднику jQuery.

Зробіть самі

Завдання 1реалізуйте підпункти наведені нижче шляхом додавання на сторінку відповідного jQuery коду (для виконання деяких підпунктів необхідно звернутися до довідника):

  1. Після одинарного натискання на кнопку з id='but1' колір тексту абзацу з id='par1' повинен змінитись на зелений, а розмір його шрифту повинен дорівнювати 20px.
  2. При наведенні вказівника миші на посилання її колір має змінитися помаранчевий. При виведенні покажчика миші її межі оформлення має скинеться на стандартне.
  3. При виділенні тексту елемента колір тексту повинен змінитися на червоний, а розмір шрифту має дорівнювати 20px.
  4. При кожному натисканні кнопки з id=but2 оформлення абзацу з id=par2 має змінюватися таким чином:
  5. Текст має відображатися шрифтом Times New Roman червоного кольору;
  6. Текст має бути відображений шрифтомArial синього кольору;
  7. Текст повинен бути відображений жирним шрифтом Verdana, з рамкою завтовшки 1 піксель (використовуйте властивість font-weight:bold для того, щоб зробити текст жирним та властивість border-style для завдання товщини кордону).