Как става така, че работи JQuery?
Ами за начало, което трябва рамка себе си, можете да го изтеглите от началната страница на проекта, а след това се инициализира:
Но основните моменти ще ви помогнат да разберете следната диаграма:
Как да получите елемента с JQuery?
За да се разбере как ви селектора всички необходими основни познания на CSS, защото а именно принципите на селектор CSS избутва JQuery:
* $ ( "# Header") - за получаване на елемент с идентификатор = "глава"
* $ ( "H3") - да получите всички
елементи
* $ ( "# Div съдържание .photo") - получавате всички елементи с клас = "снимка", които са в DIV елемент с идентификатор = "съдържание"
* $ ( "Ул Ли") - да получите всички
- от списъка
- кликване. За да започнете да Snap на събитието кликване за елемента ".pane-списък ли"; когато потребителят е да кликнете върху елемент в списъка, нашата функция ще търси таг и да направи пренасочване към страницата, посочена в HREF атрибут.
И сега малко ще комбинира предишните примери, и да се създаде редица нововъзникващи гнезда (като например как организираната пощенска кутия в Gmail).
* Скриване на всички елементи
след първата.
* Скриване на всички елементи- След петата
* Кликнете върху- метод slideToggle призовава за следващия елемент
* Кликнете върху - Той причинява метод slideUp за всички
* Кликнете върху - скрие предмети и дисплеи , наричан още метод slideDown за всички- poslepyatogo
* Кликнете върху - скрие предмети и дисплеи , наричан още метод slideUp за всички- След петата
Имитация Backend'a Wordpress'a
* Добавяне на клас "Alt", за всеки елемент chotnomu
(Този клас променя цвета на фона на елемент)
* Кликнете върху задейства алармата (сигнал), тъй като има анимацията на фоновия цвят и прозрачност (backgroundColor и непрозрачността) за
* Кликнете върху - Той е на заден план анимация(Цвят променено на жълто и обратно) и добавя клас "спам"
* Кликнете върху - Той е на заден план анимация - След петата
Да започнем с един прост пример - слайд панел, той ще трябва да се движи нагоре / надолу, като кликнете на линка по-
Ние го продават по този начин, като кликнете върху линка, ние ще се включи своя клас (между "активни" и "BTN пързалка"), и контакта с идентификатор = "панел" ще бъде номиниран / скриване. (Клас "активен" се променя позицията на фоновото изображение, вижте. Файлът на CSS в прикачения файл).
Този пример ще покажем как можете да приятно и лесно отстраняване на разтворени елементи
Когато кликнете върху снимката
, основен елемент е намерена, и нейната прозрачност ще се промени бавно от непрозрачност = 1,0 до непрозрачност = скрий:
Сега, един пример за малко по-сложно, но това ще ви помогне да разберете по-добре JQuery. Само на няколко реда код ще доведе до площада, за да се движат, оразмерите и прозрачност.
свързаната с анимация
Сега, един пример за малко по-сложно, но това ще ви помогне да разберете по-добре JQuery. Само на няколко реда код ще доведе до площада, за да се движат, оразмерите и прозрачност.Line 0: когато progruz страница (DOM готов да манипулация)
Ред 1: привързана към събитието кликване за елемента
Ред 2: манипулира елемент- намали прозрачността на 0.1, все още изграждане на позицията на левия 400px, при 1200 (милисекунди)
Линия 3: след това бавно се променя следните параметри: непрозрачност = 0.4, най- = 160px, височина = 20, ширина = 20; скорост анимация е посочено от втория параметър. "Бавно", "нормални", "бързи", или милисекунди
Линия 4: непрозрачност = 1 тогава лявата = 0, височина = 100, ширина = 100, скорост - "бавно"
Линия 5: след началото = 0, скоростта - "бърз"
Line 6: тогава slideUp (със скоростта на неизпълнение от страна на анимацията - "нормално")
Линия 7: тогава slideDown, скорост - "бавно"
Линия 8: върнете фалшива, така че браузърът не се предава чрез позоваванеЕдин пример за прилагането на "усукваща".
Сега ние се пристъпи към разбора:
Първият ред добавим класа на "активен" към първия елементв
(Клас на "активна" е отговорна за позиционирането на фоновото изображение - иконата със стрелка). Във втория ред всички ние не се скрие първатаелементи в рамките на
.
Когато едно кликване върху заглавието, за следващия елемент в нея
slideToggle ефект ще се приложи, след това за всички други елементи
slideUp ефект се прилага. Следваща действие променя заглавието клас на "активен", а след това се търсят всички други заглавия
и да ги премахнете от класа на "активен"
Акордеон # 2
Този пример е подобен на предишния, само различен с това, че ние уточни подразбиране отворен контакта.В CSS, сме обособили за всички елементи
дисплей: няма. Сега трябва да се отвори третото панел. За да направите това, ние можем да напиша следните $ ( ". Accordion2 р"). Уравнение (2) .show (), където екв обозначава равенство. Имайте предвид, че индексирането започва с нула:
Анимация събития навъртат # 1
Този пример ще ви помогне да се създаде една много хубава анимация за събитие навъртам
Когато задържите курсора на мишката върху елемента от менюто (на курсора на мишката), има търсене на следващия елемент , и анимиране на нейната прозрачност и място:
Анимация събития навъртат # 2
Този пример е малко по-сложно, отколкото предишния пример: съвети, използвани за формирането на linktitle атрибутПървата стъпка е да добавите маркер във всеки елемент . При възникване на събитие на курсора на мишката, ще предприемем текста на атрибут "thetitle" и го запишете в променливата "hoverText", след това текстът ще бъде поставена в тага :
Този пример показва как да се направи кликване текстовия блок, а не само на връзка
създадете списък
- с клас клас = "Панел-списък" и ние искаме да направим артикулите
- кликване. За да започнете да Snap на събитието кликване за елемента ".pane-списък ли"; когато потребителят е да кликнете върху елемент в списъка, нашата функция ще търси таг и да направи пренасочване към страницата, посочена в HREF атрибут.
* $ ( "Ул Ли: първо") - получава само първия елемент
