Введение в jQuery. Часть 2

Собственные события

Иногда при возникновении какого-либо события нужно сделать не одно действие, а несколько. Причем некоторые действия могут быть жестко привязаны к наступлению конкретного события, а некоторые - нет. В этом случае существует необходимость создавать свои собственные типы событий и запускать их обработчики в нужный момент, т.е. "триггерить" события. В jQuery есть механизм создания собственных событий:

$(window).bind('customEvent', function(e, data1, data2) {
    alert(data1 + data2);
});
$(window).trigger('customEvent', ["Hello", "world"]);

При создании собственных событий существует риск использовать название события, которое уже используется или будет использоваться в будущем. Для предупреждения подобной ситуации используют namespaces (пространства имен событий):

$(window).bind('book:pageDown', function() {
    // code
});
$(window).trigger('book:pageDown');

Визуальные эффекты

Для управления визуальными свойствами элементов в jQuery существуют следующие методы:

В качестве duration можно указать строчное обозначение временного интервала: “slow” (600мс), “normal” (400мс) или “fast” (200мс).

С помощью метода animate можно создать свою собственную финкцию анимации:

$('div').animate({height: 0}, 1000, 'linear');

В качестве первого аргумента указывается CSS-свойства для анимации, во втором аргументе - длительность анимации, в третьем - функция анимации (по аналогии с функциями анимации в CSS, 'swing'(по умолчанию) или 'linear'). В качестве значения свойства параметра можно указывать относительное изменение, например:

$('div').animate({
        height: '-=10px'
    }, 1000, 'linear');

Прервать анимацию можно с помощью метода stop.

Метод delay принимает в качестве аргумента время в милисекундах, на которое надо отложить запуск анимации. Метод может использоваться как перед анимацией, так и между анимациями.

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

$('div').animate({
        height: '100px'
    }, {
        duration: 1000,
        easing: 'linear',
        complete: function() {}
    });

Работа с Ajax

Для упрощения работы с ajax-запросами jQuery использует метод ajax:

$.ajax({
    type: "GET",
    method: "GET", // c 1.9.0
    url: "http://ready-to.win/ajax.php",
    async: true,
    cache: true,
    contentType: 'application/x-www-form-urlencoded',

    username: "user",
    password: "1111",

    data: {
        a: 1,
        b: 2
    },
    headers: {
        "X-Requested-With": "not a XMLHttpRequest"
    },
    crossDomain: false,
    dataType: 'html',
    timeout: 1000,
    jsonpCallback: 'functionName',
    jsonpCallback: function () {}, // c 1.5

    complete: function (jqXHR, textStatus) {
        console.log('Request compleated');
    },
    success: function(respond, textStatus, jqXHR) {
        console.log('All done');
    },
    error: function(jqXHR, textStatus, e) {
        console.log('Error');
    }
});

Большинство параметров по умолчанию можно использовать без измения. Простейший ajax-запрос:

$.ajax('http://ready-to.win/ajax.php');

ajax так же поддерживает синтаксис в стиле promise-ов:

$.ajax({ })
    .done(function( respond, textStatus, jqXHR ) { })
    .fail(function( jqXHR, textStatus, e ) { })
    .always(function( data, textStatus, jqXHR ) { }) // on success
    .always(function( jqXHR, textStatus, errorThrown ) { }); // on error

Есть также несколько вариантов короткого синтаксиса для наиболее типичных запросов. Например, для запросов методами GET и POST соответственно:

$.get(
    "http://example.com",
    {a: 1},
    function(respond) {},
    "text");

$.post(
    "http://example.com",
    {a: 1},
    function(respond) {},
    "text");

Короткие методы могут использоваться и для получения JSON или подгрузки скрипта на странице:

$.getJSON(
    "http://example.com/data.json",
    {a: 1},
    function(respond) {});

$.getScript(
    "http://example.com/script.js",
    function(respond) {});

Для подгрузки html-кода с одной страницы в другую можно использовать метод load:

$("#thisDiv").load("thatPage.html");

Скрипты сторонней страницы встраиваются в текущую. При необходимости подгрузки только фрагмента страницы можно указать его в атрибуте метода load:

$("#thisDiv").load("thatPage.html #thatDiv");

В этом случае скрипты из полученного фрагмента будут вырезаны.

Использование Callbacks

Начиная с версии 1.7 в jQuery был добавлен объект Callbacks, предназначенный для создания callback'ов (функций обратного вызова). Вызов метода Callbacks возвращает объект, с помощью которого можно добавлять, удалять, вызывать и проверять состояние callback'ов.

var flags = "" +
    "once " +// запустить коллбэки единоразово
    "memory " +// немедленно выполнять коллбеки с указанным параметром
    "unique " +// игнорировать повторное дбавление коллбэков
    "stopOnFalse " +// остановить выполнение при возврате false коллбэком
    "";

var callbacks = $.Callbacks(flags);

У созданного объекта есть следующие методы:

Использование Callbacks:

function firer(value) {
    console.log('We`ve got ' + value + ' here');
};
var callbacks = $.Callbacks();
callbacks.add(firer);
callbacks.fire(42);

Пример использования fireWith:

function firer(method) {
    console.log(this[method]());
};
var callbacks = $.Callbacks();
callbacks.add(firer);
callbacks.fireWith(Date, ['now']);

Пример использования различных флагов, пример реализации паттерна Pub/Sub на Callbacks.

jQuery утилиты

jQuery также содержит набор методов общего назначения: