20 Корисних методів jQuery

14

Від Автора: Отже, ви вже трошки пустували з jQuery, починаєте купувати майстерність, і вам це дійсно подобається! Ви готові підняти свої знання jQuery до другого рівня? Сьогодні я покажу двадцять функцій і властивостей, яких ви, ймовірно, до цього не бачили!

1. after() / before()

Іноді вам потрібно додати що-небудь в DOM, але у вас немає хороших зачіпок, за допомогою яких можна це зробити; append() або prepend() не дозволяють йти навпростець, а ви не хочете додавати зайвий елемент або id. Дві ці функції могли б стати тим, що потрібно. Вони дозволяють вам вставляти елементи в DOM прямо перед, або після вибраного елемента таким чином, що новий елемент міститься на той же рівень.

$(‘#child’).after($(‘

‘)).text(‘This becomes a sibling of #child’));
$(‘#child’).before($(‘

‘)).text(‘Same here, but this is go about #child’));

Також це можна зробити, якщо ви працюєте безпосередньо з тим елементом, який потрібно вставити; просто використовуйте функції insertAfter() або insertBefore.

$(‘

I\’ll be a sibling of #child

‘).insertAfter($(‘#child’));

2. change()

Метод change() – це оброблювач подій, прямо як click() або hover(). Подія change – для текстових областей, полів введення і вікон вибору, і воно спрацює, коли зміниться значення цільового елемента; зауважте, це не те ж саме, що обробники подій focusOut() або blur(), що запускаються, коли елемент втрачає фокус, незалежно від того, змінено його значення чи ні.

Подія change() бездоганно для валідації даних на стороні клієнта; це набагато краще, ніж blur(), тому що ви не будете заново виконувати перевірку полів, якщо користувач не змінить значення.

$(‘input[type=text]’).change(function () {
switch (this.id) {
/* some validation code here */
}
});

3. Context

Context – це параметр, і властивість у jQuery. При обробці елементів ви можете передати його у функцію jQuery як другий параметр. Цей параметр — контекст, зазвичай є елементом DOM, і він обмежує елементи, сопоставляющиеся вашому селектору, дочірніми елементами контексту. Можливо, ви трохи збиті з пантелику, тому подивіться ось цей приклад:

Hello World

Hello World

var hi1 = $(‘.hello’),
hi2 = $(‘.hello’, $(‘#wrap’).get(0));
console.group(‘hi1’);
console.log(«Number of elements in collection:», hi1.length);
console.log(«Context of the collection:», hi1.context);
console.groupEnd();
console.group(‘hi2’);
console.log(«Number of elements in collection:», hi2.length);
console.log(«Context of the collection:», hi2.context);
console.groupEnd();

20 Корисних методів jQuery

Отже, де це може бути корисним? Одна з таких ситуацій може виникати всередині функції обробника подій. Якщо вам необхідно отримати дочірній елемент всередині джерела події, ви можете передавати його властивість this в якості контексту:

$(‘ul#options li’).click(function () {
$(‘a’, this) . . .
});

4. data() / removeData()

Ви коли-небудь мали потребу зберігати додаткову інформацію про елемент? За допомогою методу data() можна легко це зробити. Щоб встановити значення, ви можете передати два параметра (ключ, значення) або всього один (об’єкт).

$(‘#wrap’).data(‘myKey’, ‘myValue’);
$(‘#container’).data({ myOtherKey : ‘myOtherValue’, year : 2010 });

Щоб отримати назад свої дані, просто викличте метод з ключем значення, яке вам потрібно.

$(‘#container’).data(‘myOtherKey’); //returns ‘myOtherValue’
$(‘#container’).data(‘year’); //returns 2010

Щоб отримати всі дані, які співвідносяться з елементом, викличте метод data() без параметрів; ви отримаєте об’єкт, що містить всі ключі і значення, які призначали цього елемента.

Якщо хочете видалити пару ключ/значення після того, як додали її елементу, просто викличте removeData(), передаючи належний ключ.

$(‘#container’).removeData(‘myOtherKey’);

5. queue() / dequeue()

Функції queue() і dequeue() стосуються анімації. Черга (queue) – це список анімації, виконуваної елемента; за замовчуванням чергу елемента називається ‘fx.’ Давайте розглянемо ситуацію:

HTML

  • Start Animating
  • Stop Animating
  • Add to Queue

JavaScript

$(‘#start’).click(animateBox);
$(‘#reset’).click(function() {
$(‘div’).queue(‘fx’, []);
});
$(‘#add’).click(function() {
$(‘div’).queue( function(){
$(this).animate({ height : ‘-=25’}, 2000);
$(this).dequeue();
});
});
function animateBox() {
$(‘div’).slideUp(2000)
.slideDown(2000)
.hide(2000)
.show(2000, animateBox);
}

Отже, ось що відбувається: у функції animateBox ми налаштовуємо чергу анімації; зверніть увагу, що остання запис знову звертається до функції, так що вона буде постійно повторювати чергу. Коли ми клацаємо li#start, викликається ця функція і черга починає працювати. Коли ми клацаємо li#reset, поточна анімація закінчується, і ми повинні зупинити анімацію div. Щоб зробити це на jQuery, черга з назвою ‘fx’ (пам’ятаєте, черга за замовчуванням) встановлюється в порожній масив; по суті, ми очищаємо чергу. А що відбувається, коли ми клацаємо li#add? Спочатку, ми викликаємо функцію queue() div е; властивість this, що використовується у функції, передається разом з нею в кінець черги; так як ми не вказували чергу як перший параметр, використовується стандартне назва ‘fx’. Усередині цієї функції ми анимируем div, а потім викликаємо dequeue() div е, з тим, щоб видалити цей крок з черги і продовжити обробку; таким чином, черга буде повторюватися, але ця функція вже не буде її частиною.

6. delay()

Перебуваючи в ланцюжку анімації, ви можете використовувати метод delay(), щоб припиняти анімацію на певний строк; час передається як параметр в мілісекундах.

$(‘div’).hide().delay(2000).show(); // div will stay hidden for 2 seconds before showing.

7. bind(), unbind(), live(), and die()

Чи знаєте ви, що коли додаєте оброблювач натискання елемента зразок цього. . .

$(‘#el’).click(function () { /*******/ });

. . . насправді ви просто використовуєте оболонку для методу bind()? Щоб використовувати сам метод bind(), ви можете передати тип події в якості першого параметра, а потім функцію в якості другого.

Якщо ви використовуєте багато подій, можете розподілити їх за категоріями за допомогою простору імен; просто поставте крапку після назви події та додайте свій простір імен.

$(‘#el’).bind(‘click’, function () { /*******/ });
$(‘#el’).bind(‘click.toolbarEvents’, function () { /*******/ }); // namespaced

Також ви можете призначити однакову функцію кільком подіям одночасно, розділяючи їх назви пробілами. Так, якщо б ви захотіли зробити ефект hover, то могли б почати таким чином:

$(‘#el’).bind(‘mouseover mouseout’, function () { /*******/ });

Також можливо передавати дані функції, шляхом додавання третього параметра (у другу позицію).

$(‘#el’).bind(‘click’, { status : ‘user-ready’ }, function () {
switch(event.data.status) {
/********/
}
});

Рано чи пізно виявиться, що ви вставляєте елемент в DOM допомогою обробника події; однак незабаром ви виявите, що обробники подій, які ви вже зробили за допомогою функції bind або її оболонок, не працюють для знову вставлених елементів. У таких випадках, вам доведеться використовувати метод live() (або представник); це дозволить додавати оброблювачі події у відповідні вставлені елементи.

$(‘.toggle’).live(function () {
/* code */
$(‘Enable Beta Features‘).appendTo($(‘#optionsPanel’));
/* more code */
});

Щоб видалити обробники подій, створені за допомогою bind(), використовуйте метод unbind(). Якщо ви не передасте йому ніяких параметрів, він видалить всі обробники; ви можете передати тип події, щоб видалити тільки обробники подій цього типу; щоб видалити події з конкретного простору імен, додайте простір імен або використовуйте його окремо. Якщо хочете просто видалити певну функцію, передайте відповідно її ім’я як другий параметр.

$(‘button’).unbind(); // removes all
$(‘button’).unbind(‘click’); // removes all clicks
$(‘button’).unbind(‘.toolbarEvents’); // removes all events from the toolbarEvents namespace
$(‘button’).unbind(‘click.toolbarEvents’); // removes all clicks from the toolbarEvents namespace
$(‘button’).unbind(‘click’, myFunction); // removes that one handler

Зауважте, що ви можете призначати/видаляти обробники подій у функціях переданих анонімно; ці методи працюють тільки з іменами функцій.

Якщо ви намагаєтеся вилучити обробник події зсередини функції, викликаної подією, просто передайте unbind (посилання на об’єкт-подія.

$(‘p’).bind(‘click’, function (event) {
$(‘p’).unbind(event);
} );

Ви не можете використовувати unbind() для обробників подій створених функцією live(); для цього використовується функція die(). У відсутність параметрів вона видаляє всі live-обробники подій з усієї сукупності елементів; також їй можна передати тип події, або тип події і ім’я функції обробника.

$(‘span’).die(); // removes all
$(‘span’).die(‘mouseover’); // removes all mouseovers
$(‘span’).die(‘mouseover’, fn); // remove that one handler

Тепер ви володієте потужністю і гнучкістю механізму подій jQuery!

Вам також слід вивчити метод delegate(), так як він може мати значні переваги в продуктивності перед методом live().

8. eq()

Якщо ви шукаєте певний елемент всередині набору елементів, ви можете передати його індекс метод eq() і отримати єдиний елемент jQuery. Передача негативного індексу означає відлік у зворотному напрямку з кінця набору.

var ps = $(‘p’);
console.log(ps.length); // logs 3;
ps.eq(1).addClass(’emphasis’); // just adds the class to the second item (index in zero-based)

Також ви можете використовувати :eq() у своїх селекторах; так що попередній приклад міг би виглядати ось так:

$(‘p:eq(1)’).addClass(’emphasis’);

9. get()

Отримуючи сукупність елементів, jQuery повертає їх як об’єкт jQuery, так що ви маєте доступ до всіх методів. Якщо ж вам потрібні просто «сирі» (raw) елементи DOM, можна використовувати метод get().

Ви можете задати індекс, щоб отримати єдиний елемент.

alert( $(‘p’) ); // [object Object] — the object jquery
alert( $(‘p’).get(1) ); // [object HTMLParagraphElement]

10. grep()

Якщо ви не знайомі з програмними оболонками (shells) Unix/Linux, то могли й не чути термін grep. У терміналі — це утиліта текстового пошуку; але тут, в jQuery, ми використовуємо її, щоб фільтрувати масив елементів. Це не метод колекцій jQuery; ви передаєте масив в якості першого параметра і функцію фільтрації як другий параметр. Функція фільтрації приймає два значення: елемент з масиву і його індекс. Вона повинна виконати свою роботу і повернути значення true або false. За замовчуванням, всі елементи, для яких було повернуто значення true, будуть потрапляти в результати фільтрації. Ви так само можете додати третій параметр, логічне вираз, щоб інвертувати результати та вибрати елементи, для яких функція фільтрації повернула false.

var nums = ‘1,2,3,4,5,6,7,8,9,10’.split(‘,’);
nums = $.grep(nums, function(num, index) {
// num = the current value for the item in the array
// index = the index of the item in the array
return num > 5; // returns a boolean
});
console.log(nums) // 6,7,8,9,10

11. Псевдоселекторы

Sizzle, движок CSS селекторів всередині jQuery, пропонує кілька псевдоселекторов для полегшення роботи з відбору потрібних елементів. Дивіться, це цікаво:

$(‘:animated’); // returns all elements currently animating
$(‘:contains(me)’); // returns all elements with the text ‘me’
$(‘:empty’); // returns all elements with no child or text nodes
$(‘:parent’); // returns all elements with child or text nodes
$(‘li:even’); // returns all even-index elements (in this case,

  • s)
    $(‘li:odd’); // can you guess?
    $(‘:header’); // returns all h1 — h6s.
    $(‘li:gt(4)’); // returns all elements with an (zero-based) index greater than the given number
    $(‘li:lt(4)’); // returns all element with an index less than the given number
    $(‘:only child’); // returns all . . . well, it should be obvious

    Звичайно, є й інші, але ці — унікальні.

    12. isArray() / isEmptyObject() / isFunction() / isPlainObject()

    Іноді вам потрібно переконатися, що параметр, переданий функції, був правильного типу; ці функції дозволяють легко це зробити. Перші три самі достатньою мірою себе пояснюють:

    $.isArray([1, 2, 3]); // повертає true
    $.isEmptyObject({}); // повертає true
    $.isFunction(function () { /****/ }); // повертає true

    Наступний приклад не настільки ясний; isPlainObject() повертає true, якщо переданий параметр був створений як об’єктна константа, або з допомогою new Object().

    function Person(name) {
    this.name = name
    return this;
    }
    $.isPlainObject({})); // повертає true
    $.isPlainObject(new Object()); // повертає true
    $.isPlainObject(new Person()); // повертає false

    13. makeArray()

    Коли ви створюєте колекцію елементів DOM за допомогою jQuery, ви отримуєте об’єкт jQuery; в деяких ситуаціях ви б вважали за краще, щоб це був масив або звичайні елементи DOM; функція makeArray() саме це і може зробити.

    var ps = $(‘p’);
    $.isArray(ps); //повертає false;
    ps = $.makeArray(ps);
    $.isArray(ps); // повертає true;

    14. map()

    Метод map() віддалено схожий на grep(). Як ви могли б припустити, що він приймає один параметр, функцію. Ця функція може мати два значення: індекс поточного елемента і сам елемент. Ось що відбувається: функція, яку ви передаєте, будуть виконуватися один раз для кожного елемента в колекції; і кожне значення, що повертається цією функцією, буде замінювати елемент колекції, який їй передається як аргумент.

    $(‘ul#nav li a’).map(function() {
    return $(this).attr(‘title’);
    }); // now the collection is the link titles
    // this could be the beginning of a tooltip plugin.

    15. parseJSON()

    Якщо ви користуєтеся $.post або $.get — і в інших ситуаціях при роботі з рядками JSON – ви знайдете корисної функцію parseJSON. Хоча звичайно краще, якщо ваша функція, що використовує вбудований в браузер парсер JSON, коли він є (що, очевидно, буде швидше).

    $.post(‘somePage.php’, function (data) {
    /*****/
    data = $.parseJSON(data);
    /*****/
    });

    16. proxy()

    Якщо у вас є функція — властивість об’єкта, і вона використовує інші властивості об’єкта, ви не можете викликати таку функцію зсередини інших функцій і отримувати правильні результати. Я знаю, що це збиває з пантелику, тому давайте розглянемо дотепний приклад:

    var person = {
    name : «Andrew»,
    meet : function () {
    alert(‘Hi! My name is ‘ + this.name);
    }
    };
    person.meet();
    $(‘#test’).click(person.meet);

    Сама по собі person.meet() буде виводити правильні дані; але коли вона викликається обробником події, вона буде видавати “Hi! My name is undefined.». Це відбудеться тому, що функція не викликається в правильному контексті. Щоб це виправити, можна використовувати функцію proxy():

    $(‘#test’).click($.proxy(person.meet, person));
    // we could also do $.proxy(person, «meet»)

    Перший параметр функції proxy – це метод, який потрібно запустити; другий – це контекст, в якому ми повинні його виконати. В іншому випадку, ми можемо першим параметром передати контекст, а ім’я методу як рядок – другим. Тепер ви виявите, що наша функція видає сигнали (alerts) правильно.

    17. replaceAll() / replaceWith()

    Якщо вам необхідно замінити одні елементи DOM на інші, то ось як це зробити. Ми можемо викликати replaceAll() на елементах колекцій або новостворених елементах, вказуючи селектор тих елементів, які ми хотіли б замінити. У цьому прикладі всі елементи класу error будуть замінені створеним нами span.

    $(‘The error has been corrected‘).replaceAll(‘.error’);

    Метод replaceWith() просто змінює селектори місцями; тобто спочатку ми шукаємо те, що хочемо замінити:

    $(‘.error’).replaceWith(‘The error has been corrected‘);

    Також ви можете передавати цим двом методам функції в якості аргументів, які будуть повертати елементи або рядка HTML.

    18. serialize() / serializeArray()

    Метод serialize() – те, що потрібно для кодування значень у формах рядок.

    HTML

    JavaScript

    console.log($(‘form’).serialize()); // logs : name=John+Doe&url=http%3A%2F%2Fwww.example.com

    Так само можна використовувати serializeArray(), щоб перетворювати значення у формах масив об’єктів замість рядка.

    console.log($(‘form’).serializeArray());
    // logs : [{ name : ‘name’, value : ‘John Doe’} , { name : ‘url’, value : ‘http://www.example.com’ } ]

    19. siblings()

    Можливо, ви можете здогадатися, що робить метод siblings(); він повертає колекцію елементів того ж рівня, що і кожен елемент вихідної колекції:

    . . .

    . . .

    . . .
    $(‘p’).siblings(); // returns

    ,

    20. wrap() / wrapAll() / wrapInner()

    Три цих функції полегшують обгортання одних елементів в інші. Перш за все, я згадаю, що всі три методи приймають один і той же параметр: або елемент (який може бути заданий HTML-рядком, CSS-селектором, об’єктом jQuery або елементом DOM), або функція, яка повертає елемент.

    Метод wrap() обгортає кожен елемент колекції в зазначений елемент:

    $(‘p’).wrap(‘

    ‘); // all paragraphs are now wrapped in a div.warning

    WrapAll() поверне в один елемент всі елементи колекції; це означає, що елементи колекції будуть переміщені в DOM на нове місце; вони будуть зібрані разом з першим елементом в колекції і далі будуть обгорнуті:

    HTML, до:

    . . .
    . . .
    . . .

    . . .
    . . .
    . . .

    JavaScript

    $(‘.moveMe’).wrapAll(document.createElement(‘div’));

    HTML, після:

    . . .

    . . .
    . . .
    . . .
    . . .

    . . .

    У висновку, функція wrapInner обгортає все вміст кожного елемента колекції зазначеним у пункті елементом:

    HTML, до:

    . . .
    . . .

    JavaScript:

    $(‘p’).wrapInner($(‘

    ‘));

    HTML, після:

    . . .
    . . .

    Висновок

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

    Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

    E-mail: [email protected]

    Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

    P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.