20 Полезных методов jQuery

jquery методы

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

1. after() / before()

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

Также это можно сделать, если вы работаете непосредственно с тем элементом, который хотите вставить; просто используйте функции insertAfter() или insertBefore.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

2. change()

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

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

3. Context

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

jquery методы

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

4. data() / removeData()

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

Чтобы получить обратно свои данные, просто вызовите метод с ключом значения, которое вам нужно.

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

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

5. queue() / dequeue()

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

HTML

JavaScript

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

6. delay()

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

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

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

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

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

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

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

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

Чтобы удалить обработчики событий, созданные при помощи bind(), используйте метод unbind(). Если вы не передадите ему никаких параметров, он удалит все обработчики; вы можете передать тип события, чтобы удалить только обработчики событий этого типа; чтобы удалить события из конкретного пространства имен, добавьте пространство имен или используйте его отдельно. Если хотите просто удалить определенную функцию, передайте соответственно ее имя как второй параметр.

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

Если вы пытаетесь удалить обработчик события изнутри функции, вызванной событием, просто передайте unbind() ссылку на объект-событие.

Вы не можете использовать unbind() для обработчиков событий созданных функцией live(); для этого используется функция die(). В отсутствие параметров она удаляет все live-обработчики событий из всей совокупности элементов; также ей можно передать тип события, или тип события и имя функции обработчика.

Теперь вы владеете мощью и гибкостью механизма событий jQuery!

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

8. eq()

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

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

9. get()

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Вы можете задать индекс, чтобы получить единственный элемент.

10. grep()

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

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

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

Конечно, есть и другие, но эти — уникальные.

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 – вы найдете полезной функцию parseJSON. Хотя конечно лучше, если ваша функция использует встроенный в браузеры парсер JSON, когда он есть (что, очевидно, будет побыстрее).

16. proxy()

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

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

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

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, после:

Заключение

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

Автор: Andrew Burgess

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

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Сергей

    Спасибо. Помогло.
    Хороший обзор полезных вещей, о которых иногда не вспоминаешь, а некоторые просто пропустил.

  2. OlegBon

    Спасибо! Очень полезный список. Всё основное теперь всегда под рукой!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree