Существует множество возможностей jQuery, лежащих на поверхности, но и немало методов, которые надо раскрыть, о которых, возможно, вы не слышали раньше. В этой статье речь пойдет о таких не совсем очевидных особенностях jQuery.

 

1. Функция jQuery()

Что происходит, когда вы вызываете функцию jQuery()? Сама по себе эта функция довольно проста:

jQuery = function (selector, context) {
	return new jQuery.fn.init(selector, context);
};

Функция-обертка возвращает объект jQuery, экземпляр класса jQuery.fn.init. Таким образом, каждый раз, вызывая jQuery(), мы создаем уникальный объект с набором свойств. В зависимости от параметров selector и context функция возвращает набор данных, найденных в документе, создает новый элемент или вызывает функцию по событию DomReady. Возвращаемый объект может быть представлен как массив, каждый элемент в котором имеет индекс.

jQuery('div.foo');

jQuery(myForm.elements);

jQuery('<input id="my_input" class="red">');

jQuery(function($) {
  // ваш код
});

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

jQuery 1.4 позволяет создавать новые элементы еще быстрее:

var $myLink = jQuery('<a>', {
	id: 'myLinkElement',
	href: '#',
	css: {
		color: 'black',
		backgroundColor: '#ccc'
	},
	click: function() {
		jQuery(this).css('backgroundColor', 'red');
	},
	mouseenter: function() {
		jQuery(this).css('backgroundColor', 'magenta');
	},
	mouseleave: function() {
		jQuery(this).css('backgroundColor', '#ccc');
	},
	html: 'Перейти на сайт'
}).appendTo('body');

Создавая новый элемент, вы можете передать вторым аргументом функции jQuery объект, который содержит все его атрибуты и события. До версии 1.4 этого можно было добиться, лишь используя методы .attr(), .сss(), .html(), .click() и др.

Вы можете узнать полный список используемых методов jQuery, набрав в консоли jQuery.attrFn.

При этом задать тег элемента можно одним из следующих способов: jQuery('<a>'), jQuery('<a/>') или jQuery('<a></a>');

3. Выборка с конца

В версии 1.4 были также добавлены методы .first() и .last(), возвращающие первый и последний элементы набора соответственно. В общем случае можно использовать методы .eq() и .get(), которые теперь могут выбирать элементы с конца.

$("div").eq(-2).addClass("blue"); // добавить новый класс к предпоследнему элементу
$("*").get(-2).tagName // получить тег предпоследнего элемента на странице

4. Сериализация данных

jQuery позволяет вам сериализовать входные формы, что может быть удобно при Ajax отправке данных. Эта возможность была в jQuery и раньше, однако ее практически никто не использовал. Вот так выглядит пример отправки формы.

jQuery.post('submit.php', jQuery('#myForm').serialize(), function(){
	alert('Данные отправлены!');
});

Вы так же можете использовать метод .param() для представления объекта в виде строки запроса:

var data = {
	"name": "Luna", 
	"price": 10000
};

jQuery.param(data); // возвращает name=Luna&price=10000

5. Область видимости

jQuery имеет метод .proxy(), который выполняет ту же функцию, что и метод .bind() в Mootools: переопределяет пространство, на которое указывает ключевое слово this.

var obj = {
	name: "Luna",
	test: function() {	
		alert( this.name );
	}
};

jQuery("#test").click( obj.test ); // сообщение "undefined", так как this указывает на элемент #test
jQuery("#test").click( jQuery.proxy( obj, "test" ) );  // сообщение "Luna", так как this указывает на obj

6. Анимация

.animate() - один из самых гибких методов jQuery. Его можно применять не только к CSS свойствам, но и к DOM элементам. Вот обычное использование .animate():

jQuery('div').animate({
	left: 300,
	top: 300
});

jQuery проверяет, является ли указанный параметр CSS свойством (element.style.top). Иначе анимация применяется к атрибуту элемента (element.foo):

jQuery('div').animate({
	top: 123,
	foo: 456
});

Эту особенность можно применять, к примеру, для анимации Canvas элементов.

Также возможно задать относительное изменение и свой тип анимации для каждого стиля.

jQuery("div").animate({
	width: ["+=100px", "swing"],
	height: ["+=50px", "linear"],
}, 2000, function() {
	jQuery(this).after("<div>Анимация завершена</div>");
});

Цвет нельзя изменить с помощью .animate(), используя стандартный jQuery. Используйте соответствующие плагины.

7. Очередь запросов

jQuery содержит встроенный механизм для выполнения методов по очереди. Очередь может быть проиллюстрирована следующим примером.

jQuery('a').hover(function(){
	jQuery(this).animate({paddingLeft:'+=15px'});
}, function(){
	jQuery(this).animate({paddingLeft:'-=15px'});
});

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

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

jQuery('a').queue(function(){
	jQuery(this).css('color', 'red').dequeue();
});

Переданная в качестве аргумента функция добавляется в стандартную очередь fx, которая используется в анимации jQuery.
Заметьте, что мы после добавления класса, мы вызываем метод .dequeue(). Этот метод позволит jQuery продолжить очередь (другими словами таким способом мы сообщаем, что выполнение функции осуществилось).

В jQuery 1.4 добавлен еще один способ продолжить очередь: вместо вызова .dequeue() можно вызвать первый аргумент функции:

jQuery('a').queue(function(nextItemInQueue){
	nextItemInQueue();  // продолжаем очередь
});

Этот способ позволяет вызывать функцию в любом месте. Однако такой вызов теряет указатель this, который придется сохранить в отдельной переменной или передать через .proxy().

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

jQuery('a').queue('myQueue', function(){
	// выполнить действия
	jQuery(this).dequeue('myQueue');
});

В этом случае, стандартная очередь fx не используется, поэтому вам необходимо передать имя очереди в методе .dequeue().

8. Focusin и Focusout

В версии 1.4 введены события focusin и focusout как замена стандартным focus и blur, которые не могут всплывать согласно спецификации DOM Event. Новые события следует применять с методом .live(), так как делегировать focus и blur не удастся.

jQuery("#myForm").focusout(function(event) {
	var tgt = event.target;
	if (tgt.nodeName == "INPUT" && !tgt.value) {
		alert('Заполните поле');
	}
});

9. jQuery.ajax

Ajax методы jQuery (jQuery.ajax(), jQuery.get(), jQuery.post()) возвращают объект XMLHttpRequest, которые можно использовать в дальнейшем. Примеры:

var curRequest;

jQuery('a.makeRequest').click(function(){
	curRequest = jQuery.get('request.php', function(response){
		alert('Данные: ' + response.responseText);
	});
});

jQuery('a.cancelRequest').click(function(){
	if (curRequest) {
		curRequest.abort(); // отмена запроса
	}
});

Таким образом мы выполняем запрос, который можно отменить кнопкой [i]cancelRequest[i].

10. Пространства имен

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

Чтобы зарегистрировать namespace, добавьте суффикс к имени события:

jQuery.fn.myPlugin = function() {

	this.bind('click.myPlugin', function() {
		// выполнить действия
	});

	this.bind('mouseover.myPlugin', function() {
		// выполнить действия
	});

	return this;
};

jQuery('a').myPlugin(); // Использование плагина

jQuery('a').unbind('.myPlugin'); // Отмена плагина