Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Roundups
Code

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

by
Difficulty:IntermediateLength:LongLanguages:

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 элементы сразу перед или после другого элемента, так что новый элемент становится сибсом предыдущего (* элементы имеют общего «родителя»).

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


2 change()

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

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


3 Context

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

context example

Итак, где бы это могло вам пригодиться? Например, в обработчике событий. Если бы вы захотели получить элемент внутри элемента, для которого было сгенерировано событие, то могли бы передать this в качестве контекста:


4 data() / removeData()

Вы когда-нибудь хотели сохранить немного информации об элементе? Вы запросто можете это сделать при помощи метода data(). Чтобы установить значение, вы можете передать два параметра (ключ и значение) или только один (объект).

Для получения ваших данных обратно просто вызовите этот метод, передав в качестве параметра ключ необходимого вам значения.

Чтобы получить все данные, которые относятся к элементу, вызовите метод data() без каких-либо параметров; вы получите объект со всеми ключами и значениями, заданными вами для этого элемента.
Если вы хотите удалить пару ключ/значение после ее добавления к элементу, просто вызовите removeData(), передав необходимый ключ.


5 queue() / dequeue()

Функции queue() и dequeue() используются для работы с анимациями. Очередь – это список анимаций, которые необходимо выполнить для элемента; по умолчанию очередь для элемента называется 'fx.' Давайте подготовим сценарий (* описание конкретного набора последовательных взаимодействий между пользователем и системой для достижения некоторой цели (результата)):

HTML

JavaScript

Итак, вот что у нас тут происходит: в функции animateBox мы задаем очередь анимаций; обратите внимание, что последняя – повторный вызов этой функции (* рекурсия – способность подпрограммы или функции вызывать во время исполнения саму себя для выполнения итеративной операции), благодаря чему очередь будет непрерывно повторяться. При клике по li#start эта функция вызывается и начинается выполнение анимаций из очереди. При клике по li#reset текущая анимация завершается, и затем анимирование элемента div прекращается. При помощи jQuery мы задали значением очереди под названием 'fx' (помните, значение по умолчанию) пустой массив; по сути, мы опорожнили очередь. А что происходит при клике li#add? Сначала мы вызываем метод queue для элемента div; благодаря этому функция, которую мы передаем в него, добавляется в конец очереди; поскольку мы не указали название очереди в качестве первого параметра, то используется 'fx'. В этой функции мы анимируем элемент div и затем вызываем для него dequeue(), за счет чего эта функция удаляется из очереди и продолжается выполнение остальных анимаций для элемента, но уже без нее.


6 delay()

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


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

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

... вы в действительности используете обертку для метода bind() (* начиная с jQuery 1.7 считается устаревшим. Вместо него следует пользоваться .on())? Для того чтобы воспользоваться самим методом bind(), вы можете передать тип события в качестве первого параметра и затем в качестве второго – функцию.

Если вы используете множество событий, то можете разбить их на категории при помощи пространств имен; просто добавьте точку после имени события и ваше пространство имен.

Также вы можете задать один и тот же обработчик для множества событий за раз, разделив их пробелами. Таким образом, если вы хотите реализовать эффект hover (* при котором происходит какое-то действие при перемещении курсора над текстом или изображением), то могли бы начать с этого:

Также при желании можете передавать данные в функцию, добавляя третий параметр (во второй позиции).

Рано или поздно вы обнаружите, что добавляете элемент в DOM при помощи обработчика событий; однако, вы поймете, что созданные вами при помощи функции bind (или ее оберток) обработчики событий не работают для вставленных элементов. В подобных случаях вам будет необходимо использовать метод live() (или delegate) (* начиная с jQuery 1.7 методы .live() и .delegate считаются устаревшими. Вместо них  следует пользоваться .on());

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

Обратите внимание, что вы не можете привязывать/отвязывать анонимные обработчики (* функции без имени); удаление определенного обработчика возможно только для именованных функций.
Если вы пробуете отвязать обработчик для события изнутри функции, вызываемой при генерировании этого события, то просто передайте в unbind() объект event.

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

И теперь вы можете мастерски орудовать обработчиками в jQuery!

Также вам следует рассмотреть метод delegate(), поскольку он имеет преимущества по производительности по сравнению с live().


8 eq()

Если вам необходимо получить определенный элемент из набора элементов, то вы можете передать индекс элемента в метод eq() и получить единственный элемент jQuery. Передавайте отрицательный индекс для отсчета элементов с конца набора.

Также вы можете использовать :eq() в ваших селекторах; так что предыдущий пример можно было бы реализовать и так:


9 get()

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

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


10 grep()

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

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


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

Sizzle, программный механизм jQuery для работы с селекторами CSS, предоставляет довольно много псевдо-селекторов для облегчения отбора необходимых вам элементов. Ознакомьтесь с этими необычными:

Их, конечно же, больше, но эти – уникальны.


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

Иногда вам необходимо убедиться, что переданный в функцию параметр имел корректный тип; благодаря этим функциям это легко выполнить. Первые три вполне говорят сами за себя.

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


13 makeArray()

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


14 map()

Метод map() отдаленно похож на grep(). Как вы могли бы ожидать, он принимает один параметр – функцию. Эта функция может принимать два параметра: индекс текущего элемента и сам элемент. Вот что происходит при использовании этого метода: функция, которую вы передаете, будет выполнена единожды для каждого элемента коллекции; каким бы ни было возвращенное ею значение, оно заменяет элемент коллекции, для которого она была вызвана.


15 parseJSON()

Если вы используете $.post или $.get – а также в других ситуациях, где вы работаете со строками JSON (* JavaScript Object Notation – текстовый формат обмена данными, основанный на JavaScript) – вам окажется полезной функция parseJSON. Замечательно, что эта функция использует встроенный в браузер парсер (* синтаксический анализатор) JSON, если он в нем есть (который, естественно, будет работать быстрее).


16 proxy()

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

При самостоятельном вызове person.meet() будет выводить сообщение корректно; однако при вызове из обработчика событий будет выведено сообщение "Hi! My name is undefined." Так происходит, поскольку функция не была вызвана в правильном контексте. Чтобы это исправить, мы можем использовать функцию proxy():

Первый параметр функции proxy – метод, который нам необходимо выполнить; второй – контекст, в котором нам следует его вызывать. Альтернативный вариант: можем передать вначале контекст, а затем – название метода в виде строки. Теперь вы увидите, что функция выводит верное сообщение.

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


17 replaceAll() / replaceWith()

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

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

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


18 serialize() / serializeArray()

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

HTML

JavaScript

Вы можете использовать serializeArray() для того, чтобы превратить значения формы в массив объектов вместо строки:


19 siblings()

Вы, вероятно, можете догадаться, для чего служит метод siblings(); он возвратит набор сибсов для каких угодно элементов ваших оригинальных коллекций:


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

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

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

HTML, до:

JavaScript

HTML, после:

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

HTML, до:

JavaScript:

HTML, после:


Заключение

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.