Обзор событий и эффектов jQuery | Статьи, новости, обзоры плагинов, тем club762.ru

В предыдущих статьях мы научились работе с селекторами; теперь Вы можете захватывать любые элементы, управлять их атрибутами, устанавливать CSS правила. Основываясь на представленных примерах, вы, безусловно, придумали что-то свое, что хотелось бы реализовать в собственной теме. Однако не будем спешить с этим, ведь мы до сих пор не знакомы с событиями и эффектами.

Работа с событиями в jQuery

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

Хэлперы, или вспомогательные функции (также известные как «shortcuts»), позволяют легко устанавливать события при щелчке или наведении на элемент. Также вы можете легко переключать события для достижения интересных эффектов. Ниже приведен список полезных хэлперов, которые мы будем использовать в WordPress:

.click(functionName)	jQuery(«.post») .click(function(){//code});	Связывает функцию с событием click, которые происходит при одиночном щелчке мыши.
.dbclick(functionName)	jQuery(«.post») .dbclick(function(){//code});	Связывает функцию с событием click, которое происходит при двойном щелчке мыши.
.hover(functionName1,functionName2)	jQuery(«.post») .hover(function(){//code});	Работает с событиями mouseenter/mouseleave. Привязывает к выбранным элементам две функции, которые вызываются при событиях mouseenter и mouseleave.
.toggle(functionName1, functionName2, functionName3, и т.д.)	jQuery(«.post») .toggle(function(){//code});	Работает с событием click. Привязывает к выбранным элементам несколько функций, каждая из которых вызывается при каждом новом щелчке мыши, т.е. происходит чередование вызываемых функций.
.mouseenter(functionName)	jQuery(«.post») .mouseenter(function(){//code});	Вызывает функцию, когда указатель мыши перемещается поверх выбранных элементов.
.mouseleave(functionName)	jQuery(«.post») .mouseleave(function(){//code});	Вызывает функцию, когда указатель мыши покидает выбранные элементы.
.keydown(functionName)	jQuery(«.post») .keydown(function(){//code});	Связывает функцию с событием keydown, которое происходит в том случае, когда выбранный элемент получил фокус и нажата кнопка клавиатуры.
.keyup(functionName)	jQuery(«.post») .keyup(function(){//code});	Связывает функцию с событием keyup, которое происходит в том случае, когда выбранный элемент получил фокус и кнопка клавиатуры была отпущена (естественно, до этого она должна быть нажата).

С событиями страница получает большую живость и динамичность. Давайте попробуем добавить эффект подсветки к пунктам сайдбара:

...
jQuery(".widget-area li ul li").hover(function(){
    jQuery(this).css("background", "#f60");
  },
  function(){
    jQuery(this).css("background", "none");
});
...

В результате, как только курсор мыши переместится на какой-либо из пунктов сайдбара, тот изменит свой бэкграунд на оранжевый.