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

	<ul>
		<li>Один</li>
		<li>Два</li>
	</ul>

	<button id="add">Добавить</div>

Код, который назначает обработчики:

$(function(){
	$('li').click(function(){
		alert($(this).html());
	});

	$('#add').click(function(){
		$('ul').append('<li>Новый элемент '+Math.ceil(Math.random()*1000)+'</li>');
	});
})

В итоге, при щелчке на элементах, которые были в списке с самого начала, будет показан alert с текстом элемента списка. Но новые элементы на щелчок реагировать не будут, так как созданы они уже после назначения обработчиков (Смотреть пример).

Исправляем это следующим образом:

$(function(){
	$('li').click(function(){
		alert($(this).html());
	});

	$('#add').click(function(){
		$('ul').append('<li>Новый элемент '+Math.ceil(Math.random()*1000)+'</li>');

		$('ul li:last').click(function(){
			alert($(this).html());
		});
	});
})

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

$(function(){
	$('li').live('click', function(){
		alert($(this).html());
	});

	$('#add').click(function(){
		$('ul').append('<li>Новый элемент '+Math.ceil(Math.random()*1000)+'</li>');
	});
})

Результат работы такого кода точно такой же, как в предыдущем варианте, но код получился гораздо понятнее и короче (Смотреть пример). Применив для назначения обработчика live(), я тем самым указал, что он должен быть назначен всем элементам <li> как статическим, так и созданным динамически.

Однако при использовании этой функции стоит учитывать её ограничения:

• пока ещё не все события поддерживаются
• применяться она может только по отношению к селекторам, её нельзя использовать с элементами

Помимо live(), существует и противоположная по назначению функция – die(). Она предназначена для удаления обработчика, назначенного функцией live().

Более подробную информацию можно найти здесь.

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

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

var elems = $('dt');

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

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.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 существуют две основные функции – $() и $$(), при помощи которых можно получать элементы по id, классу, тегу или css селектору. Функция $() является аналогом стандартной document.getElementById() и предназначена для получения элементов по их ID. При помощи второй функции – $$() можно получить ссылки на несколько объектов сразу, передав ей в качестве аргумента один или несколько CSS селекторов. Следующий пример показывает получение ссылок на все элементы с классом someClass и все изображения (тег <img>), а также получение элемента по ID:

// получение элемента по ID
var elem = $('myElement');

// получение элементов по классу
var elems = $$('.someClass');

// получение элементов по тегу
var elems = $$('img');

Функция $$() всегда возвращает массив элементов, следовательно к элементам этого массива можно обращаться при помощи индекса, например так: $$(’li’)[2]. В следующем примере, мы задаем для этой функции сразу три селектора. В результате функция вернет все ссылки, элемент с id=”menu” и элементы списка с классом “alt”:

var aElem = $$('a', '#menu', 'li.alt');

Обе вышеперечисленные функции производят поиск по всему документу. Однако, если нам нужно выбрать некоторые элементы внутри другого элемента, то нужно воспользоваться функциями $E() или $ES(), которые могут принимать второй аргумент – фильтр. Разница между ними лишь в том, что $E() возвращает один элемент, а $ES() – все, соответствующие селектору внутри указанного элемента:

// возвращает первую ссылку внутри элемента DOM с id = 'myElement'
$E('a', 'myElement');

// получение всех ссылок внутри $('myElement')
$ES('a','myElement');

Создание и добавление элементов в DOM.

Новые элементы создаются при помощи класса Element:

var myImg = new Element ( 'img' , { 'src' : 'aa.jpg', 'alt': 'Мое фото' }) ;

Первый аргумент это имя тега, а второй это список аргументов в виде объекта. В этом примере мы создали новый элемент <img>, с двумя атрибутами – src и alt. Помимо прочего, во второй аргумент можно передавать специальные атрибуты styles и events, для установки стилей и обработчиков событий для создаваемого элемента:

new Element('a', {
	'styles': {
		'display': 'block',
		'border': '1px solid black'
	},
	'events': {
		'click': function(){
			//aaa
		},
		'mousedown': function(){
			//aaa
		}
	},
	'class': 'myClassSuperClass',
	'href': 'http://mad4milk.net'
});

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

• injectBefore(element); – вставляет новый элемент перед элементом element.
• injectAfter(element); – вставляет новый элемент после элемента element.
• injectInside(element); – добавляет новый элемент в элемент element. Новый элемент будет последним в списке дочерних (эта функция аналог стандартной appendChild).
• injectTop(element); – добавляет новый элемент в элемент element. Новый элемент будет первым в списке дочерних.

В качестве примера, покажу создание элемента и добавление в документ с использованием injectBefore(), остальные функции работают похожим образом:

// создаем элемент
var myImg = new Element ( 'img' , { 'src' : 'aa.jpg', 'alt': 'Мое фото' }) ;

// добавляем его в документ перед элементом с id="main"
myImg.injectBefore($('main'));

В этом примере сначала создается изображение с двумя атрибутами – src и alt, а затем оно добавляется перед элементом с id=”main”.

Добавление обработчиков событий

В Mootools, обработчики событий, или вернее сказать “слушатели” (listeners), добавляются к элементам при помощи функции addEvent(), которая имеет следующий синтаксис:

element.addEvent(event, function);

Здесь element – элемент DOM, к которому нужно добавить обработчик, event – тип события без приставки ‘on’ (’click’, ‘load’), function – функция или указатель на функцию, которая должна выполняться при возникновении события. Пример:

$('myElement').addEvent('click', function() {alert('test');} );

// fTest - указатель на функцию
$('myElement').addEvent('click', fTest);

function fTest () {
	alert('test');
}

Поскольку addEvent использует слушатели событий, то к элементам можно добавлять одновременно несколько функций обработчиков. Особое внимание стоит уделить событию onload. Оно возникает при полной загрузке страницы, включая все изображения и флэшки. Это значит, что прежде, чем функция обработчик выполнится, пользователю прийдется ждать пока загрузится все изображения, хотя структура DOM уже полностью готова к работе, и если на сайте большое количество различной графики, то ожидание может затянуться надолго. Для исправления этой ситуации, в Mootools существует событие domready, которое вызывается сразу же после загрузки структуры документа:

window.addEvent('domready', function(){ ... });

Пример

В качестве примера создадим простой HTML документ с меню, выполненным в виде маркированного списка. Затем, получив ссылки на элементы меню, добавим к ним простой обработчик. Структура меню выглядит следующим образом:

<div id="accordion">
	<h3 class="toggler menusection">Меню</h3>
	<div class="element menusection">
		<ul>
			<li>Link 1</li>
			<li>Link 2</li>
			<li>Link 3</li>
			<li>Link 4</li>
		</ul>
	</div>
</div>

Код JavaScript:

window.addEvent('domready', function(){
	$ES('li','accordion').addEvent('click', newItem);
});

function newItem() {
	var el = new Element('li', {
			'events' : {'click' : newItem}
	});
	el.setHTML('Link');
	el.injectInside($E('ul','accordion'));
}

Вначале, мы добавляем обработчик к событию domready объекта window. Этот обработчик получает все элементы <li> внутри элемента с id=accordion и в свою очередь добавляет обработчик newItem к событию onclick. В результате, при щелчке на любом элементе маркированного списка, будет вызываться функция newItem(), которая создает новый элемент <li> и добавляет его в этот же список.

смотреть демоскачать