Як же все-таки працює jQuery?
Ну для початку Вам знадобиться сам фреймворк, його ви зможете скачати з домашньої сторінки проекту, потім проинициализировать:
А основні моменти Вам допоможе зрозуміти наступна діаграма:
Як отримати елемент з допомогою jQuery?
Для того щоб розуміти як працює селектор Вам все-таки необхідні базові знання CSS, тому що саме від принципів CSS відштовхує селектор jQuery:
* $ ( "# Header") - отримання елемента з id = "header"
* $ ( "H3") - отримати все
елементи
* $ ( "Div # content .photo") - отримати всі елементи з класом = "photo" які знаходяться в елементі div з id = "content"
* $ ( "Ul li") - отримати все
- з списку
- розмітки. Для початку прив'яжемося до події click для елемента ".pane-list li"; коли користувач буде кликати по елементу списку, наша функція зробить пошук тега і зробить редирект на сторінку вказану в атрибуті href.
Ну а тепер трохи скомбініруем попередні приклади і створимо ряд складних панельок (на зразок як в Gmail організований inbox).
* Приховуємо всі елементи
після першого.
* Приховуємо всі елементи- після п'ятого
* Клік по- викликає метод slideToggle для наступного елемента
* Клік по - викликає метод slideUp для всіх
* Клік по - приховує елемент, і відображає , так само викликається метод slideDown для всіх- послепятого
* Клік по - приховує елемент, і відображає , так само викликається метод slideUp для всіх- після п'ятого
Імітація Backend'a Wordpress'a
* Додамо клас "alt" до кожного парному елементу
(Даний клас змінює колір фону елемента)
* Клік по ініціює появу повідомлення (alert), так само відбувається анімація фонового кольору і прозорості (backgroundColor і opacity) для
* Клік по - викликає анімацію фону у(Колір змінюється на жовтий і назад) і додає клас "spam"
* Клік по - викликає анімацію фону у - після п'ятого
Почнемо з простенького прикладу - слайд-панель, вона у нас буде рухатися вгору / вниз по кліку на посилання
Реалізуємо це в такий спосіб, при натисканні на посилання, у нас буде перемикатися її клас (між "active" і "btn-slide"), а панелька з id = "panel" буде висуватися / ховатися. (Клас "active" змінює позицію фонового зображення, див. CSS файл у вкладенні).
Цей приклад покаже як можна красиво і легко прибирати розчиняти елементи
Коли ми натискаємо по картинці
, буде знайдений батьківський елемент, і його прозорість буде повільно змінюватися від opacity = 1.0 до opacity = hide:
Тепер приклад складніше, але він допоможе Вам краще зрозуміти jQuery. Всього кілька рядків коду змусять квадрат рухатися, змінювати розмір і прозорість.
пов'язана анімація
Тепер приклад складніше, але він допоможе Вам краще зрозуміти jQuery. Всього кілька рядків коду змусять квадрат рухатися, змінювати розмір і прозорість.Line 0: коли прогрузити сторінка (DOM готовий до маніпуляцій)
Line 1: прив'язуємося до події click для елемента
Line 2: маніпулюємо елементом- зменшуємо його прозорість до 0.1, нарощуємо позицію left ще на 400px, зі швидкістю 1200 (milliseconds)
Line 3: потім повільно змінюємо наступні параметри: opacity = 0.4, top = 160px, height = 20, width = 20; швидкість анімації вказується другим параметром. "Slow", "normal", "fast" або в мілісекундах
Line 4: потім opacity = 1, left = 0, height = 100, width = 100, швидкість - "slow"
Line 5: потім top = 0, швидкість - "fast"
Line 6: потім slideUp (з дефолтной швидкістю анімації - "normal")
Line 7: потім slideDown, швидкість - "slow"
Line 8: повертаємо false для того щоб браузер не перейшов за посиланнямПриклад реалізації "гармошки".
Тепер приступимо до розбору польотів:
Першим рядком ми додаємо клас "active" першого елементавсередині
(Клас "active" відповідає за позиціонування фонового малюнка - іконки зі стрілочкою). У другій сходинці ми ховаємо все не першіелементи всередині
.
Коли відбувається клік по заголовку, для наступного в ньому елемента
буде застосований ефект slideToggle, потім для всіх інших елементів
буде застосований ефект slideUp. Наступні дію змінює клас заголовка на "active", потім шукаємо всі інші заголовки
і прибираємо у них клас "active"
Гармошка # 2
Цей приклад схожий з попереднім, лише відрізняється тим, що ми вказуємо відкриту за замовчуванням панельку.В CSS у нас зазначено для всіх елементів
display: none. Тепер нам необхідно відкрити третю панель. Для цього ми можемо написати наступне $ ( ". Accordion2 p"). Eq (2) .show (), де eq позначає рівність. Пам'ятайте, що індексування починається з нуля:
Анімація для події hover # 1
Даний приклад допоможе створити Вам дуже гарну анімацію для події hover
Коли Ви наводите мишкою на елемент меню (mouseover), відбувається пошук наступного елемента , і анімується його прозорість і розташування:
Анімація для події hover # 2
Даний приклад трохи складніша попереднього прикладу: для формування підказки використовується атрибут linktitleНасамперед додамо тег в кожен елемент . Коли відбудеться подія mouseover, ми візьмемо текст з атрибуту "thetitle" і збережемо його в змінної "hoverText", потім цей текст буде вставлений в тег :
Цей приклад демонструє як зробити клікабельним блок з текстом, а не тільки посилання
створимо список
- з класом class = "pane-list" і ми хочемо зробити елементи
- розмітки. Для початку прив'яжемося до події click для елемента ".pane-list li"; коли користувач буде кликати по елементу списку, наша функція зробить пошук тега і зробить редирект на сторінку вказану в атрибуті href.
* $ ( "Ul li: first") - отримати тільки перший елемент
