Както вече говорихме, 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 от Chris Coyier (@chriscoyier) на CodePen