Учене JQuery
Учене Jquery. прости събития
Обикновено ключ стил
За да илюстрира някои обработка събитие технология, представете си, че се нуждаем от една страница, показваща в три различни стилове, в зависимост от приноса на потребителите:
- нормален изглед
- текст затворен в тясна колона
- едър шрифт на цялата страница
На страницата, ние ще направим трите бутона, като кликнете върху които потребителят ще превключи на стила на показаната страница.
HTML-маркиране е много проста:
Добавете няколко CSS стилове и нашата страница ще изглежда така:
Така че нека да започнем с това, че функцията за превключване, за да добавите голям шрифт, за това ние трябва да се регистрират в съответната CSS стил:
Сега ние трябва да се прилага този клас към тялото. така че цялата страница шрифт ще се увеличи, тъй като ние знаем от предишните статии, вие трябва да напишете следното:
Сега, когато натиснете «Голям бутона», нашият код на програмата, както и на страницата ще се промени своя стил:
() Метод за свързване може да се нарече mnogkratno, и да се определят редица различни действия на същото събитие.
Настоящият метод не е най-елегантно решение на този проблем, а след това ние ще продължим да я подобрим.
Включването на другите бутони
Сега имаме работа «Голям» бутон, увеличаване на размера на шрифта на страницата, наляво възлага на съответните функции на други бутони. Това е много проста, ние използваме метода на свързване (). да се добави едно кликване събитие манипулатор на всеки бутон, премахване и добавяне на класове, както е необходимо. Новият кодекс ще бъде като този:
Той съчетава CSS-правило да стеснят групата
Сега, след натискане на бутона «Тесен колонна», този стил ще се прилага, и на страницата ще изглежда така:
Събитие манипулатор Контекст
Нашият ключ стил работи правилно, но не можем да информира потребителя относно която сега е натиснат бутон. Това ще бъде коригирано чрез добавяне на избрания клас. да натиснете бутона, и премахването на класа в две други бутони. Клас избран ще се различава удебелен шрифт на текста:
Можем да използваме този клас, както направихме преди, отнасящи се до всеки бутон от неговия номер, прилагане и премахване съответно клас, но този път ние използваме по-елегантен и masshatbiruemoe решение.
Когато srabayvaet манипулатор случай, тази дума връща DOM елемент, към който се прилага посоченото действие. По-рано казахме, че функцията за $ () е на разположение на всеки DOM-елемент като аргумент.
Ето защо, ако пишем $ (това) с манипулатор на събитие, ние създаваме обект Jquery, съответстваща на елемента, и може да взаимодейства с нея, както и ако биха го приели с CSS за избор.
Мисленето е така, можете да напишете:
Чрез поставянето на тази линия във всеки един от трите процесори, ще добавим класа при всяко натискане на бутона. За да премахнете клас избран. другите два бутона, ние използваме Jquery предимство имплицитно се справят списъка с елементи:
Тази линия udalayaet клас «» избраното за всички бутони, разположени вътре в стил превключвател. Така че, след като направите промени в нашия код, то ще изглежда така:
Ето, не забравяйте да се обърне внимание на факта, че, първо, ние премахнете избрания клас, а след това да го приложите към текущия бутон. Ако промените последните два реда в някои места, че няма да работи.
Сега потребителят може ясно да се види кой бутон е активна в момента:
И в заключение на днешната статия, ние извършва последното от нашия код оптимизация. Тъй като функцията на активен бутона подсветка abolyutno еднаква за всички три бутона, ние можем да комбинираме всички шест линии в една функция, както следва:
Ние проведохме оптимизация има три предимства:
- Възможност да определи манипулатор събитие три бутона едновременно от един разговор да се свърже ()
- Възможност да определи изпълнението на множество функции с свързват определен разговор ()
- JQuery възможност за добавяне и премахване на класовете в един ред.
В следващата статия, ние ще разгледаме оптимизиране dalneyschih JQuery код, добавя нови функции в примера, показан.