Как мы уже говорили, jQuery можно рассматривать как библиотеку «выберите и сделайте». Мы довольно много говорили о выборе, так что теперь давайте поговорим о некоторых действиях. Помните, что этот паттерн в основном выглядит так:
// Select something! $(".something") // Do something! .hide();Вместо того, чтобы работать с большим количеством теоретических примеров, мы сразу переходим к чему-то реальному. Мы нашли ручку Дрю Баронтини и разделили ее.
См. Форму кредитной карты Pen Криса Койера (@chriscoyier) на CodePen
В нашем примере мы по умолчанию скрыли форму кредитной карты. Затем мы создали ссылку, по которой можно было щелкнуть, чтобы сдвинуть вверх и вниз форму кредитной карты. Мы выберите ссылку, а затем сделать в slideToggle на форме. Выбирайте и делайте!
Мы еще не много говорили о событиях, но это огромная часть jQuery. Событие - это что-то вроде щелчка мышью, нажатия клавиш, прокрутки и т. Д. Часть «сделать» в слове «выбрать и сделать» часто происходит после события. Не волнуйтесь, мы еще много поговорим о событиях, прежде чем эта серия закончится. На данный момент просто знайте, что on () - лучший / стандартный способ привязки событий в jQuery. Bind, что означает «следить за этим событием в этом элементе или наборе элементов».
Базовый план:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));В нашем примере ссылка была буквально ссылкой.
переключать
По умолчанию в любом браузере хэш-ссылки работают так, что окно прокручивается вниз до элемента с идентификатором, соответствующим этой хэш-ссылке. Иногда это хорошо. Мне нравится, как он создает семантическую связь между этой ссылкой и этим элементом. Таким образом, без какого-либо JavaScript ссылка по-прежнему имеет смысл (особенно если вы называете ее чем-то умным).
Но иногда такое поведение при переходе по хэш-ссылкам вызывает неприятные ощущения. Мы можем предотвратить это в JavaScript, используя preventDefault. Так:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Мы еще поговорим об этом в ближайшее время.
Конечно, собственная документация jQuery - фантастический ресурс для всех «do» аспектов jQuery (методов).
Я думаю, что самое базовое понимание этого «выбора и действия» и событий действительно открывает мир понимания в JavaScript. Я знаю, что это помогло мне. В конце этого скринкаста мы рассмотрим текущий дизайн CSS-Tricks и увидим, где явно используется JavaScript для реакции на некоторые события щелчка и изменения пользовательского интерфейса. Очень похоже на то, что мы делали в предыдущем демо. Например, установка активного класса для вещей, которые вы нажимаете, например:
Смотрите Pen d6f7161a5931397b4f24195a315d52f3 Криса Койера (@chriscoyier) на CodePen