Russian (Pусский) translation by Lina (you can also view the original English article)
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 для опробования в вашем следующем проекте; поиграйтесь с ними!