jQuery – це чудовий JavaScript Framework, який підкуповує своєю простотою в розумінні і зручністю у використанні. Але вивчення треба з чогось починати, і особисто моя думка – краще всього починати з наочних прикладів, і вони далі…
Матеріали даної статті включені в підручник «jQuery для початківців». Підручник розповсюджується безкоштовно, і супроводжується інтерактивними прикладами.
Як же все-таки працює jQuery?
Ну для початку Вам знадобиться сам фреймворк, його ви зможете завантажити з домашньої сторінки проекту, потім ініціалізувати:
А основні моменти Вам допоможе зрозуміти наступна діаграма:
Як отримати елемент з допомогою jQuery?
Для того щоб розуміти як працює селектор Вам все ж необхідні базові знання CSS, оскільки саме від принципів CSS відштовхується селектор jQuery:
- $(“#header”) – отримання елемент з id=”header”
- $(“h3”) – отримати всі
елементи
- $(“div#content .photo”) – отримати всі елементи з класом =”photo” які знаходяться в елементі div id=”content”
- $(“ul li”) – отримати всі
- елементи зі списку
- $(“ul li:first”) – отримати тільки перший елемент
- зі списку
Висувна панель
Почнемо з найпростішого прикладу – слайд-панель, вона у нас буде рухатися вгору/вниз по кліку на посилання (див. приклад)
Реалізуємо це наступним чином, по кліку на посилання, у нас буде перемикатися її клас (між “active” і “btn-slide”), а панелька з id=”panel” буде висуватися/ховатися. (клас “active” змінює позицію фонового зображення, див. CSS файл у вкладенні).
$(document).ready(function(){
$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(“slow”);
$(this).toggleClass(“active”);
});
});
Магічні зникнення
Цей приклад покаже як можна красиво і легко прибирати розчиняти елементи (див. приклад):
Коли ми клікаємо по картинці , буде знайдено батьківський елемент
і його прозорість буде повільно змінюватися від opacity= 1.0 до opacity=hide:
$(document).ready(function(){
$(“.pane .delete”).click(function(){
$(this).parents(“.pane”).animate({ opacity: “hide” }, “slow”);
});
});
Пов’язана анімація
Тепер приклад складніше, але він допоможе Вам краще зрозуміти 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 для того щоб браузер не перейшов за посиланням
$(document).ready(function(){
$(“.run”).click(function(){
$(“#box”).animate({opacity: “0.1”, left: “+=400”}, 1200)
.animate({opacity: “0.4”, top: “+=160”, height: “20”, width: “20”}, “slow”)
.animate({opacity: “1”, left: “0”, height: “100”, width: “100”}, “slow”)
.animate({top: “0”}, “fast”)
.slideUp()
.slideDown(“slow”)
return false;
});
});
Гармошка #1
Приклад реалізації “гармошки”. (див. приклад)
Тепер приступимо до розбору польотів:
Першою строчкою ми додаємо клас “active” першого елемента
всередині
(клас”active” відповідає за позиціонування фонового малюнка – іконки зі стрілочкою). У другому рядку ми ховаємо все не перші
елементи всередині
.
Коли відбувається клацання на заголовку
, для наступного в ньому елемента
буде застосований ефект slideToggle, потім для всіх інших елементів
буде застосований ефект slideUp. Наступні дія змінює клас заголовка “active”, потім шукаємо всі інші заголовки
і забираємо у них клас “active”
$(document).ready(function(){
$(“.accordion h3:first”).addClass(“active”);
$(“.accordion p:not(:first)”).hide();
$(“.accordion h3”).click(function(){
$(this).next(“p”).slideToggle(“slow”)
.siblings(“p:visible”).slideUp(“slow”);
$(this).toggleClass(“active”);
$(this).siblings(“h3”).removeClass(“active”);
});
});
Гармошка #2
Цей приклад схожий з попереднім, лише відрізняється тим, що ми вказуємо відкриту за замовчуванням панельку. (див. приклад)
В CSS у нас вказано для всіх елементів
display:none. Тепер нам необхідно відкрити третю панель. Для цього ми можемо написати наступне $(“.accordion2 p”).eq(2).show(), де eq означає рівність. Пам’ятайте, що індексація починається з нуля:
$(document).ready(function(){
$(“.accordion2 h3”).eq(2).addClass(“active”);
$(“.accordion2 p”).eq(2).show();
$(“.accordion2 h3”).click(function(){
$(this).next(“p”).slideToggle(“slow”)
.siblings(“p:visible”).slideUp(“slow”);
$(this).toggleClass(“active”);
$(this).siblings(“h3”).removeClass(“active”);
});
});
Анімація для події hover #1
Даний приклад допоможе створити Вам дуже красиву анімацію для події hover (сподіваюся, Ви знаєте що це?), (див. приклад):
Коли Ви наводите мишкою на елемент меню (mouseover), відбувається пошук наступного елемента , і анимируется його прозорість і розташування:
$(document).ready(function(){
$(“.menu a”).hover(function() {
$(this).next(“em”).animate({opacity: “show”, top: “-75”}, “slow”);
}, function() {
$(this).next(“em”).animate({opacity: “hide”, top: “-85”}, “fast”);
});
});
Анімація для події hover #2
Даний приклад трохи складніше попереднього прикладу: для формування підказки використовується атрибут linktitle (див. приклад)
Першим ділом додамо тег в кожен елемент . Коли відбудеться подія mouseover, ми візьмемо текст з атрибуту “thetitle” і збережемо його в змінній “hoverText”, потім цей текст буде вставлено в тег :
$(document).ready(function(){
$(“.menu2 a”).append(“<em></em>”);
$(“.menu2 a”).hover(function() {
$(this).find(“em”).animate({opacity: “show”, top: “-75”}, “slow”);
var hoverText = $(this).attr(“title”);
$(this).find(“em”).text(hoverText);
}, function() {
$(this).find(“em”).animate({opacity: “hide”, top: “-85”}, “fast”);
});
});
Клікабельні блоки
Цей приклад демонструє, як зробити кликабельним блок з текстом, а не тільки посилання (див. приклад):
Створимо список
- з класом class=”pane-list” і ми хочемо зробити елементи
- клікабельними. Для початку прикуємося до події click для елемента “.pane-list li”; коли користувач буде клікати по елементу списку, наша функція зробить пошук тега і зробить редирект на сторінку зазначену в атрибуті href.
$(document).ready(function(){
$(“.pane-list li”).click(function(){
window.location=$(this).find(“a”).attr(“href”); return false;
});
});Складаються панельки
Ну а тепер трохи комбінуємо попередні приклади і створимо ряд складаються панельок (на зразок як в Gmail організований inbox). (див. приклад)
- покриваємо всі елементи
після першого. - покриваємо всі елементи
- після п’ятого
- клік по
– викликає метод slideToggle для наступного елемента
- клік по – викликає метод slideUp для всіх
- клік по – приховує елемент, і відображає , так само викликається метод slideDown для всіх
- послепятого
- клік по – приховує елемент, і відображає , так само викликається метод slideUp для всіх
- після п’ятого
$(document).ready(function(){
//hide message_body after the first one
$(“.message_list .message_body:gt(0)”).hide();
//hide message li after the 5th
$(“.message_list li:gt(4)”).hide();
//toggle message_body
$(“.message_head”).click(function(){
$(this).next(“.message_body”).slideToggle(500)
return false;
});
//collapse all messages
$(“.collpase_all_message”).click(function(){
$(“.message_body”).slideUp(500)
return false;
});
//show all messages
$(“.show_all_message”).click(function(){
$(this).hide()
$(“.show_recent_only”).show()
$(“.message_list li:gt(4)”).slideDown()
return false;
});
//show recent messages only
$(“.show_recent_only”).click(function(){
$(this).hide()
$(“.show_all_message”).show()
$(“.message_list li:gt(4)”).slideUp()
return false;
});
});Імітація Backend’a wordpress’a
Я думаю багато хто з читачів стикалися з адмінської частиною wordpress’a, точніше з редагування коментарів. Спробуємо зробити щось подібне. Для анімації фонового кольору нам знадобитися відповідний плагін для jQuery. (див. приклад)
- додамо клас “alt” до кожного елементу парним
(даний клас змінює колір фону елемента) - клік по ініціює появу повідомлення (alert), так само відбувається анімація фонового кольору і прозорості (backgroundColor і opacity) для
- клік по – викликає анімацію фону у
(колір змінюється на жовтий і назад) і додає клас “spam” - клік по – викликає анімацію фону у
(колір змінюється на зелений і назад) і видаляє клас “spam” - клік по – викликає анімацію фону у
(колір змінюється на червоний), і змінює параметр opacity” на “hide”
//don’t forget to include the Color Animations plugin
$(document).ready(function(){
$(“.pane:even”).addClass(“alt”);
$(“.pane .btn-delete”).click(function(){
alert(“This comment will be deleted!”);
$(this).parents(“.pane”).animate({ backgroundColor: “#fbc7c7” }, “fast”)
.animate({ opacity: “hide” }, “slow”)
return false;
});
$(“.pane .btn-unapprove”).click(function(){
$(this).parents(“.pane”).animate({ backgroundColor: “#fff568” }, “fast”)
.animate({ backgroundColor: “#ffffff” }, “slow”)
.addClass(“spam”)
return false;
});
$(“.pane .btn-approve”).click(function(){
$(this).parents(“.pane”).animate({ backgroundColor: “#dafda5” }, “fast”)
.animate({ backgroundColor: “#ffffff” }, “slow”)
.removeClass(“spam”)
return false;
});
$(“.pane .btn-spam”).click(function(){
$(this).parents(“.pane”).animate({ backgroundColor: “#fbc7c7” }, “fast”)
.animate({ opacity: “hide” }, “slow”)
return false;
});
});Галерея зображень
Найпростіший приклад реалізації галереї, без перезавантаження сторінки. (див. приклад)
Для початку додамо тег в заголовкиПо кліку на зображення
виконуємо наступні дії:
- зберігаємо значення атрибута href у змінній “largePath”
- зберігаємо значення атрибута “title” змінної “largeAlt”
- замінюємо в елементі
значення атрибута “scr” і “alt” значеннями змінних “largePath” і “largeAlt”
- так само присвоюємо елементу “h2 em” значення “largeAlt”
$(document).ready(function(){
$(“h2”).append(“)
$(“.thumbs a”).click(function(){
var largePath = $(this).attr(“href”);
var largeAlt = $(this).attr(“title”);
$(“#largeImg”).attr({ src: largePath, alt: largeAlt });
$(“h2 em”).html” (” + largeAlt + “)”); return false;
});
});Стилизируем посилання
Більшість нормальних браузерів легко розуміють коли ми хочемо домогтися від них стилізації посилань для різного типу файлів, для цього можна використовувати наступне правило CSS: a[href $=’.pdf’] { … }. Але як зазвичай IE6 відрізняється розумом і кмітливістю, з цієї причини будемо ставити йому милиці використовуючи jQuery. (див. приклад)
Для початку додамо клас для кожного посилання, у відповідності з типом файлу.
Потім виберемо всі елементи які не містять посилання на “http://www.webdesignerwall.com” і не починаються на ” # ” “href”, потім додамо їм клас “external” і встановлюємо target= “_blank”.$(document).ready(function(){
$(“a[href$=pdf]”).addClass (pdf);
$(“a[href$=zip]”).addClass(“zip”);
$(“a[href$=psd]”).addClass(“psd”);
$(“a:not([href*=http://www.webdesignerwall.com])”).not(“[href^=#]”)
.addClass(“external”)
.attr({ target: “_blank” });
});Так само Ви можете подивитися усі приклади або завантажити jQuery tutorial for beginners.
Вільний переклад: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
Так само багато корисних посилань по jQuery знайдете на сторінці: http://blog.termit.name/jquery/
Може комусь стати в нагоді ще бібліотека для PHP: http://anton.shevchuk.name/php/php-library-for-jquery/Цикл статей
- покриваємо всі елементи
- jQuery для початківців
- jQuery для початківців. Частина 2. JavaScript Меню
- jQuery для початківців. Частина 3. AJAX
- jQuery для початківців. Частина 4. Селектори
- jQuery для початківців. Частина 5. Ефекти
- jQuery для початківців. Частина 6. Події
- jQuery для початківців. Частина 7. Пишемо плагіни
- jQuery для початківців. Частина 8. Розширюємо фільтри
- jQuery для початківців. Частина 9. Пишемо плагіни анімації
