Як ми вже говорили, jQuery можна сприймати як бібліотеку "вибрати та зробити". Ми вже говорили про вибір, і тепер поговоримо про деякі дії. Пам'ятайте, що шаблон в основному виглядає так:
// Select something! $(".something") // Do something! .hide();Замість того, щоб працювати з більш теоретичними прикладами, ми переходимо прямо до чогось реального. Ми знайшли цю ручку Дрю Баронтіні і роздвоїли її.
Дивіться форму кредитної картки Pen від Chris Coyier (@chriscoyier) на CodePen
У нашому прикладі ми за умовчанням приховали форму кредитної картки. Потім ми створили посилання, за яким ви можете натиснути, щоб просунути форму кредитної картки вгору та вниз. Ми виберіть посилання, а потім зробити в slideToggle на формі. Виберіть і зробіть!
Ми ще мало говорили про події, але це величезна частина jQuery. Подія - це щось на зразок клацання миші, натискання клавіш, прокрутки тощо. Частина "зробити" у "вибрати та зробити" часто трапляється після події. Не хвилюйтеся, ми будемо багато говорити про події до того, як ця серія закінчиться. Наразі просто знайте, що on () - найкращий / стандартний спосіб прив’язки подій у jQuery. Прив'язка, що означає "слідкуйте за цією подією щодо цього елемента або набору елементів".
Основний план:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));У нашому прикладі посилання було буквально посиланням.
перемикання
Спосіб того, як хеш-посилання працюють за замовчуванням у будь-якому браузері, полягає у тому, що вікно прокручується до елемента з ідентифікатором, який відповідає цьому хеш-посиланню. Іноді це добре. Мені подобається, як це створює семантичний зв’язок між цим посиланням та цим елементом. Отже, без будь-якого JavaScript посилання, по суті, все ще має сенс (особливо, якщо ви вказали його як розумне).
Але іноді така поведінка стрибків хеш-посилань є обломкою. Ми можемо запобігти цьому в JavaScript за допомогою prevenDefault. Подобається це:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Ми поговоримо далі про це.
Звичайно, власна документація jQuery є фантастичним ресурсом для всіх аспектів jQuery (методи).
Я думаю, що саме базове розуміння цього «вибирай і роби» та подій справді відкриває світ розуміння в JavaScript. Я знаю, що це зробило для мене. В кінці цього скринкасту ми піднімаємо пік поточного дизайну CSS-хитрощів і бачимо, де JavaScript чітко використовується для реагування на деякі клікові події та зміни інтерфейсу користувача. Дуже дуже схожі речі на те, що ми робили в попередній демонстрації. Наприклад, встановлення активного класу для речей, які ви клацаєте, наприклад:
Дивіться Ручку d6f7161a5931397b4f24195a315d52f3 Кріса Койєра (@chriscoyier) на CodePen