В новой версии jQuery – 1.3 появилась новая, полезная функия – live(). Это аналог функции bind(), но с одной интересной особенностью. Функия способна назначать обработчики событий динамически при создании новых элементов DOM. Такая необходимость часто возникает при использовании AJAX. К примеру, выполняем запрос на сервер, а результат, получаемый в HTML добавляем на страницу. Если добавленным элементам нужно назначить обработчик событий, то приходится писать код, который делает это непосредственно после добавления.

<< читать дальше >>

James Donaghue создал библиотеку Peppy для выборки элементов DOM, использую селекторы CSS3. Главные достоинства библиотеки это скорость и размер. При размере всего 10Кб, Peppy работает гораздо быстрее, чем соответствующие библиотеки всех основных фреймворков.

В доказательство своих слов, Джеймс приводит результаты сравнительных тестов, которые сравнивают скорость работы селекторов фреймворков Mootools, jQuery, YUI, Dojo, Prototype, Ext и Sizzle. Их можно посмотреть здесь.

Синтаксис селекторов ничем не отличается от синтаксиса jQuery (в том смысле, что и там и там используется знак доллара $):

var elems = $('dt');

Так что, если вы используете фреймворки только из-за удобных селекторов, то думаю Peppy будет им прекрасной заменой. Скачать скрипт можно на этой странице.

Я думаю большинство из нас привыкли к более продвинутому методу получения элементов DOM, чем простые document.getElementById() или document.getElementsByTagName(). В большинстве современных JavaScript фреймворков используются функции позволяющие получать коллекцию элементов по CSS селектору:

var elems = $('.list li a');

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

Однако, ничто не стоит на месте, и все меняется с приходом новых стандартов и новых браузеров. Так, в новом стандарте Selectors API имеются функции document.querySelector() и document.querySelectorAll(), способные делать выборку элементов по CSS. Реализация этих функций на уровне браузера даст возможность избавиться от необходимости добавлять вышеупомянутые скрипты во фреймворки, значительно увеличит производительность и ёмкость скриптов.

До сих пор обе эти функции были реализованы в Webkit и Internet Explorer 8 beta, но буквально на днях вышла новая версия Firefox 3.1 alpha, где одним из новшеств являются CSS селекторы.

Типичное применение:

var elem = document.querySelector('#myelem');
var elems = document.querySelectorAll('ul > li:not(".selected"):hover');

Дабы придать функциям более привычный вид, можно использовать следующий прием (об этом писал Dustin Diaz):

var $$ = function(q, b) {
  if (b) {
    return document.querySelector(q);
  } else {
    return document.querySelectorAll(q);
  }
};

Если в качестве второго параметра передаем true, то используется querySelector, возвращающий единственный элемент, если этот параметр не указан, то тогда используется querySelectorAll, который в свою очередь возвращает коллекцию элементов nodeList. Чтобы преобразовать полученный nodeList в массив, можно использовать функцию slice():

var nodes = [].slice.call($$('ul > li:not(".selected"):hover'), 0);

Последним из наиболее популярных браузеров, где пока не реализованы эти функции, это Opera, но и там не все так плохо, ибо работы над этим уже ведутся.

По большему счету функции jQuery работают над коллекцией элементов, получаемых при помощи метода $(). Исключением из этого правила являются функции “геттеры” (getters – трудно сказать как правильно перевести этот термин), которые возвращают результат только для первого элемента коллекции. Таковыми являются функции attr(), width(), html() и другие. Но иногда возникает необходимость получить некоторые значения для всех элементов коллекции. Именно с этой целью Аарон Брэндон создал плагин jQuery.batch, который расширяет функциональность jQuery добавляя новые методы, которые отличаются от аналогов лишь множественным числом в названии. Так, для функции attr() объявляется функция attrs(). Новые методы обрабатывают всю полученную коллекцию, возвращая массив результатов.

Полный список методов, добавляемых jQuery.batch:

• attrs
• styles
• widths
• heights
• vals
• texts
• htmls

Дополнительно к основным методам, jQuery.batch добавляет свой собственный метод – jQuery.fn.batch(), который принимает имя существующей функции из коллекции jQuery.fn вместе с дополнительными параметрами:

$('a').batch('attr', 'href');

Этот же результат можно получить при помощи следующего выражения:

$('a').attrs('href');

Домашняя страница плагина расположена по следующей ссылке: jQuery.batch

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

<< читать дальше >>