jQuery 1.4: 15 новых возможностей

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

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

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

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

jQuery('<a/>', { id: 'foo', href: 'http://google.com', title: 'Become a Googler', rel: 'external', text: 'Go to Google!' });

Вы, наверное, заметили атрибут text и, возможно, удивились, что он здесь делает, ведь у ссылок нет такого атрибута! Дело в том, что jQuery 1.4 использует свои собственные методы для их обработки. Таким образом, встретив атрибут text, jQuery вызывает функцию .text() и передаёт значение "Go to Google!".

Ещё один замечательный пример:

jQuery('<div/>', { id: 'foo', css: { fontWeight: 700, color: 'green' }, click: function(){ alert('Foo has been clicked!'); } });

Атрибут id обрабатывается как обычный атрибут, а css и click как вызовы соответствующих методов. В предыдущих версиях jQuery вы бы написали так:

jQuery('<div/>') .attr('id', 'foo') .css({ fontWeight: 700, color: 'green' }) .click(function(){ alert('Foo has been clicked!'); });

2. "until" ко всему!

В арсенал обхода DOM появилось три новых метода: "nextUntil", "prevUntil" и "parentsUntil". Каждый из этих методов будет обходить DOM в заданном направлении пока не будет выполнено условие переданного селектора. Итак, допустим у вас есть список фруктов:

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

Вам необходимо выбрать все элементы после "Apple" и остановиться на "Strawberry". Это выглядит очень просто:

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');

3. Мультибиндинг обработчиков событий

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

jQuery('#foo).bind({ click: function() { // что-то делаем }, mouseover: function() { // что-то делаем }, mouseout: function() { // что-то делаем } })

Это работает и с методом ".one()".

4. Новое в анимации

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

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

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). Это означает, что элемент ниже не получит это событие.