✔jQuery 1.4: 15 новых возможностей - «Верстка»

14 января появился на свет jQuery 1.4. Этот релиз содержит множество новых возможностей и улучшений. В этой статье
рассматриваются те, которые вы, возможно, найдёте самыми полезными.

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

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

Допустим вам необходимо создать гиперссылку с несколькими атрибутами. Используя версию 1.4 это делается таким образом:

jQuery('скачать отдельно.</p>
<p>
Чтобы указать функцию анимации для каждого свойства, необходимо просто определить массив, первое значение каждого
элемента - это анимируемое свойство, а второе используемая функция:
</p>
[code]jQuery('#foo').animate({
left: 500,
top: [500, 'easeOutBounce']
, 2000);

Вы также можете использовать объект specialEasing, то есть такую запись:

jQuery('#foo').animate({
left: 500,
top: 500
, {
duration: 2000,
specialEasing: {
top: 'easeOutBounce'

);

5. Новые события для метода live.

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

Обратите внимание, что вам необходимо использовать имена 'focusin' и 'focusout' для использования событий
"focus" и "blur"!

jQuery('input').live('focusin', function(){
// do something with this
);

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

jQuery 1.4 предоставляет новую "proxy"-функцию в пространстве имён jQuery. Эта функция принимает два
аргумента: "область видимости" и имя метода. Давайте рассмотрим пример.

Ниже создаётся объект "app" с двумя свойствами: "clickHandler" и "config".

var app = {
config: {
clickMessage: 'Hi!'
,
clickHandler: function() {
alert(this.config.clickMessage);

;

У метода ".clickHandler()" контекст выполнения будет "app", это подразумевает что "this"
ссылается именно на него. Это работает, как и ожидается:

app.clickHandler(); // "Hi!"

Давайте попробуем прицепиться к событию:

jQuery('a').bind('click', app.clickHandler);

При нажатии на ссылку ничего не произойдёт. Потому что jQuery будет, по умолчанию, устанавливать для контекста
обработчика искомый элемент (в нашем случае ссылку), то есть this в этом примере - это гиперссылка. Но
мы этого не хотим! Мы хотим чтобы this в этом случае означал объект "app". В jQuery 1.4 этого
можно добиться очень просто:

jQuery('a').bind(
'click',
jQuery.proxy(app, 'clickHandler')
);

Теперь нажатие на ссылку приведёт к ожидаемому результату.

Функция proxy вернёт "обёрнутую" версию вашей функции, а также установит для "this"
указанный вами объект. Это полезно в таких случаях, когда вам необходимо передать функцию в качестве параметра
другому методу jQuery или в какой-либо плагин.

7. Пауза перед выполнением анимации.

Теперь вы можете добавить паузу перед выполнением обработки очереди событий анимации. Фактически это работает
с любой очередью событий, но наиболее востребована эта возможность именно при работе с анимацией, то есть с
очередью 'fx'. Это избавит вас с путаницей вызова setTimeout и передачей методов. Выглядит это так:

jQuery('#foo')
.slideDown() // анимация раз
.delay(200) // пауза
.fadeIn(); // анимация два

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

8. Функция .has()

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

jQuery('div').has('ul');

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

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

jQuery.contains(document.documentElement, document.body);
// Результат true - <body> находится внутри <html>

9. Unwrap!

Мы все знаем о методе .wrap(). В jQuery 1.4 появилась функция .unwrap(), которая действует
строго наоборот. К примеру нас есть такая структура:

<div>
<p>Foo</p>
</div>

Вызова такого кода:

jQuery('p').unwrap();

...вернёт нам следующую структуру:

<p>Foo</p>

Другими словами, метод удаляет родителя у любого элемента.

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

Новый метод .detach() позволит вам удалить элементы из документа, подобно тому как это делает метод
.remove(). Ключевая разница в том, что новый метод не удаляет информацию об этих элементов из jQuery.
Это подразумевает, что и данные добавленные методом .data(), и любой обработчик событий, добавленный
через систему событий jQuery, останутся активными.

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

var foo = jQuery('#foo');
// важный обработчик
foo.click(function(){
alert('Foo!');
);
foo.detach(); // удаляем объект из DOM
// … много кода
foo.appendTo('body'); // добавляем объект
foo.click(); // "Foo!"

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

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

Если методу не передавать аргументов, то он возвращает индекс элемента в коллекции, в которой он находится.
Например:

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
<li>Strawberry</li>
<li>Pear</li>
<li>Peach</li>
</ul>

При нажатии на элемент списка, появится сообщение с его индексом. Это делается так:

jQuery('li').click(function(){
alert( jQuery(this).index() );
);

jQuery 1.4 также позволяет вам указать селектор в качестве аргумента функции .index(), что позволит вам
узнать индекс в коллекции полученной в результате обработки селектора.

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

12. Методы управления DOM, принимающие в качестве аргументов функции.

Большинство методов управления моделью документа теперь могут принимать функцию в качестве аргумента. Эта функция
будет вызываться для каждого элемента в коллекции, которая определена с помощью искомого метода.

Такую возможность имеют следующие функции:

• after


• before


• append


• prepend


• addClass


• toggleClass


• removeClass


• wrap


• wrapAll


• wrapInner


• val


• text


• replaceWith


• css


• attr


• html

В этой функции, текущий элемент - это this, а его индекс передаётся аргументом.

jQuery('li').html(function(i){
return 'Индекс текущего элемента: ' + i;
);

Также, с некоторыми функциями вы можете воспользоваться вторым аргументом. Если вы вызываете, так называемый,
метод установки (например .html() или .attr('href')), вторым аргументом будет значение. Например:

jQuery('a').attr('href', function(i, currentHref){
return currentHref + '?foo=bar';
);

Как видите, методам .css() и .attr() можно передавать вторым аргументом функцию, а первым -
свойство, которое вы хотите изменить:

jQuery('li').css('color', function(i, currentCssColor){
return i % 2 ? 'red' : 'blue';
);

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

jQuery 1.4 содержит две новых вспомогательных функции, которые помогут вам определить тип целевого объекта.

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

jQuery.isEmptyObject({); // true
jQuery.isEmptyObject({foo:1); // false
jQuery.isPlainObject({); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

14. Улучшения метода closest(...)

Метод .closest() теперь может принимать в качестве параметра массив селекторов. Это очень
полезно когда вы хотите выбрать более одного элемента с конкретными характеристиками.

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

15. Новые события 'focusin' и 'focusout'

Эти события вы должны использовать при работе с focus и blur. Эти события позволят вам выполнять
какие-нибудь действия когда элемент получает или теряет фокус.

jQuery('form')
.focusin(function(){
jQuery(this).addClass('focused');
);
.focusout(function(){
jQuery(this).removeClass('focused');
);

Обратите внимание, что оба этих события не передаются дальше (эффект bubble). Это означает, что элемент ниже
не получит это событие.