jQuery для начинающих

Доброго времени суток, уважаемые читатели этого цикла статей или просто забредшие на огонек, надеюсь, и третья по счету часть вам пригодится. С момента написания второго урока произошли небольшие изменение у меня в работе: я стал больше уделять времени при создании сайтов библиотеке jQuery, отдавая предпочтение красоте и ненавязчивому JavaScript. Наряду с уроками я буду рассказывать вам об интересных примерах, с которыми мне приходится сталкиваться, надеюсь, что и вам они пригодятся и вы почерпнете из них много полезного.
Оперировать с наборами и выбирать нужные нам элементы, мы вроде немного научились, но нужно закрепить все на практике. По ходу уроков мы будем узнавать что-то новое и сразу находить этому практическое применение, с легкостью вы потом сможете внедрить это новое у себя на сайте.
А сейчас ближе к теме. Выбирать элементы и производить с ними элементарные действия подчас не все, что нужно нам, чтобы получить полный контроль над DOM (Document Object Element), над иерархической структурой страницы. Расширить наши возможности позволит реагировать на события, происходящие на странице, «навешивать» свои обработчики с применением jQuery.
Если вы программировали на JavaScript, то вам должно быть известно, как муторно добавлять события на определенные элементы. Приходится учитывать различия в поведении браузеров, потому как для IE законы консорциума, внедряющего стандарты, не писаны — он живет своей жизнью, отличной от остальных браузеров.
К примеру, для того, чтобы добавить событие в IE нам нужно воспользоваться функцией attachEvent(), в остальных браузерах используется addEventListener(). И это первая, но не самая большая головная боль. Но мы не будем вдаваться в подробности, ведь наш курс называется «jQuery для начинающих».
Разработчики jQuery пошли другим путем, отгородив тем самым программистов, использующих их детище от множества граблей, давая им возможность писать код, который отвечает не за кроссбраузерность, а за то, для чего он действительно нужен.
Итак, jQuery. Чем же порадует он нас тут.
- позволяет с легкостью устанавливать в каждом элементе несколько событий
- поддерживает единый метод установки обработчиков событий

От сухой теории, перейдем к практике, наглядно демонстрирующей возможности jQuery.
В jQuery обработчики событий устанавливаются командной bind()

Теперь при клике(событие onclick или просто click в jQuery) на первом абзаце на странице происходит его скрытие. Все до безумия просто и работает в любом браузере, а ведь нам не пришлось думать даже об IE — «Чудненько» — воскликните вы: обработчик события всего одной строкой.
Порой нам нужно, чтобы событие обработалось один раз, для этого нам не надо пользоваться командой bind и в функции ее обработки писать команду unbind, которая удаляет обработчик. Это можно сделать одной командой, которая так и называется one.

Теперь при клике на первом абзаце он уезжает и больше никогда не появится. Обработчик событий тоже при этом удаляется.
Но есть еще один метод, предлагаемый нам jQuery, это установка события непосредственно на определенное действие.

Теперь при клике на картинках, расположенных у нас на страницах, они будут медленно исчезать, а затем и вообще пропадут.
Эта команда выглядит в разы нагляднее. Список таковых можно продолжить.
.dblclick — возникает при двойном клике, хотя все это легко понимается из названия.
.focus — когда элемент получает фокус, ипользуется преимущественно с формами.
.keydown .keypress . keyup — возникают при нажатии кнопок клавиатуры.
.mousedown .mousemove .mouseout .mouseover .mouseup — исходят от мышки.

Есть в jQuery еще одна замечательная команда, которая пригодится вам много где: в раскрывающихся менюшках, в галереях и т.д. Называется она hover — многие, я думаю, знакомы уже с этим словом из CSS, позволяющее подсвечивать ссылки и делать выпадающие меню. Эта команда устанавливает обработчики событий mouseover и mouseout для элементов на странице. Они вызываются только тогда, когда указатель мыши входит и выходит за пределы области элемента. Посмотрим все на небольшом примере.

Мы устанавливаем на все ссылки, расположенные на странице, класс .hover, когда мы наводим на ссылку и устанавливаем класс .unhover, когда убираем указатель с этой ссылки. Это очень хорошо подойдет для динамичности меню: мы можем анимировать элементы.
Вот мы немного и разобрались с тем, как устанавливать на элементы или наборы элементов обработчики событий.
Напоследок, небольшой пример, демонстрирующий возможности jQuery, а именно создание выпадающего меню jQuery.
Ждите продолжения, следующий урок будет об AJAX.
А сейчас любимая жена зовет меня трапезничать и ей отказать я никак не могу