20 полезных методов jQuery, которые вам стоит использовать

Что ж, вы уже поигрались с jQuery какое-то время, начали к ней привыкать, и вам она очень понравилась. Готовы повысить свой уровень знаний о jQuery? Сегодня я продемонстрирую вам двадцать функций и возможностей, о которых вы, вероятно, не были в курсе!

1 after() / before()

Иногда вы хотите вставить что-то в DOM (* Document Object Model – Объектная модель документа. Здесь и далее примеч. пер.), но у вас нет для этого никаких подходящих средств; методы append() и prepend() не сработают, и вы не хотите добавлять дополнительный элемент или id. Эти две функции тут и могут вам пригодиться. Они позволяют добавлять в DOM элементы сразу перед или после другого элемента, так что новый элемент становится сибсом предыдущего (* элементы имеют общего «родителя»).

$('#child').after($('<p />')).text('This becomes a sibling of #child'));
$('#child').before($('<p />')).text('Same here, but this is go about #child'));

Для осуществления этой операции вы также можете воспользоваться другим синтаксисом (вначале идет контент, который хотим вставить, затем – целевой элемент); просто воспользуйтесь функцией insertAfter() или insertBefore().

$('<p>I\'ll be a sibling of #child</p>').insertAfter($('#child'));

2 change()

Метод change() – это обработчик событий, как и click() или hover(). Событие change предназначено для полей с типом text, textarea и списков для выбора и сгенерируется при изменении значения целевого элемента; обратите внимание на отличие обработчика событий для него от обработчиков для focusOut и blur, которые генерируются при потере фокуса элементом независимо от того, изменено ли его значение или нет.

Событие change отлично подходит для выполнения проверки данных на стороне клиента; оно лучше подходит для нее, чем blur, поскольку вы не будете повторно проверять значения полей, если пользователь их не меняет.

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

3 Context

Контекст является и параметром, и свойством в jQuery. При отборе элементов вы можете передать второй параметр в функцию jQuery. Этот параметр, контекст, обычно будет элементом DOM, и за счет него количество возвращенных элементов ограничивается теми, что удовлетворяют требованиям селектора и являются дочерними элементами контекста. Подобное объяснение может немного сбить вас с толку, так что рассмотрите этот пример:

<p class="hello">Hello World</p>
<div id="wrap">
    <p class="hello">Hello World</p>
</div>

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();

Итак, где бы это могло вам пригодиться? Например, в обработчике событий. Если бы вы захотели получить элемент внутри элемента, для которого было сгенерировано событие, то могли бы передать 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() используются для работы с анимациями. Очередь – это список анимаций, которые необходимо выполнить для элемента; по умолчанию очередь для элемента называется 'fx.' Давайте подготовим сценарий (* описание конкретного набора последовательных взаимодействий между пользователем и системой для достижения некоторой цели (результата)):

HTML

<ul>
  <li id="start">Start Animating</li>
  <li id="reset">Stop Animating</li>
  <li id="add">Add to Queue</li>
</ul>
<div style="width:150px; height:150px; background:#ececec;"></div>

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; благодаря этому функция, которую мы передаем в него, добавляется в конец очереди; поскольку мы не указали название очереди в качестве первого параметра, то используется 'fx'. В этой функции мы анимируем элемент div и затем вызываем для него dequeue(), за счет чего эта функция удаляется из очереди и продолжается выполнение остальных анимаций для элемента, но уже без нее.

6 delay()

Когда вы задаете очередь анимаций, вы можете воспользоваться методом delay() для приостановки выполнения анимаций на определенную продолжительность времени; передавайте ее в качестве параметра в миллисекундах.

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

7 bind(), unbind(), live() и die()

Знаете ли вы, что когда вы добавляете для элемента обработчик для события click, например, так...

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

... вы в действительности используете обертку для метода bind() (* начиная с jQuery 1.7 считается устаревшим. Вместо него следует пользоваться .on())? Для того чтобы воспользоваться самим методом 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() (или delegate) (* начиная с jQuery 1.7 методы .live() и .delegate считаются устаревшими. Вместо них  следует пользоваться .on());

$('.toggle').live(function () {
    /* code */
    $('<span class="toggle">Enable Beta Features</span>').appendTo($('#optionsPanel'));
    /* more code */
});

Для отвязывания обработчиков событий, добавленных при помощи bind(), воспользуйтесь методом unbind() (* начиная с jQuery 1.7 считается устаревшим. Вместо него следует пользоваться .off()). Если вы не передаете никаких параметров, то будут удалены все обработчики; вы можете передать тип события для того, чтобы убрать только обработчики этого типа; для удаления обработчиков событий определенного пространства имен добавьте пространство имен или передавайте только его. Если вы хотите убрать только определенный обработчик, то передайте его имя в качестве второго параметра.

$('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() объект event.

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

Вы не можете использовать unbind() для отвязывания обработчиков, привязанных при помощи метода live; вместо него используйте die() (* начиная с jQuery 1.7 считается устаревшим. Вместо него следует пользоваться .off()). Без параметров этот метод уберет все обработчики, привязанные при помощи метода 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, за счет чего у вас имеется доступ ко всем его методам. Если вы хотите получить просто элементы DOM, то можете использовать метод get().

Вы можете задать индекс для получения только одного элемента.

alert( $('p') ); // [object Object] - the jquery object
alert( $('p').get(1) ); // [object HTMLParagraphElement]

10 grep()

Если вы не знакомы с командным языком Unix/Linix, вы, скорее всего, не слышали про термин под названием grep (* грепнуть – быстро просмотреть, подобно служебной программе grep в операционной системе UNIX). Если мы имеем дело с командной строкой, то этим термином обозначается утилита для поиска текста; однако в контексте jQuery grep – это метод для фильтрации массива элементов. Он не является методом для коллекции jQuery; вы передаете массив в качестве первого параметра и функцию для фильтрации – в качестве второго. Эта функция и сама принимает два параметра: элемент из массива и его индекс. Она должна выполнять свою работу и возвращать значение true или false. По умолчанию все элементы, для которых функция возвратила true, будут оставлены в массиве. Вы можете добавить третий параметр, логический (* в нем может содержаться 0 или 1), для изменения результата на противоположный и сохранения в массиве элементов, которые возвращают false.

Недавно Jeffrey Way опубликовал отличную краткую рекомендацию по использованию $.grep; ознакомьтесь с ней, чтобы понять, как его использовать!

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, программный механизм jQuery для работы с селекторами CSS, предоставляет довольно много псевдо-селекторов для облегчения отбора необходимых вам элементов. Ознакомьтесь с этими необычными:

$(':animated'); // returns all elements currently animating
$(':contains(me)'); // returns all elements with the text 'me'
$(':empty'); // returns all elements with no child nodes or text
$(':parent'); // returns all elements with child nodes or text
$('li:even'); // returns all even-index elements (in this case, <li>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]); // returns true
$.isEmptyObject({}); // returns true
$.isFunction(function () { /****/ }); // returns true

О предназначении последней не так просто догадаться; isPlainObject() возвратит true, если переданный параметр был создан как литерал (* литеральная (символьная) константа) объекта или при помощи new Object().

function Person(name) {
  this.name = name
	return this;
}
$.isPlainObject({})); // returns true
$.isPlainObject(new Object()); // returns true
$.isPlainObject(new Person()); // returns false

13 makeArray()

При создании коллекции элементов DOM при помощи jQuery вы получаете объект jQuery; в некоторых случаях вы можете предпочесть, чтобы результатом был массив или обычные элементы DOM; именно для этого и используется makeArray().

var ps = $('p');
$.isArray(ps); //returns false;
ps = $.makeArray(ps);
$.isArray(ps); // returns 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 (* JavaScript Object Notation – текстовый формат обмена данными, основанный на JavaScript) – вам окажется полезной функция 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 – метод, который нам необходимо выполнить; второй – контекст, в котором нам следует его вызывать. Альтернативный вариант: можем передать вначале контекст, а затем – название метода в виде строки. Теперь вы увидите, что функция выводит верное сообщение.

Предпочитаете короткий совет о $.proxy в форме видео?

17 replaceAll() / replaceWith()

Если вам захочется заменить элементы DOM другими, то вот вам инструкция. Мы можем вызвать replaceAll() для элементов, которые мы отобрали или создали, передавая в качестве параметра селектор для получения элементов, которые мы бы хотели заменить. В этом примере все элементы с классом error будут заменены на созданный нами span.

$('<span class="fixed">The error has been corrected</span>').replaceAll('.error');

Метод replaceWith() используется, чтобы поменять местами отобранные элементы; сначала необходимо получить элементы, которые вы хотите заменить:

$('.error').replaceWith('<span class="fixed">The error has been corrected</span>');

Также вы можете передавать этим двум методам  функции, которые возвратят элементы или строки HTML.

18 serialize() / serializeArray()

Метод serialize() – метод, который используют для кодирования значений формы в строку.

HTML

<form>
    <input type="text" name="name" value="John Doe" />
    <input type="text" name="url" value="https://www.example.com" />
</form>

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(); он возвратит набор сибсов для каких угодно элементов ваших оригинальных коллекций:

<div> . . . </div>
<p> . . . </p>
<span> . . . </span>

$('p').siblings(); // returns <div>, <span>

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

За счет этих трех функций облегчается обертывание элементов в другие элементы. Прежде всего я упомяну, что все три принимают один параметр: либо элемент (строка HTML, селектор CSS, объект jQuery или элемент DOM), либо функцию, которая возвращает элемент.
Метод wrap() оборачивает каждый элемент в коллекции в указанный элемент:

$('p').wrap('<div class="warning" />'); // all paragraphs are now wrapped in a div.warning

wrapAll() поместит все элементы коллекции в один элемент; это означает, что все элементы коллекции будут перемещены в новый узел DOM; они выстроятся на месте первого элемента коллекции и будут обернуты там:

HTML, до:

<p>
    <span> . . . </span>
    <span class="moveMe"> . . . </span>
    <span class="moveMe"> . . . </span>
</p>
<p>
    <span> . . . </span>
    <span class="moveMe"> . . . </span>
    <span class="moveMe"> . . . </span>
</p>

JavaScript

$('.moveMe').wrapAll(document.createElement('div'));

HTML, после:

<p>
    <span> . . . </span>
    <div>
        <span class="moveMe"> . . . </span>
        <span class="moveMe"> . . . </span>
        <span class="moveMe"> . . . </span>
        <span class="moveMe"> . . . </span>
    </div>
</p>
<p>
    <span> . . . </span>
</p>

Наконец, с помощью функции wrapInner мы можем обернуть все элементы внутри каждого элемента коллекции в указанный элемент:

HTML, до:

<p>
    <span> . . . </span>
    <span> . . . </span>
</p>

JavaScript:

$('p').wrapInner($('<div />'));

HTML, после:

<p>
    <div>
        <span> . . . </span>
        <span> . . . </span>
    </div>
</p>

Заключение

Что ж, теперь у вас имеется более 20 новых возможностей jQuery для опробования в вашем следующем проекте; поиграйтесь с ними!