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. Пишемо плагіни анімації

    СТАТТІ ПО ТЕМІБІЛЬШЕ ВІД АВТОРА