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

JQuery 1.4: 15 новых функций, которые вы должны знать

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

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

Вы можете скачать jQuery 1.4 прямо сейчас, здесь: http://code.jquery.com/jquery-1.4.js

1. Передача атрибутов в jQuery (...)

До 1.4, jQuery поддерживал добавление атрибутов в коллекцию элементов с помощью полезного метода attr, и они могут быть переданы как имя атрибута, так и значение, или объект, определяющий несколько атрибутов. JQuery 1.4 добавляет поддержку для передачи объекта атрибутов в качестве второго аргумента самой функции jQuery при создании элемента.

Предположим, вам нужно создать элемент привязки с несколькими атрибутами. С 1.4 это можно сделать так:

Возможно, вы заметили атрибут «text» - вам, вероятно, будет интересно, что он там делает, ведь для ссылок нет атрибута «text»! Ну, jQuery 1.4 использует свои собственные методы при передаче определенных атрибутов. Таким образом, атрибут «text», указанный выше, заставит jQuery вызвать метод «.text()», передав «Перейти к Google!». Как единственный аргумент.

Лучший пример этого в действии:

«id» добавляется как обычный атрибут, но свойства «css» и «click» запускают вызов каждого соответствующего метода. Вышеприведенный код перед выпуском 1.4 был бы написан следующим образом:

Подробнее о jQuery (...)

2. Все «until»!

Три новых метода были добавлены в арсенал обхода DOM в 1.4, «nextUntil», «prevUntil» и «parentsUntil». Каждый из этих методов будет обходить DOM в определенном направлении до тех пор, пока не будет получен пройденный селектор. Итак, скажем, у вас есть список фруктов:

Вы хотите выбрать все элементы после «Яблока», но вы хотите остановиться, как только достигнете «Клубника». Это можно сделать следующим образом:

Узнайте больше о: prevUntil, nextUntil, parentsUntil

3. Связывание нескольких обработчиков событий

Вместо того, чтобы объединять совокупность методов привязки событий, вы можете объединить их все в один и тот же вызов, например:

Это также работает с «.one()».

Подробнее о .bind (...)

4. Облегчение свойств

Вместо того, чтобы просто определять одну функцию ослабления для одной анимации, вы можете теперь определить другую функцию ослабления для каждого свойства, которое вы анимируете. JQuery включает в себя две функции ослабления, свинг (по умолчанию) и линейный. Если вы хотите использовать другие, вам необходимо скачать их отдельно!

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

Посмотрите этот код в действии!

Вы также можете определить функции ослабления для каждого объекта опций в качестве пар имя-значение свойства в объекте «specialEasing»:

Примечание редактора. Автор этой статьи Джеймс Падольси скромный. Эта новая особенность была его идеей!

Узнайте больше об ослаблении

5. Новые live события!

JQuery 1.4 добавляет поддержку для делегирования событий «submit», «change», «focus» и «blur». В jQuery мы используем метод «.live()» для делегирования событий. Это полезно, когда вам приходится регистрировать обработчики событий по многим элементам, и когда новые элементы могут быть добавлены с течением времени (использование «.live()» является менее дорогостоящим, чем повторное связывание).

Но будьте осторожны! Вы должны использовать имена событий, «focusin» и «focusout», если вы хотите делегировать события «focus» и «blur»!

6. Управление контекстом функции

JQuery 1.4 предоставляет новую функцию «proxy» в пространстве имен jQuery. Эта функция принимает два аргумента: «scope» и имя метода, или функцию, и предполагаемую область действия. Ключевое слово this в «JavaScript» может быть довольно сложным для понимания. Иногда вы не хотите, чтобы это был элемент, а наоборот объект, который вы ранее создали.

Например, здесь у нас есть объект «app», который имеет два свойства, метод «clickHandler» и объект конфигурации:

Метод clickHandler, при вызове «app.clickHandler()», будет иметь «app» в качестве своего контекста, что означает, что ключевое слово «this» позволит ему получить доступ к «app». Это работает хорошо, если мы просто вызовем:

Давайте попробуем привязать его как обработчик события:

Когда мы нажимаем ссылку, ничего не работает (alert не выводится). Это связано с тем, что jQuery (и наиболее разумные модели событий) по умолчанию задает контекст обработчика как целевого элемента, то есть элемент, который только что щелкнул, будет доступен через «this». Но мы не хотим этого, мы хотим, чтобы «this» был настроен на «app». В jQuery 1.4 это теперь очень просто сделать:

Теперь, когда нажимают на ссылку будет выведено окно с «Привет!»!

Функция proxy возвращает «завернутую» версию вашей функции, при этом «this» устанавливается на все, что вы укажете. Это полезно и в других контекстах, таких как передача обратных вызовов другим методам jQuery или плагинам.

Узнайте больше о jQuery.proxy

7. Задержка очереди анимации

Теперь вы можете добавить задержку в очереди анимации. Фактически, это работает в любой очереди, но наиболее распространенный вариант использования, вероятно, будет с очередью «fx». Это позволяет сделать паузу между анимациями без необходимости связываться с обратными вызовами и вызовами «setTimeout». Первый аргумент «.delay()» - это количество миллисекунд, на которое вы хотите задержать.

Если вы хотите отложить очередь, отличную от очереди по умолчанию «fx», вам необходимо передать имя очереди в качестве второго аргумента в «.delay()».

Подробнее о .delay (...)

8. Проверьте, не имеет ли элемент что-то

JQuery 1.4 позволяет легко проверить, есть ли элемент (или коллекция) «.has()» что-то. Это программный эквивалент селекторного фильтра jQuery, «:has()». Этот метод будет выбирать все элементы в текущей коллекции, которые содержат по крайней мере один элемент, который соответствует переданному селектору.

Этот код будет выбирать все элементы DIV, содержащие элементы UL. В этой ситуации вы, вероятно, просто используете фильтр селектора («:has()»), но этот метод по-прежнему полезен, когда вам необходимо программно отфильтровать коллекцию.

JQuery 1.4 также показывает функцию «contains» в пространстве имен jQuery. Это низкоуровневая функция, которая принимает два узла DOM. Она вернет логическое значение, указывающее, содержится ли второй элемент в первом элементе. Например.

Узнайте больше о: .has (...), jQuery.contains (...)

9. Разверните элементы!

Некоторое время у нас был метод «.wrap()». JQuery 1.4 добавляет метод «.unwrap()», который делает полную противоположность. Если мы предположим следующую структуру DOM:

Мы можем развернуть элемент абзаца следующим образом:

Результирующая структура DOM будет такой:

По сути, этот метод просто удаляет родительский элемент любого элемента.

Узнайте больше об .unwrap (...)

10. Удалить элементы без удаления данных.

Новый метод «.detach()» позволяет удалить элементы из DOM, подобно методу «.remove()». Основное отличие этого нового метода заключается в том, что он не уничтожает данные, хранящиеся jQuery в этом элементе. Сюда входят данные, добавленные через «.data()», и любые обработчики событий, добавленные через систему событий jQuery.

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

Подробнее о .detach (...)

11. Улучшения index(...)

JQuery 1.4 дает вам два новых способа использования метода «.index()». Раньше вы могли передавать только элемент в качестве своего аргумента, и вы ожидали, что число будет возвращено с указанием индекса этого элемента в текущей коллекции.

Передача без аргументов теперь возвращает индекс элемента среди его братьев и сестер. Итак, предполагая следующую структуру DOM:

Когда элемент списка кликается, вы хотите узнать индекс щелкнутого элемента среди всех остальных элементов списка. Теперь это просто:

JQuery 1.4 также позволяет вам указывать селектор в качестве первого аргумента в " .index()", это даст вам индекс текущего элемента среди коллекции, созданной этим селектором.

Вы должны отметить, что то, что возвращается из этого метода, является целым числом, и оно вернет -1, если переданный селектор/элемент не может быть найден в документе.

Подробнее об .index (...)

12. Методы манипулирования DOM принимают обратные вызовы

Большинство методов манипуляции DOM теперь поддерживают передачу функции в качестве единственного аргумента (или, во-вторых, в случае «.css()» & «.attr()»). Эта функция будет выполняться для каждого элемента коллекции, чтобы определить, что должно использоваться в качестве реального значения для этого метода.

Следующие методы имеют такую возможность:

В пределах функции обратного вызова у вас будет доступ к текущему элементу коллекции через «this» и его индекс в качестве первого аргумента.

Кроме того, с некоторыми из вышеперечисленных методов вы также получите второй аргумент. Если вы вызываете метод setter (например, «.html()» или «.attr('href)»), вы получите доступ к текущему значению. Например.

Как вы можете видеть, с помощью методов «.css()» и «.attr()» вы передадите эту функцию в качестве второго аргумента, так как первый будет использоваться для обозначения свойства, которое вы хотите изменить:

13. Определите тип объекта

JQuery 1.4 добавляет две новые вспомогательные функции (хранящиеся непосредственно под пространством имен jQuery), которые помогают вам определить, с каким типом объектов вы имеете дело.

Во-первых, существует «isEmptyObject», эта функция возвращает логическое значение, указывающее, является ли переданный объект пустым (лишен свойств - прямой и унаследованный). Во-вторых, есть «isPlainObject», который будет возвращать логическое значение, указывающее, является ли переданный объект простым объектом JavaScript, т. е. созданным с помощью «{}» или «new Object()».

Узнайте больше о: isPlainObject(...), isEmptyObject(...)

14. Улучшения closest(...)

Метод jcuery «.closest()» теперь принимает массив селекторов. Это полезно, когда вы хотите обойти предков элемента, ища (более одного) самые близкие элементы с определенными характеристиками.

Кроме того, теперь он принимает контекст как второй аргумент, а это означает, что вы можете контролировать, насколько далеко или как близко вы хотите пройти DOM. Оба этих усовершенствования подходят для редких случаев использования, но они используются внутренне для большого эффекта!

Подробнее о .closest (...)

15. Новые события! focusIn и focusOut

Как уже упоминалось, для делегирования событий «focus» и «blur» вы должны использовать эти новые события, называемые «focusin» и «focusout». Эти события позволяют вам действовать, когда элемент или потомок элемента получает фокус.

Следует также отметить, что оба эти события не распространяются («пузырь»); Они захватываются. Это означает, что внешний элемент (предок) будет запущен перед каузальным «целевым» элементом.

Подробнее о событиях focusIn и focusOut.

Наслаждайтесь jQuery 1.4, самой ожидаемой, самой многофункциональной и лучшей версией jQuery!

Ну, вот и все! Я пытался охватить изменения, которые, я думаю, окажут на вас влияние!

Если вы еще этого не сделали, вы должны проверить «14 дней jQuery», потрясающее онлайн-событие, посвященное выпуску jQuery 1.4, и четвертому дню рождения jQuery!

И не забудьте проверить новую документацию API!

Напишите Plus статью

Знаете ли вы, что вы можете заработать до $600 за написание учебника PLUS и/или скринкаста для нас? Мы ищем углубленные и хорошо написанные учебники по HTML, CSS, PHP и JavaScript. Если вы обладаете способностью, обратитесь к Джеффри на nettuts@tutsplus.com.

Обратите внимание, что фактическая компенсация будет зависеть от качества окончательного руководства и скринкаста.

Write a PLUS tutorial
  • Следуйте за нами в Twitter или подписаться на Nettuts + RSS Feed для лучших учебных пособий по веб-разработке в Интернете.
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.