Понякога, за да започнете пътуване, за да научите нещо огромно и сложно, трябва да научите нещо малко и просто. JavaScript е огромен и сложен, но можете да влезете в него, като научите малки и прости неща. Ако сте уеб дизайнер, мисля, че има по-специално едно нещо, което можете да научите, което е изключително овластяващо.
Това е нещото, което искам да научите: Когато кликнете върху някой елемент, променете клас на някой елемент.
Свеждайки това до най-важното, представете си, че имаме бутон и div:
Click Me I'm an element Div може да има някои базови стилове и може да има някои стилове, когато има определен клас:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Проницателните CSS-трикстъри може да разпознаят това като възможност за отметка в квадратчето, но това не е това, върху което работим днес.
Искаме да прикачим „слушател на събития“ към бутона: малко код за „прослушване“, в нашия случай щракнете върху събития и когато това се случи, изпълнете още код.
Знаете ли как в CSS трябва да „избираме” елементи, за да ги стилизираме? Трябва да направим това и в JavaScript, за да прикачим нашия слушател на събития. Ще създадем „препратка“ към бутона като променлива по следния начин:
var button = document.querySelector("button");Сега, когато имаме препратка към бутона, ще прикачим слушателя на това събитие:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));И какво искаме да направим в случай на щракване? Добавете име на клас към нашия div! Но точно както се нуждаехме от препратка към бутона, за да правим нещата с него, ще се нуждаем и от препратка към div. Нека ги правим и двете едновременно, ето целият бит код:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Това е цялото нещо, което исках да ви покажа. С добавен CSS към този клас "yay", ние можем да избледняваме и изключваме div:
Вижте писалката Щракнете върху нещо / Промяна на класа от Крис Койер (@chriscoyier) на CodePen.
Защо това едно нещо?
Възможностите за проектиране са безкрайни, когато контролирате CSS и състоянието на който и да е елемент (какви имена на класове има). Скриването и разкриването на нещата е очевидната сила, но наистина може да бъде всичко.
Изравняване нагоре
Не забравяйте, че не сте ограничени до промяна на едно име на клас. Можете да промените няколко класа на един елемент или да промените класовете на множество елементи.
Разгледайте свойството classList повече. „Превключване“ не е единствената опция.
Подобно на HTML и CSS, JavaScript има различни нива на поддръжка от браузъра за нещата. Разгледайте поддръжката на браузъра за classList и добавете addEventListener. Добре ли сте с тези нива на подкрепа за вашия проект? Ако не, можете да разгледате polyfills или дори jQuery.
Използвахме събитието „щракване“, но има много други. Други събития на мишката, превъртане, клавиатура и др. Много стотици.
Методът, който използвахме за избор, беше document.querySelector. Това беше полезно, защото връща един елемент, с който да работим. Освен това селекторите, които му давате, са точно като CSS селектори. document.querySelector("#overlay .modal > h2");би бил легитимен подбор. Това обаче не е единственият метод за избор, има и други като getElementById, querySelectorAll, getElementsByClassName и др.
Ето пример за това къде избираме куп елементи за навигация и прикачваме манипулатор на кликване към всички тях наведнъж:
Вижте класовете за смяна на писалки за неща от Chris Coyier (@chriscoyier) на CodePen.
Ако JavaScript, който сме написали в нашия малък пример, не успее да се зареди по някаква причина, пак ще имаме бутон, който казва „Щракнете върху мен“. Но щракването не би направило много, нали? Може би бихме могли да вмъкнем този бутон с JavaScript, така че бутонът дори не е там, освен ако не знаем, че ще работи? Добра идея, а? ;)