Шпаргалка по jQuery (частина 1)

Правильно писати код на jQuery означає писати код у безконфліктному режимі. З цього мабуть і почну писати свою шпаргалку по jQuery 🙂 Що за шпаргалка така? Я запланував серію дописів, у яких писатиму часто вживані функції і їх опис, а також важливі для розуміння цієї мови програмування речі зі свого досвіду (або запозичене з досвіду інших людей 🙂 ). Про себе я не можу сказати, що добре знаю jQuery. І цей факт також вплинув на написання цього допису. Бо моя мета – краще вивчити згаданий фреймворк. А методом обрав постійне повторення і практику.

Допис видався довгим, тому ось короткий зміст першої частини з посиланнями на них:
1. Правильний початок (як писати у безконфліктному режимі і інші ввідні речі).
2. Пошук у DOM з допомогою методів children(), find(), parent(), closest() та next().
3. Ланцюговий виклик (chaining) у jQuery.

1. Правильний початок (як писати у безконфліктному режимі і інші ввідні речі)

Ось у таку “обгортку” я додаю код на jQuery:

(function($) {
    //код тут
})(jQuery);

У безконфліктному режимі писати важливо, щоб не виникало конфліктів з іншими js-фреймворками, що можуть бути включені у код сторінки (наприклад разом із плагіном, якщо мова йде про тему для WP).

І одразу доповнення, що дозволятиме вставляти мій код у хедер документу (а я люблю додавати код саме туди):

(function($) {
    $(document).ready(function(){
        //код тут
    });
})(jQuery);

А чому не можна було одразу вставляти код у хедер, навіщо ці заморочки? Річ утім, що браузер “читає сторінку” (читай – “виконує код на сторінці”) послідовно, з верху до низу. Після того, як вся сторінка буде “прочитана” – буде завантажено DOM, з яким вже і працюватиме jQuery. DOM являє собою модель сторінки у вигляді об’єкту і тільки у цьому об’єкті мій код на jQuery маніпулюватиме елементами. А до того він просто їх не знає. Декларація $(document).ready гарантуватиме, що наша функція виконуватиметься саме після того, як буде готовий DOM.

Хоча надалі я не завжди буду писати код у повній “обгортці”, але пам’ятати про неї варто завжди!

Ще я буду вживати деякий “jQuery-жаргончик”, тому нижче напишу список таких слів і коротко що вони означають:
Метод –
Селектор –

2. Пошук у DOM з допомогою методів children(), find(), parent(), closest(), and next()

Припустимо у мене є ось такий список складний список:

    
list item 1
    
list item 2
    
list item 3
    
list item 4
    

        

             
list item children 1
             
list item children 2
        
    

Тепер, щоб вибрати елемент li з батьківського списку і, як приклад можливих операцій над вибраним елементом, додати до нього клас ‘custom’ я пишу так:

$(".parent-list").children("li").addClass("custom");

В результаті отримаємо таке:

    
list item 1
    
list item 2
    
list item 3
    
list item 4
    

        

             
list item children 1
             
list item children 2
        
    

Важливо пам’ятати, що метод children() дозволяє вибрати лише прямий дочірний елемент! Тобто мій кастомний клас НЕ буде додано до елементів списку ‘children-list’, бо вони не є прямими дочірними елементами до написаного у коді селектора.

Якщо потрібно звернутись до всіх дочірних елементів вибраного селектора, то потрібно скористатись методом find(). Цей метод шукатиме співпадіння із селектором дял всіх дочірніх елементів як завгодно великого рівня, а не лише серед прямих дочірних.

$(".parent-list").children("li").first().addClass("custom");

    
list item 1
    
list item 2
    
list item 3
    
list item 4
    

        

             
list item children 1
             
list item children 2
        
    

$(".parent-list").children("li").eq(2).addClass("custom");

    
list item 1
    
list item 2
    
list item 3
    
list item 4
    

        

             
list item children 1
             
list item children 2
        
    

На противагу методу children() для вибору батьківського елемента необхідно використовувати методи parent() або parents(). Різниця між ними у тому, що метод parent() “подорожує” лише на один рівень догори (тобто застосовується лише для прямого батьківського елемента). Іншими словами, цей метод працює так: “я йду лише на рівень вище і шукаю там”. Натомість метод parents() працює так: “я йду на всі рівні вище і знаходжу всі, що відповідають селектору”.
Ще може трапитись ситуація, що мені потрібен буде лише найближчий батьківський елемент, що відповідає селектору. При цьому таким елементом може виявитись той, з якого ми починаємо пошук. Для цього існує метод closest() і він працює так: “я йду на всі рівні вище, починаючи з елемента з якого починається пошук і зупиняюсь на першому, що відповідає селектору”.

Також ще є такі два методи: next() i prev(). Неважко здогадатись, що перший дозволяє вибрати наступний елемент, а другий – попередній.

3. Ланцюговий виклик (chaining) у jQuery.

Можливість ланцюгового виклику методів у jQuery, це, напевно, найкрутіша річ! Наприклад, якщо потрібно замінити для елемента один клас на інший, то замість того щоб писати ось так:

$("ul").removeClass("parent-list");
$("ul").addClass("other-class");

…правильніше було б писати ось так:

$("ul").removeClass("parent-list").addClass("other-class");

Методи виконуватимуться послідовно, наче хтось читає речення і поступово робить те, що у ньому написано.

Вище був приклад, коли елемент сам по собі не змінюється (не зникає або не відбувається перехід до іншого елемента) у процесі маніпуляцій над ним. Проте частіше я зустрічаюсь з випадками, коли починаю з одного елелмнта, а далі від нього здійснюю пошук дочірного, або переходжу вверх по DOM.. коротше, ви зрозуміли 🙂 У такому випадку ланцюговий виклик теж можна застосовувати, але треба слідкувати за логікою операції.
Ось так НЕ вірно:

$("ul").find(".custom").css("color","red").find(".children-list").css("color","green");

Ось так правильно:

$("ul").find(".custom").css("color","red").end().find(".children-list").css("color","green");

Таким чином метод end() поверне мене до селектора, що використовувався перед методом find() і від нього почне пошук нового елемента згідно заданого критерію.
А ще, буде правильно і навіть бажано писати так (це питання зрозумілості написаного):

$("ul")
    .find(".custom")
       .css("color","red")
    .end()
    .find(".children-list")
       .css("color","green");

Такий код буде валідний і виконуватиметься. А ще він значно значно зрозуміліший. 🙂

Ось така коротка частина перша шпаргалки по jQuery. Може є запитання чи я десь щось не вірно написав – сміливо вказуйте про це у коментарях! 😉