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