• Геннадий Самков
• jQuery. Сборник рецептов (+ CD-ROM)
• Издательство: БХВ-Петербург, 2011 г.
• Мягкая обложка, 416 стр.
• ISBN 978-5-9775-0732-5
• Тираж: 1500 экз.
• Формат: 70×100/16

Аннотация:
Книга является сборником решений наиболее часто встречающихся задач при веб-программировании пользовательских интерфейсов с использованием библиотеки jQuery. Рассмотрены практически все методы и вспомогательные функции jQuery, в том числе обеспечивающие взаимодействие jQuery и AJAX. Подробно рассказано о надстройке UI jQuery. Приведено большое количество примеров использования плагинов для jQuery – создание графиков и диаграмм, фотогалерей, меню, работа с таймерами и cookies, обработка табличных данных и др. Во втором издании в примерах используется библиотека jQuery версий 1.4.4 и 1.5.2, а также надстройка UI jQuery 1.8.9.
Компакт-диск содержит примеры из книги, файлы библиотеки jQuery 1.4.4 и 1.5.2, файлы надстройки UI jQuery 1.8.9, а также файлы расширений сторонних разработчиков.

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

Отрывок книги в PDF

Полное содержание:

Синтаксис шаблонов довольно функционален. В теле шаблона разработчик может обращаться к полям объекта, к полям полей объекта, вызывать методы объекта и его полей, обращаться к внешним объектам JavaScript и jQuery, просто писать JS-выражения. Кроме всего этого внутри шаблона можно итеративно выводить коллекции, организовать условный вывод, использовать вложенные шаблоны. Но давайте обо всём по порядку.

Примеры в статье

Все примеры я буду приводить ключевыми кусками, чтобы не загромождать материал повторяющимися частями кода. В примере будут присутствовать текст шаблона, JSON данных, при необходимости JSON опций (параметр options метода .tmpl( ) ) и результат. В общем случае полный код примера будет выглядеть так:

<script type="text/x-jquery-tmpl">
    <li> ЭТО ТЕКСТ ШАБЛОНА </li>
</script>
<script type="text/javascript">
var data = [
    // ЭТО МАССИВ ДАННЫХ
];
var options = {
    // ЭТО ОПЦИИ
};
$(function() {
    // ПРИМЕНЕНИЕ ШАБЛОНА И ВЫВОД РЕЗУЛЬТАТА:
    $('script[type="text/x-jquery-tmpl"]').tmpl(data, options).appendTo($('.output').empty());
});
</script>
<ul class="output"></ul>

Так будет полностью выглядеть приведенный ниже пример 1.:

<script type="text/x-jquery-tmpl">
    <li>${Name} ({{html Desc}}); вычисления: ${p1 + p2 + 10}</li>
</script>
<script type="text/javascript">
var data = [
    { Name: "obj1", Desc: "<em>Object one</em>", p1: 1, p2: 10 },
    { Name: "<em>obj2</em>", Desc: "<strong>Object two</strong>", p1: 3.3, p2: 5 }
];
var options = {
};
$(function() {
    $('script[type="text/x-jquery-tmpl"]').tmpl(data, options).appendTo($('.output').empty());
});
</script>
<ul class="output"></ul>

Вставка данных в шаблон ${}, {{= }}, {{html }}

С помощью этих инструкции можно вставить в шаблон значение поля объекта данных, результат работы метода или результат вычисления некоторого js-выражения, внутри инструкции можно обращаться к глобальным объектам JS, а также к служебным объектам, созданным при обработке шаблона.

Прежде чем перейти к примерам, хочу немного акцентировать внимание на сходстве и разнице этих инструкций. Все три инструкции предназначены для вывода результата в эту точку шаблона. ${expression} и {{= expression}} эквивалентны (первая инструкция – это сокращённая форма второй), результат вставляется в шаблон в виде текста, если в тексте встречаются символы разметки (<  >  & и пр.), то они будут заменены на соответствующие спецсимволы (&lt;  &gt;  &amp; и пр.). Для вставки же разметки с сохранением html-кода нужно использовать инструкцию {{html expression}}.

Пример 1. Вывод данных с разметкой и без

Шаблон:

<li>${Name} ({{html Desc}}); вычисления: ${p1 + p2 + 10}</li>

Данные:

[
    { Name: "obj1", Desc: "<em>Object one</em>", p1: 1, p2: 10 },
    { Name: "<em>obj2</em>", Desc: "<strong>Object two</strong>", p1: 3.3, p2: 5 }
]

Результат:

<ul class="output">
    <li>obj1 (<em>Object one</em>); вычисления: 21</li>
    <li>&lt;em&gt;obj2&lt;/em&gt; (<strong>Object two</strong>); вычисления: 18.3</li>
</ul>

Доступ к объектам и внутренние параметры шаблона

Как я уже упоминал, внутри выражения можно обращаться к глобальным объектам и функциям JS, при этом шаблонизатор сам пытается определить, является указанное имя ссылкой на глобальный объект или на часть переданных данных. И конечно же, локальные данные имеют более высокий приоритет, чем глобальные. Давайте определим в документе глобальные объект testObj и функцию testFunc и попробуем их использовать:

var testObj = {
    Value: 1
};

function testFunc(i) {
    return i % 2 == 1;
}

Пример 2. Использование глобальных объектов

Шаблон:

<li>${Name}; testObj.Value = ${testObj.Value}; testFunc(${p}) => ${testFunc(p)}</li>

Данные:

[
    { Name: "obj1", p: 3, testObj: { Value: 20 } },
    { Name: "obj2", p: 13, testFunc: function(i) { return i + 7; } }
]

Результат:

<ul class="output">
    <li>obj1; testObj.Value = 20; testFunc(3) =&gt; true</li>
    <li>obj2; testObj.Value = 1; testFunc(13) =&gt; 20</li>
</ul>

Внутри шаблона есть ещё доступ  к специальным объектам – внутренним параметрам шаблона: $item и $data.

$item – представляет доступ к обрабатываемой в данный момент единице данных для вставки в шаблон, внутри этого объекта собраны и параметры, переданные пользователем, и дополнительные параметры из аргумента options функции .tmpl( ). Доступ к параметрам из данных осуществляется через вложенный объект .data, а к параметрам аргумента options – напрямую, т.е. если вызвать $(‘#myTmpl’).tmpl({ p1: 1 }, { p2: 2 }), то в шаблоне получить доступ к ним можно так: $item.data.p1 и $item.p2.

$data – это сокращённая версия доступа к данным, по сути это просто синоним для $item.data, в свете этого доступ в шаблоне к p1 и p2 из вызова в абзаце выше может быть таким: $data.p1 и $item.p2.

Пример 3. Параметр options

Шаблон:

<li>${Name}; p * 100 = ${$item.Method($data.p)}</li>

Данные:

[
    { Name: "obj1", p: 3.3 },
    { Name: "obj2", p: 0.13 }
]

Опции:

{ Method: function(i) { return i * 100; } }

Результат:

<ul class="output">
    <li>obj1; p * 100 = 330</li>
    <li>obj2; p * 100 = 13</li>
</ul>

Условная разметка в шаблоне {{if }} {{else}} {{/if}}

Внутри шаблона можно отслеживать некие условия и в зависимости от них выводить тот или иной кусок. Для достижения этих целей применяются следующие комбинации инструкций:

{{if expression}} tmplPart {{/if}} – простой вывод части шаблона, только если выражение истинно,
{{if expression}} tmplPart1 {{else}} tmplPart2 {{/if}} – вывод части 1 или 2 в зависимости от истинности выражения,
{{if expr1}} tmplPart1 {{else expr2}} tmplPart2 {{else}} tmplPart3 {{/if}} – это уже построение цепочки последовательных проверок (if .. else if .. else if .. else ..), понятное дело, что последний else без выражения необязателен. Думаю, тут всё понятно, давайте посмотрим простенький пример:

Пример 4. Условный вывод

Шаблон:

<li>
{{if (
    (typeof(useFirstLastName) != "undefined" ? useFirstLastName : $item.defaultUseFirstLastName) &&
    $data.FirstName && $data.LastName)}} ${FirstName + " " + LastName}
{{else $data.FullName}} ${FullName}
{{else $data.Name}} ${Name}
{{else}} ${$item.NoName}
{{/if}}
</li>

Данные:

[
    { Name: "obj1", FullName: "Object 1", FirstName: "Object", LastName: "One" },
    { FirstName: "Object", LastName: "Two", Name: "obj2", useFirstLastName: true },
    { Title: "object number 3" }
]

Опции:

{ NoName: "[noname]", defaultUseFirstLastName: false }

Результат:

<ul class="output">
    <li>  Object 1  </li>
    <li>  Object Two  </li>
    <li>  [noname]  </li>
</ul>

Поясню, что происходит в шаблоне. Под первым условием мы проверяем, нужно ли выводить имя объекта в виде конкатенации FirstName и LastName – при этом проверяется условие внутри объекта, если оно не определено, то условие в опциях, и требуется наличие обоих свойств. Обращаясь в условии к этим свойствам через параметр $data, гарантируем их наличие именно в переданных данных, а глобальные объекты при этом игнорируются. Во втором и третьем условиях проверяем последовательно свойства FullName и Name – выводим первое попавшееся, если нет ни одного из них, то выводим «заглушку» из опций.

Итеративный обход с помощью {{each }}

Думаю всем знакома функция jQuery .each(func) (а есть ещё и $.map(array, callback) ) и надеюсь многим знакома конструкция JS for (var key in obj) – эти выражения совершают итеративный обход элементов коллекции. В шаблонах тоже возможен вывод коллекций поэлементно и описывается он следующей инструкцией: {{each( index, value ) data}} tmplText {{/each}}. index и value – это имена параметров (указываются без кавычек) для доступа соответственно к текущему индексу и значению в коллекции. Есть и сокращённая форма этой инструкции: {{each data}} tmplText {{/each}} – при этом в тексте шаблона к текущим индексу и значению можно обратиться по именам по умолчанию: $index и $value. Выражение data должно возвращать в результате массив или объект, объект будет обработан как словарь (коллекция пар имя-значение свойств объекта). Довольно слов, посмотрим на примере:

Пример 5. Вывод массива

Шаблон:

<li>
    <table border="1" cellpadding="5" cellspacing="0">
        <tr><th align="left">n</th><th align="left">${Expr}</th></tr>
        {{each NumCollection}}
        <tr><td>${$index}</td><td>${$value}</td></tr>
        {{/each}}
        <tr><td>${$item.EtcName}</td><td>${$item.EtcVal}</td></tr>
    </table>
</li>

Данные:

[
    { Expr: "2^n", NumCollection: [ 1, 2, 4, 8, 16 ] },
    { Expr: "2n-1", NumCollection: [ 1, 3, 5, 7, 9 ] },
]

Опции:

{ EtcName: "etc.", EtcVal: "..." }

Результат:

<ul class="output">
<li>
     <table border="1" cellpadding="5" cellspacing="0">
         <tbody>
             <tr><th align="left">n</th><th align="left">2^n</th></tr>
             <tr><td>0</td><td>1</td></tr>
             <tr><td>1</td><td>2</td></tr>
             <tr><td>2</td><td>4</td></tr>
             <tr><td>3</td><td>8</td></tr>
             <tr><td>4</td><td>16</td></tr>
             <tr><td>etc.</td><td>...</td></tr>
         </tbody>
    </table>
</li><li>
     <table border="1" cellpadding="5" cellspacing="0">
         <tbody>
             <tr><th align="left">n</th><th align="left">2n-1</th></tr>
             <tr><td>0</td><td>1</td></tr>
             <tr><td>1</td><td>3</td></tr>
             <tr><td>2</td><td>5</td></tr>
             <tr><td>3</td><td>7</td></tr>
             <tr><td>4</td><td>9</td></tr>
             <tr><td>etc.</td><td>...</td></tr>
        </tbody>
    </table>
</li>
</ul>

Пример 6. Вывод объекта-словаря

Шаблон:

<li>
JSON = { {{each(key, val) $data}}{{if $item.f}},{{/if}} "${key}": "${val}"{{if $item.f=true}}{{/if}}{{/each}} }
</li>

Данные:

[
    { Name: "obj1", FullName: "Object 1", FirstName: "Object", LastName: "One" },
    { FirstName: "Object", LastName: "Two", Name: "obj2" },
    { Title: "object number 3" }
]

Опции:

{ f: false }

Результат:

<ul class="output">
    <li> JSON = {  "Name": "obj1", "FullName": "Object 1", "FirstName": "Object", "LastName": "One" } </li>
    <li> JSON = {  "FirstName": "Object", "LastName": "Two", "Name": "obj2" } </li>
    <li> JSON = {  "Title": "object number 3" } </li>
</ul>

Вывод шаблона в шаблоне {{tmpl }}

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

Полный вид инструкции: {{tmpl(data, options) template}}.

(На момент написания статьи в оф.документации показана сигнатура инструкции {{tmpl( [data], [options] ) template}} content {{/tmpl}} – это ОШИБКА, у этой инструкции нет закрывающего тега {{/tmpl}} и, соответственно, никакого содержания content)

Параметры data и options – являются необязательными и имеют то же назначение, что и в функции .tmpl(data, options), если параметры опущены, то в качестве данных используется текущий объект данных $data, а options – пустой объект.
Параметр template может принимать следующие значения: HTML-разметка, HTML- или jQuery-объект, строка, которая является именем скомпилированного шаблона или скомпилированный шаблон, также можно просто передать строку-селектор для jQuery (это недокументированная возможность, но она фигурирует в примерах).

Пример 7. Использование сгенерированного шаблона

Шаблон:

<li> {{tmpl $item.lt+tag+$item.gt+$item.tp+"{content}"+$item.lt+"/"+tag+$item.gt}} </li>

Данные:

[
    { tag: "strong", content: "<em>Hello</em>, " },
    { tag: "em", content: "World!" }
]

Опции:

{ lt: "<", gt: ">", tp: "$" }

Результат:

<ul class="output">
    <li> <strong>&lt;em&gt;Hello&lt;/em&gt;, </strong> </li>
    <li> <em>World!</em> </li>
</ul>

В шаблоне этого примера при генерировании вложенного шаблона используются строковые значение «<», «>», «$» в виде переменных, это сделано для того, чтобы они не воспринимались как разметка и инструкции внешним шаблоном.

Пример 8. Использование шаблона внутри шаблона

Шаблон:

<li>${Name} {{if Items}}<ul>{{tmpl(Items) '#tmplSelector'}}</ul>{{/if}}</li>

Тут строку ‘#tmplSelector’ – следует заменить на корректный селектор (или функцию) получения текущего шаблона. Для моих «живых» примеров можно использовать такой шаблон:

<li>${Name} {{if Items}}<ul>{{tmpl(Items) $('#example8 script[type="text/x-jquery-tmpl"]')}}</ul>{{/if}}</li>

, в нём будет применен начальный шаблон, или

<li>${Name} {{if Items}}<ul>{{tmpl(Items) $('#example8')[0].DemoData.Tmpl}}</ul>{{/if}}</li>

, в нём будет применён отредактированный шаблон – полностью «живой» пример.

Данные:

[
    { Name: "obj1", Items: [ { Name: "obj11", Items: [ { Name: "obj111" }, { Name: "obj112" } ] }, { Name: "obj12" } ] },
    { Name: "obj2" }
]

Опции:

{ }

Результат:

<ul class="output">
    <li>obj1 <ul>
        <li>obj11 <ul>
            <li>obj111 </li>
            <li>obj112 </li>
        </ul></li>
        <li>obj12 </li>
    </ul></li>
    <li>obj2 </li>
</ul>

В этом примере определён рекурсивный шаблон.

Шаблон в шаблоне с HTML-содержанием внутри {{wrap }}

{{wrap (data, options) template}} HTMLcontent {{/wrap}} – эта инструкция очень похожа на инструкцию {{tmpl }}, её параметры data, options и template имеют то же назначение. Отличие инструкции {{wrap }} от {{tmpl }} в том, что она может включать HTML-содержание и затем это содержание можно использовать в применяемом шаблоне.

В шаблоне, который передаётся параметром template, можно достать HTML-разметку, заключённую между {{wrap }} и {{/wrap}} с помощью метода $item.html(filter, onlyText). Первым аргументом можно наложить фильтр в виде селектора jQuery на выбираемые из разметки элементы, а вторым аргументом можно указать, что нужно в результате получить только текст верхнего выбранного элемента.

Пример 9. Использование {{wrap }}

<!DOCTYPE html>
<html>
<head>
  <style>
table { border-collapse:collapse; width:380px; background-color:#f8f8f8; border:2px solid blue; margin:5px; } table td { border:1px solid blue; padding:3px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="myTmpl" type="text/x-jquery-tmpl">
    The following wraps and reorders some HTML content:
    {{wrap "#tableWrapper"}}
        <h3>One</h3>
        <div>
            First <b>content</b>
        </div>
        <h3>Two</h3>
        <div>
            And <em>more</em> <b>content</b>...
        </div>
    {{/wrap}}

    And this wraps different HTML content:
    {{wrap "#tableWrapper"}}
        <div>
            First <b>div</b>
        </div>
        <div>
            Second <b>div</b>
        </div>
        <div>
            Third <b>div</b>
        </div>
        <h3>first h3</h3>
        <h3>second h3</h3>
        <h3>third h3</h3>
    {{/wrap}}
</script>

<script id="tableWrapper" type="text/x-jquery-tmpl">
    <table><tbody>
        <tr>
            {{each $item.html("h3", true)}}
                <td>
                    ${$value}
                </td>
            {{/each}}
        </tr>
        <tr>
            {{each $item.html("div")}}
                <td>
                    {{html $value}}
                </td>
            {{/each}}
        </tr>
    </tbody></table>
</script>

<div id="myWrappedView"></div>

<script>
$( "#myTmpl" ).tmpl()
    .appendTo( "#myWrappedView" );
</script>

</body>
</html>

Этот пример взят со страницы оф. документации по этой инструкции шаблона. В «живых» примерах приведена переработанная под их специфику версия.

Комментарии в шаблонах {{! }}

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

{{! это текст комментария}}

«Живые» примеры из статьи

По этому адресу страница доступна online: http://zalab.net/projects/jquery/demo/tmpl/
А по этой ссылке можно загрузить эту страничку в архиве: jq.tmpl.live.examples.zip (33 KB)

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

Следует отметить, что команда Microsoft использовала свои немалые наработки в этих направлениях, как и команда проекта jQuery, и при хорошо сложившемся взаимодействии получились, на мой взгляд, отличные инструменты для разработчиков. В подтверждение моего мнения могу добавить, что разработчики jQuery анонсировали включение плагинов шаблонов и привязки данных в ядро библиотеки jQuery уже версии 1.5, а плагина глобализации – в соответствующую версию jQuery UI. Плагины пока ещё не получили статус релиза, но уже активно ведется написание документации на сайте http://api.jquery.com. К слову, команда Microsoft последовала традициям разработки jQuery и разместила материалы по разработке плагинов на github.com, где доступны описание и исходники плагинов.

В этой статье я расскажу немного о плагине шаблонов.

jQuery Templates plugin

Начнём с простенького примера:

<script id="movieTemplate" type="text/x-jquery-tmpl">
  <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

<script type="text/javascript">
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
  { Name: "The Inheritance", ReleaseYear: "1976" }
];

$( "#movieTemplate" ).tmpl( movies )
    .appendTo( "#movieList" );
</script>

<ul id="movieList"></ul>

Итак, в примере разработчик страницы описал шаблон для вывода объектов в виде разметки (первый элемент script), потом получил откуда-то массив объектов movies и вызвал инструкцию сгенерировать нужную разметку по шаблону, взяв данные из предоставленного массива объектов, а результат добавить в конец списка #movieList.
В результате работы плагина мы получим такую разметку:

<ul id="movieList">
  <li><b>The Red Violin</b> (1998)</li>
  <li><b>Eyes Wide Shut</b> (1999)</li>
  <li><b>The Inheritance</b> (1976)</li>
</ul>

А теперь по сути вопроса.
Что делает плагин?
Плагин получает на вход строку шаблона и множество объектов (или один объект), которые нужно вывести в строку (или разметку) с форматированием.
Где это применяется?
В основном этот плагин полезен при динамическом выводе объектов JS на страницу, объекты могут быть получены самыми разными способами, например, при разчётах или по результатам каких-то действий пользователя и, конечно самый часто приводимый пример, в виде JSON в ответе сервера на AJAX запрос.

Методы плагина

.tmpl( [ data ], [ options ] )
Получает содержимое первого выбранного элемента и использует его в качестве шаблона для форматированного вывода указанных данных.
data – данные для вывода в шаблон (объект или массив объектов).
options – опционально, определённое пользователем расширение в виде пар ключ-значение для объекта вывода в шаблон.
jQuery.tmpl(template, [ data ], [ options ])
Использует указанный шаблон для форматированного вывода указанных данных.
template – шаблон для форматирования данных, может быть одного из следующих типов: строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке), строка, соответствующая имени ранее скомпилированного шаблона.
data, options – имеют то же значение, что и выше
.tmplItem()
Возвращает для первого выбранного элемента структуру (объект) с результатами работы шаблонизатора. Возвращаемый методом объект обеспечивает доступ к:

• HTML-частям, из которых состоит шаблон
• ассоциированной единице переданных данных
• родительскому шаблону, если текущий шаблон является вложенным
• текущему шаблону, использованному для вывода
• определённому пользователем расширению (полям и методам), переданным в параметр options метода tmpl()

Этот метод используется, напрмер, когда после проведенного форматирования данных требуется узнать, а какие же данные были использованы при формировании некоторого куска разметки, или для обновления куска разметки с использованием новых данных.
jQuery.tmplItem( element )
Аналогичен методу .tmplItem, только структура с результатами работы шаблонизатора ищется для элемента element (HTML-элемент, в том числе и в jQuery-обёртке).
.template( [ name ] )
Метод делает из содержимого первого выбранного элемента скомпилированную версию шаблона форматирования.
name – необязательно имя шаблона, если имя указано, то потом можно использовать его для обращения к этому шаблону в методе jQuery.tmpl(name, data, options)
jQuery.template( [ name, ] template )
Метод аналогичен описанному выше, только здесь шаблон передаётся в качестве параметра template – это может быть строка, строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке).

Синтаксис шаблона

Я вкратце приведу описание нескольких самых основных элементов шаблона, остальное надеюсь более подробно описать в следующей статье (если будет положительный отклик на эту статью)
${fieldNameOrExpression} и {{= fieldNameOrExpression}}
Позволяет вставить в шаблон значение поля (свойства) объекта данных, может быть также использовано для вставки результата метода или js-выражения. Напрмер, «${Name}» – вставит в шаблон значение поля obj.Name, а при том, что Languages – это поле объекта, которому присвоен массив, «${Languages.length}» – вставит в шаблон длину этого массива, и наконец, если у объекта есть метод getLanguages с двумя параметрами, то «${getLanguages(Languages, ‘ – ‘)}» – вставит в шаблон результат работы этого метода.
{{html fieldNameOrExpression}}
Элемент шаблона ${field} (или {{= field}}) вставляет в результат значение указанного поля в виде текста, т.е. если в строке будут HTML-теги, то они будут закодированы, а не преобразованы в разметку. Если вам требуется вставить данные в шаблон именно в виде HTML-разметки, то надо использовать синтаксис {{html <что нужно вставить>}}.
Для начала работы с плагином уже достаточно рассказано, могу лишь добавить, что синтаксис шаблонов позволяет вставлять вложенные шаблоны, условные инструкции, обращаться к некоторым объектам JS и jQuery и ещё кое-что… Остальное – материал будущей статьи.

Источники

Статья написана по материалам, найденным во всемирной паутине. В основном это перевод официальной документации. Оригиналы можно посмотреть по следующим ссылкам:

• Сообщение в блоге jQuery и в блогах MS
• Страница документации плагина (примеры взяты оттуда)

Об авторе

Зовут меня Зайцев Андрей, мой маленький блог, профиль на форуме zandroid

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

Примеры

Пример 1: Динамическое переключение применяемого шаблона

<!DOCTYPE html>
<html>
<head>
  <style>
    table { cursor:pointer; border-collapse:collapse; border:2px solid blue; width:300px; margin:8px; }
    table tr { border:1px solid blue; color:blue; background-color:#f8f8f8; } table td { padding:3px; } table tr:hover { color:red; }
    .movieDetail { background-color:yellow; } .movieDetail.row1 { border-bottom:none; } .movieDetail.row2 { border-top:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="summaryTemplate" type="text/x-jquery-tmpl">
  <tr class='movieSummary'><td colspan='2'>${Name}</td></tr>
</script>

<script id="detailTemplate" type="text/x-jquery-tmpl">
  <tr class='movieDetail row1'><td colspan='2'>${Name}</td></tr><tr class='movieDetail row2'><td>${ReleaseYear}</td><td>Director: ${Director}</td></tr>
</script>

Click for details:
<table><tbody id="movieList"></tbody></table>

<script type="text/javascript">
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
  { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
];
var selectedItem = null;

/* Render the summaryTemplate with the "movies" data */
$( "#summaryTemplate" ).tmpl( movies ).appendTo( "#movieList" );

/* Add onclick handlers for movie template items
using the summary or details template */
$("#movieList")
  .delegate( ".movieSummary", "click", function () {
    if (selectedItem) {
      // Set the template on the previously selected item
      // back to the summary template
      selectedItem.tmpl = $( "#summaryTemplate" ).template();
      selectedItem.update();
    }
    /* Get the data structure for the template item
       which this clicked element belongs to, and make
       it the selected item */
    selectedItem = $.tmplItem(this);

    /* Set the template on this item to the detail template */
    selectedItem.tmpl = $( "#detailTemplate" ).template();
    selectedItem.update();
  })
  .delegate( ".movieDetail", "click", function () {
    /* Set the template on this item to the summary template */
    selectedItem.tmpl = $( "#summaryTemplate" ).template();
    selectedItem.update();
    selectedItem = null;
  });
</script>

</body>
</html>

Довольно сложный и объемный, в нём используются сразу несколько методов плагина, взят с этой страницы.

Пример 2: Вставка данных с разметкой в шаблон

<!DOCTYPE html>
<html>
<head>
  <style>
    .role {font-weight:bold;font-style: italic;} #movieContainer {padding-left: 8px;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="movieTemplate" type="text/x-jquery-tmpl">
  <h4>${Name}</h4>
  <p>{{html Synopsis}}</p>
</script>

<div id="movieContainer"></div>

<script>
/* The Synopsis data field contains HTML markup. */
var movie = {
  Name: "Meet Joe Black",
  Synopsis: "The <span class='role'>grim reaper</span> (<a href='http://www.netflix.com/RoleDisplay/Brad_Pitt/73919'>Brad Pitt</a>) visits <span class='role'>Bill Parrish</span> (<a href='http://www.netflix.com/RoleDisplay/Anthony_Hopkins/43014'>Anthony Hopkins</a>)..."
};

/* Render the template with the movie data.
   The template uses the {{html}} template tag
   to  insert the Synopsis HTML markup data. */
$( "#movieTemplate" ).tmpl( movie )
  .appendTo( "#movieContainer" );
</script>

</body>
</html>

В этом примере в шаблон добавляются как простые строковые значения полей, так и значения с разметкой, взято вот с этой страницы.

P.S.

Примеры не стал расписывать, если аудитория поддержит мои начинания, то можно пошагово расписать что, как и почему, и привести ещё несколько примерчиков.

Вопросы по плагину прошу задавать на форуме, если есть комменты именно по статье – то комментируйте ниже.

• Геннадий Самков
• jQuery. Сборник рецептов (+ CD-ROM)
• Издательство: БХВ-Петербург, 2010 г.
• Мягкая обложка, 410 стр.
• ISBN 978-5-9775-0495-9
• Тираж: 1500 экз.
• Формат: 70×100/16

Аннотация:
Книга является сборником решений наиболее часто встречающихся задач при веб-программировании пользовательских интерфейсов с использованием библиотеки jQuery. Рассмотрены практически все методы и вспомогательные функции jQuery, в том числе обеспечивающие взаимодействие jQuery и AJAX. Подробно рассказано о надстройке UI jQuery и приведены описания всех настроек для виджетов, входящих в ее состав, что позволяет использовать книгу в качестве справочника. Приведено большое количество примеров использования наиболее популярных плагинов для jQuery – создание графиков и диаграмм, фотогалерей, навигационных меню, всплывающих подсказок, работа с веб-формами, таймерами и cookies, обработка табличных данных. Компакт-диск содержит примеры, разобранные в книге, файлы библиотеки jQuery версий 1.2.6 и 1.3.2, файлы надстройки UI jQuery, а также файлы рассмотренных в книге расширений сторонних разработчиков.

От себя могу добавить, что книга написана в таком же духе, как и предыдущая: «AJAX. Программирование для Интернета«, т.е. примеры, примеры и еще раз примеры плюс подробные разъяснения….

Полное содержание:

Итак, давайте для начала посмотрим, как могут быть использованы эффекты, а далее я приведу примеры всех доступных эффектов.

show(effect, options, [speed], [callback])

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

В примере применяется эффект slide чтобы показать элемент div, если совершен клик на параграфе.

$("p").click(function () {
  $("div").show("slide", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

hide(effect, options, [speed], [callback])

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

В примере применяется эффект slide чтобы скрыть элемент div, если совершен клик на параграфе.

$("p").click(function () {
  $("div").hide("slide", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

toggle(effect, options, [speed], [callback])

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

В примере применяется эффект slide чтобы переключать элемент div, если совершен клик на параграфе.

$("p").click(function () {
  $("div").toggle("slide", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

effect(effect, options, [speed], [callback])

Возвращает: jQuery
Использует эффект для элемента (без использования логики show/hide).

В примере применяется эффект explode, если на элементе совершен клик.

$("div").click(function () {
  $(this).effect("explode", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

Мы узнали как можно использовать эффекты, но пока использовали только парочку из них. Давайте теперь подробнее познакомимся с перечнем эффектов и узнаем, какие из них можно использовать автономно, а какие можно применять с show, side и toggle.
Разумеется для начала нам потребуется подключить файл библиотеки jQuery, файл effects.core.js и файл нужного эффекта. Выглядеть это будет примерно так:

<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/effects.core.js" type="text/javascript"></script>
// подключаем файл нужного эффекта
<script src="js/effects.bounce.js" type="text/javascript"></script>

Познакомимся сначала с эффектами, которые можно использовать автономно (без логики show/hide). Таких эффектов четыре – bounce, highlight, shake, transfer.

Bounce

$("#div1").click(function () {
  $(this).effect("bounce", { times: 3 }, 300);
});
$("#div2").click(function () {
  $(this).effect("bounce", { times: 7,
      direction: 'right',
      distance: 50 }, 300);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: up
«up», «down», «left», «right»
distance – Integer – по умолчанию: 20
расстояние в пикселах
times – Integer – по умолчанию: 5
количество раз

Highlight

$("#div1").click(function () {
  $(this).effect("highlight", {}, 1000);
});
$("#div2").click(function () {
  $(this).effect("highlight", {color: '#ff0000'}, 500);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

color – String – по умолчанию: #ffff99
цвет подсветки

Shake

$("#div1").click(function () {
  $(this).effect("shake", { times: 3 }, 300);
});
$("#div2").click(function () {
  $(this).effect("shake", {
      times: 4,
      direction: 'down',
      distance: 10 }, 300);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: left
«up», «down», «left», «right»
distance – Integer – по умолчанию: 20
расстояние в пикселах
times – Integer – по умолчанию: 3
количество раз

Transfer

$("div.green1").click(function () {
  $(this).effect("transfer", { to: "div.red" }, 2000);
});
$("div.green2").click(function () {
  $(this).effect("transfer", { className: "transfer2",
      to: "div.red" }, 800);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

className – String
Имя класса (опционально), которое можно назначить отображению трансформируемого элемента вместо стандартного «ui-effects-transfer».
to – String
jQuery селектор, определяющий элемент в который происходит трансформация.

Ну а теперь перечислим эффекты, которые можно использовать вместе с Show/Hide/Toggle:

Blind

$("#div1").click(function () {
  $(this).hide("blind", {direction:"vertical"}, 1000);
});
$("#div2").click(function () {
  $(this).hide("blind", {direction:"horizontal"}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: vertical
«vertical» или «horizontal»

Clip

$("#div1").click(function () {
  $(this).hide("clip", {direction:"vertical"}, 1000);
});
$("#div2").click(function () {
  $(this).hide("clip", {direction:"horizontal"}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: vertical
«vertical» или «horizontal»

Drop

$("#div1").click(function () {
  $(this).hide("drop", { direction: "left" }, 1000);
});
$("#div2").click(function () {
  $(this).hide("drop", { direction: "down" }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: left
«left», «right», «up», «down»

Explode

$("#div1").click(function () {
  $(this).hide("explode", {}, 1000);
});
$("#div2").click(function () {
  $(this).hide("explode", { pieces: 25 }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

pieces – Integer – по умолчанию: 9
количество штук.

Fold

$("#div1").click(function () {
  $(this).hide("fold", {}, 1000);
});
$("#div2").click(function () {
  $(this).hide("fold", { size: 50 }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

size – Integer – по умолчанию: 15
размер в пикселах.

Puff

$("#div1").click(function () {
  $(this).hide("puff", {}, 1000);
});
$("#div2").click(function () {
  $(this).hide("puff", { percent: 700 }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

percent – Integer – по умолчанию: 150
Количество процентов.

Slide

$("#div1").click(function () {
  $(this).hide("slide", { direction: "left" }, 1000);
});
$("#div2").click(function () {
  $(this).hide("slide", { direction: "down" }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: left
«left», «right», «up», «down»

Scale

$("#div0").click(function () {
  $(this).hide("scale", {}, 1000);
});
$("#div1").click(function () {
  $(this).effect("scale", { percent: 0 }, 1000);
});
$("#div2").click(function () {
  $(this).effect("scale", {
        percent:200,
        direction:'horizontal'}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: both
‘both’, ‘vertical’, ‘horizontal’
from – Object
Начальное состояние. Обычно не требуется. { height: .., width: .. }
origin – Array – по умолчанию: ['middle','center']
Точка исчезновения, по умолчанию для show/hide
percent – Integer – по умолчанию: 0/100
Количество процентов.

Pulsate

$("#div1").click(function () {
  $(this).effect("pulsate", { times: 2 }, 1000);
});
$("#div2").click(function () {
  $(this).effect("pulsate", { times: 9 }, 50);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

times – Integer – по умолчанию: 5
Количество пульсаций.

Все использованные в примерах файлы, как и файл effects.core.js можно скачать в разделе download.

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

Как выбирать элементы, используя class или id?

Этот код выбирает элемент с id «myDivId». Поскольку id является уникальным, это выражение всегда выбирает один элемент. Или ничего не выбирает, если элемента с таким id не существует.

$('#myDivId');

Следующий код выбирает элемент(ы) с классом «myCssClass». Поскольку любое количество элементов может иметь этот класс, это выражение будет выбирать любое количество элементов.

$('.myCssClass');

Выбранный элемент может быть присвоен переменной javascript, например так:

var myDivElement = $('#myDivId');

Обычно выбранные элементы задействуются другими функциями jQuery:

// получаем значение элемента
var myValue = $('#myDivId').val();
// устанавливаем значение элемента
$('#myDivId').val("hello world");

Выбирая элементы по имени класса, лучше использовать составной селектор. Если отбор идет по id, то логично использовать именно id.

$('#myDivId'); // лучше
$('div#myDivId'); // хуже
$('span.myCssClass'); // лучше
$('.myCssClass'); // хуже

Как проверить имеет ли элемент специфический класс?

Вы можете использовать метод is() (см. jQuery API: Traversing – обход DOM) вместе с подходящим селектором.

if ( $('#myDiv').is('.pretty') )
   $('#myDiv').show();

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

if ( $('#myDiv').is(':hidden') )
   $('#myDiv').show();

Иногда также бывает вопрос: имеет ли jQuery hasClass (см. jQuery API: Attributes – атрибуты) метод?

Заметьте, что hasClass был добавлен начиная с версии 1.2, чтобы обрабатывать наиболее распространенное использование метода is().

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

В этом коде добавляется некая анимация для элемента(ов) с классом protected. Обратите внимание, что имя класса тут записывается без точки.

Как проверить существование элемента?

Вы можете использовать свойство length набора jQuery, возвращенного селектором.

if ( $('#myDiv').length )
  $('#myDiv').show();

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

$('#myDiv').show();

Как определить состояние переключаемого элемента?

Вы можете проверить состояние, используя селекторы :visible или :hidden (см. jQuery API: Selectors – селекторы jQuery: фильтры контента, visibility-фильтры, фильтры атрибутов, child-фильтры).

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Если Вы хотите воздейстовать на элемент, основываясь на его видимости, просто включите «:visible» или «:hidden» в выражение селектора. Например:

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Как выбирать элементы, которые имеют специфические символы в id?

Например, это может быть обычным для некоторых фреймворков, генерирующих уникальные id, которые имеют специальные символы в них (такие как ‘.’ или ‘[..]‘). Проблема состоит в том, что эти символы имеют специальное значение в CSS. Как поступать в таких случаях, смотрите на следующих примерах:

$("#some.id") // это не работает!
$("#some\\.id") // а это работает!
$("#some[id]") // это не работает!
$("#some\\[id\\]") // а это работает!

Как разрешать/запрещать использование элемента?

Вы можете разрешать/запрещать элемент, устанавливая атрибут ‘disabled’ в значение ‘disabled’ (чтобы запретить использование элемента) или присвоить тому же атрибуту пустое значение », или же просто удалить атрибут ‘disabled’ (чтобы разрешить использование элемента). Код может выглядеть примерно следующим образом:

// запрещаем использование элемента #x
$("#x").attr("disabled","disabled");
// разрешаем  использование элемента #x
$("#x").attr("disabled","");
// разрешаем  использование элемента #x
$("#x").removeAttr("disabled");

Вы можете попробовать следующий пример:

и посмотреть его исходный код:

<select id="x" style="width:200px;">
  <option>Один</option>
  <option>Два</option>
  <option>Три</option>
</select>
<input type="button" value="Disable" onclick="$('#x').attr('disabled','disabled')"/>
<input type="button" value="Enable" onclick="$('#x').removeAttr('disabled')"/>

Как отметить/снять отметку с элемента checkbox?

Вы можете отметить/снять отметку c элемента checkbox, устанавливая атрибуту ‘checked’ значение ‘checked’ (чтобы отметить элемент) или установить атрибуту ‘checked’ пустое значение «» (чтобы снять отметку). Пример кода приведен ниже:

// отмечаем checkbox с id="c"
$("#c").attr("checked", "checked");
// снимаем отметку checkbox'а с id="c"
$("#c").attr("checked","");

Вы можете попробовать следующий пример:

и посмотреть его исходный код:

<label><input type="checkbox" id="c"/>это подопытный checkbox</label>
<input type="button" value="Check" onclick='$("#c").attr("checked","checked")'/>
<input type="button" value="Uncheck" onclick='$("#c").attr("checked","")'/>

Как получать значения выбранной опции элемента select?

Элементы select обычно имеют два значения, к которым нужно обратиться. Это значение атрибута value соответствующего элемента option и его текстовое значение. Для примера возьмем следующий код:

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>

Вот так можно получить значение атрибута value, выбранной опции:

$("select#myselect").val();

А вот так можно получить текст выбранной опции:

$("#myselect option:selected").text();

Вы можете попробовать следующий пример:

и посмотреть его исходный код:

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>
<input type="button" value="Get Value" onclick="alert($('#myselect').val())"/>
<input type="button" value="Get Text Value" onclick="alert($('#myselect option:selected').text())"/>

Basics:

show()

возвращает: jQuery
Отображает каждый из элементов набора, если они были скрыты через вызов hide() или через display:none в таблице стилей. Действует подобно show(speed,[callback]), только без анимационных эффектов. Если элемент не был скрыт, то ничего не происходит.

Показываем все параграфы, которые были скрыты.

$("p").show();

Откройте пример в отдельном окне и посмотрите исходный код.

show(speed, [callback])

возвращает: jQuery
Отображает все элементы набора с использованием анимационных эффектов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Высота, ширина и прозрачность каждого элемента набора может быть изменена динамически, с определенной скоростью.

Показываем все скрытые параграфы. Используем в качестве параметра ключевое слово slow. При этом анимация выполняется в течение 600 миллисекунд.

$("button").click(function () {
  $("p").show("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Показываем все скрытые элементы div по порядку, используя ключевое слово fast. Каждая анимация занимает 200 миллисекунд и по завершении очередной стартует следующая.

$("#showr").click(function () {
  $("div:eq(0)").show("fast", function () {
    // use callee so don't have to name the function
    $(this).next().show("fast", arguments.callee);
  });
});
$("#hidr").click(function () {
  $("div").hide(2000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргумент speed – строка или число. Если передается строка, она может принимать предопределенные значения – «slow», «normal» или «fast». Число – длительность эффекта в миллисекундах, например 1000.
Аргумент callback – функция, вызываемая по завершении эффекта. Выполняется один раз для каждого элемента набора.

hide()

возвращает: jQuery
Скрывает каждый из элементов набора, если они отображались. Действует подобно hide(speed, [callback]), но без анимационных эффектов. Если элемент был скрыт – ничего не происходит.
В примере один параграф скрыт изначально, второй – скрывается кликом по ссылке.

$("p").hide();
$("a").click(function () {
  $(this).hide();
  return false;
});

Откройте пример в отдельном окне и посмотрите исходный код.

hide(speed, [callback])

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

Скрываем все видимые параграфы. Используем в качестве параметра ключевое слово slow. При этом анимация выполняется в течение 600 миллисекунд.

$("button").click(function () {
  $("p").hide("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Кликом по кнопке Hide, скрываем все элементы span по порядку, используя ключевое слово fast. Каждая анимация занимает 200 миллисекунд и по завершении очередной стартует следующая.

$("#hidr").click(function () {
  $("span:last-child").hide("fast", function () {
    // use callee so don't have to name the function
    $(this).prev().hide("fast", arguments.callee);
  });
});
$("#showr").click(function () {
  $("span").show(2000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Скрываем элементы div по клику на них в течение 2 секунд и когда элемент уже скрыт, удаляем его. Попробуйте очень быстро покликать по div’ам.

for (var i = 0; i < 5; i++) {
  $("<div>").appendTo(document.body);
}
$("div").click(function () {
  $(this).hide(2000, function () {
    $(this).remove();
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргумент speed – строка или число. Если передается строка, она может принимать предопределенные значения – «slow», «normal» или «fast». Число – длительность эффекта в миллисекундах, например 1000.
Аргумент callback – функция, вызываемая по завершении эффекта. Выполняется один раз для каждого элемента набора.

toggle()

возвращает: jQuery
Переключает отображение каждого из элементов набора. Если они были скрыты – отображает их и наоборот.

Переключаем параграфы с помощью кнопки.

$("button").click(function () {
  $("p").toggle();
});

Откройте пример в отдельном окне и посмотрите исходный код.

Sliding:

slideDown(speed, [callback])

возвращает: jQuery
Открывает все элементы набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.

Открываем все элементы input, используя эффект «скольжения вниз». Время анимации 1000 мс. Как только анимация выполнена – вызывается функция, которая изменяет некоторые css-свойства элементов input. А в особенности среднего элемента, которому передается фокус.

$("div").click(function () {
  $(this).css({ borderStyle:"inset", cursor:"wait" });
  $("input").slideDown(1000,function(){
    $(this).css("border", "2px red inset")
           .filter(".middle")
           .css("background", "yellow")
           .focus();
    $("div").css("visibility", "hidden");
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

Открываем, «скользя вниз», все элементы div. Для задания времени используем ключевое слово «slow», т.е. открываем медленно.

$(document.body).click(function () {
  if ($("div:first").is(":hidden")) {
    $("div").slideDown("slow");
  } else {
    $("div").hide();
  }
});

Откройте пример в отдельном окне и посмотрите исходный код.

slideDown принимает те же аргументы, что и show или hide.

slideUp(speed, [callback])

возвращает: jQuery
Скрывает все элементы набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.

Скрываем все параграфы, используя эффект «скольжения вверх». Время анимации 2000 мс. Как только анимация выполнена – вызывается функция, которая покажет сообщение о том, какой именно параграф был скрыт.

$("button").click(function () {
  $(this).parent().slideUp("slow", function () {
    $("#msg").text($("button", this)
    .text() + " - сделано!");
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

Скрываем, «скользя вверх», все элементы div. Время не задаем. По умолчанию эффект будет выполнен примерно за 400 мс.

$(document.body).click(function () {
  if ($("div:first").is(":hidden")) {
    $("div").show("slow");
  } else {
    $("div").slideUp();
  }
});

Откройте пример в отдельном окне и посмотрите исходный код.

slideUp принимает те же аргументы, что и show или hide.

slideToggle(speed, [callback])

возвращает: jQuery
Переключает видимость всех элементов набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.

Скрываем и отображаем все параграфы.

$("button").click(function () {
  $("p").slideToggle("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Анимируем элементы div, находящиеся между разделителями.

$("button").click(function () {
  $("div:not(.still)").slideToggle("slow", function () {
    var n = parseInt($("span").text(), 10);
    $("span").text(n + 1);
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

slideToggle принимает те же аргументы, что и show или hide.

Fading:

fadeIn(speed, [callback])

возвращает: jQuery
Делает видимыми все элементы набора, используя изменение прозрачности элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому «проявляемый» элемент уже должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.

«Проявляем» скрытые элементы div один за другим, каждый раз анимационный эффект занимает время примерно в 600 мс.

$(document.body).click(function () {
  $("div:hidden:first").fadeIn("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

«Проявляем» красный блок поверх текста. По завершении этой анимации запускается следующий эффект, который «проявляет» тэг span.

$("a").click(function () {
  $("div").fadeIn(3000, function () {
    $("span").fadeIn(100);
  });
  return false;
});

Откройте пример в отдельном окне и посмотрите исходный код.

fadeIn принимает те же аргументы, что и show или hide.

fadeOut(speed, [callback])

возвращает: jQuery
Делает невидимыми все элементы набора, используя изменение прозрачности элементов (эффект «затухания»). Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому скрываемый элемент должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.

Скрываем все параграфы, используя эффект «затухания». Продолжительность эффекта примерно 600 мс.

$("p").click(function () {
  $("p").fadeOut("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Проведите мышью над текстом. Кликните там, где при наведении курсора появится желтый бэкграунд. Это один из нескольких элементов span. По клику на нем он будет скрыт с использованием эффекта «затухания».

$("span").click(function () {
  $(this).fadeOut(1000, function () {
    $("div").text("'" + $(this).text() + "' has faded!");
    $(this).remove();
  });
});
$("span").hover(function () {
    $(this).addClass("hilite");
  }, function () {
    $(this).removeClass("hilite");
});

Откройте пример в отдельном окне и посмотрите исходный код.

fadeOut принимает те же аргументы, что и show или hide.

fadeTo(speed, opacity, [callback])

возвращает: jQuery
Делает невидимыми все элементы набора, используя изменение прозрачности элементов (эффект «затухания») до величины, указанной во втором аргументе. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому скрываемый элемент должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.

Кликом на первом параграфе изменяем его прозрачность до 0.33. Эффект длится примерно 600 мс. Второй параграф не меняет прозрачность.

$("p:first").click(function () {
  $(this).fadeTo("slow", 0.33);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Меняем прозрачность элементов div случайным образом. Длительность эффекта примерно 200 мс.

$("div").click(function () {
  $(this).fadeTo("fast", Math.random());
});

Откройте пример в отдельном окне и посмотрите исходный код.

fadeTo принимает те же аргументы, что и show или hide. И кроме того второй аргумент opacity – число от 0 до 1, характеризующий «целевую» прозрачность элемента.

Custom:

animate(params, [duration], [easing], [callback])

возвращает: jQuery
Это функция для построения своей, пользовательской анимации. У этой функции один обязательный аргумент, представляющий собой объект состоящий из пар ключ/значение. В качестве ключа выступает CSS-свойство, которое должно быть анимировано (например: «height», «top», or «opacity»).

Обратите внимание, что свойства должны быть определены с использованием camel case (т.е. например marginLeft вместо margin-left).

В качестве значения выступает «целевое» значение соответствующего CSS-свойства. Например, если в качестве значения выступает какая-либо цифра, то соответвующее свойство будет трансформировано из своего текущего состояния, в новое состояние.

Обратите внимание, что поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или «hide», «show», «toggle»). Например backgroundColor не поддерживается.

Начиная с версии jQuery 1.2 можно определять значения свойств, используя «em» или %. Также начиная с версии jQuery 1.2 можно использовать «относительную» анимацию, т.е. определять значения соответствующего свойства относительно его текущей позиции (используя «+=» или «-=») чтобы передвигать элемент в положительную или отрицательную стороны.
Кликните по кнопке, чтобы запустить анимацию для элемента div.

$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});

Откройте пример в отдельном окне и посмотрите исходный код.

Пример «относительной» анимации. Покликайте несколько раз по кнопкам вправо/влево…

$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы, принимаемые этой функцией:
params – набор атрибутов стилей, которые Вы хотите анимировать.
duration (Optional) – строка, представляющая собой ключевое слово («slow», «normal», или «fast») или число, указываюее длительность эффекта в миллисекундах.
easing (Optional) – строка, представляющая собой имя эффекта плагина easing. Имеет два встроенных значения «linear» и «swing». Используется только с плагином.
callback (Optional) – функция, которая может быть вызвана по завершении анимации каждого элемента набора.

animate(params, options)

возвращает: jQuery
Это функция для построения своей, пользовательской анимации. Аргумент params представляет собой объект, состоящий из пар ключ/значение. В качестве ключа выступает CSS-свойство, которое должно быть анимировано (например: «height», «top», или «opacity»).

Обратите внимание, что свойства должны быть определены с использованием camel case (т.е. например marginLeft вместо margin-left).

В качестве значения выступает «целевое» значение соответствующего CSS-свойства. Например, если в качестве значения выступает какая-либо цифра, то соответвующее свойство будет трансформировано из своего текущего состояния, в новое состояние. Или же если значение представлено в виде строки («hide», «show», или «toggle»), анимация для этого свойства будет создана со значениями по умолчанию.
Отдельно стоит поговорить об аргументе options. В нем также может быть передана длительность соответствующего эффекта анимации (как с использованием числовых значений в миллисекундах, так и с помощью клюючевых слов). Также может быть использовано имя эффекта при использовании плагина easing. С помощью опции complete может быть вызвана функция, которая будет выполнена по завершении анимации для каждого элемента набора.
Обязательно надо упомянуть о queue (добавлено в jQuery 1.2). Он принимает значения true (по умолчанию) или false. Если установить queue:false, это даст возможность выполнить анимационный эффект вне очереди, параллельно со следующим эффектом (если такой есть конечно).

Посмотрите следующий пример – будет намного понятнее.
Первая кнопка как раз демонстрирует пример такой параллельной анимации. Некий элемент с идентификатором #block1 должен изменить свою ширину до 90% от возможной, шрифт должен быть установлен в размер 24px и правая рамка должна стать шириной 15px. Обратите внимание, что изменение ширины происходит одновременно с другими двумя эффектами, которые уже следуют друг за другом в порядке очереди.
Вторая кнопка запускает почти такую же анимацию, вот только все эффекты следуют друг за другом строго по очереди.

$("#go1").click(function(){
  $("#block1").animate( { width:"90%" },
             { queue:false, duration:3000 } )
    .animate( { fontSize:"24px" }, 1500 )
    .animate( { borderRightWidth:"15px" }, 1500);
});
$("#go2").click(function(){
  $("#block2").animate( { width:"90%"}, 1000 )
    .animate( { fontSize:"24px" } , 1000 )
    .animate( { borderLeftWidth:"15px" }, 1000);
});
$("#go3").click(function(){
  $("#go1").add("#go2").click();
});
$("#go4").click(function(){
  $("div").css({width:"", fontSize:"", borderWidth:""});
});

Откройте пример в отдельном окне и посмотрите исходный код.

stop()

возвращает: jQuery
Останавливает все выполняющиеся анимационные эффекты для всех элементов набора.

Кликните по кнопке Go, чтобы запустить анимацию. Затем по кнопке Stop, чтобы ее остановить. Ну а клик по кнопке Back запустит другой анимационный эффект – блок будет двигаться в обратную сторону. Заметьте, что отсчет будет вестить от той позиции в которой блок был остановлен.

// Запускаем анимацию
$("#go").click(function(){
  $(".block").animate({left: '+=100px'}, 2000);
});
// Останавливаем анимацию
$("#stop").click(function(){
  $(".block").stop();
});
// Запускаем в другом направлении
$("#back").click(function(){
  $(".block").animate({left: '-=100px'}, 2000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

queue()

возвращает: Array
Возвращает ссылку на очередь элемента (массив функций).

Разберите этот пример. По клику на кнопке мы получаем длину очереди в текущий момент.

$("#show").click(function () {
  var n = $("div").queue("fx");
  $("span").text("Длина очереди: " + n.length);
});
function runIt() {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").slideToggle(1000);
  $("div").slideToggle("fast");
  $("div").animate({left:'-=200'},1500);
  $("div").hide("slow");
  $("div").show(1200);
  $("div").slideUp("normal", runIt);
}
runIt();

Откройте пример в отдельном окне и посмотрите исходный код.

queue(callback)

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

В примере: очередь пользовательских функций.

$(document.body).click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});

Откройте пример в отдельном окне и посмотрите исходный код.

queue(queue)

возвращает: jQuery
Заменяет очередь для всех элементов набора новой очередью (массив функций).

В примере, по клику на кнопке Stop, устанавливается массив очереди, чтобы удалить текущую очередь. По клику на кнопке Start очередь запускается вновь.

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
});

Откройте пример в отдельном окне и посмотрите исходный код.

dequeue()

возвращает: jQuery
Удаляет поставленную в конец очереди функцию, разрешая очереди продолжаться.

В примере dequeue используется, чтобы разрешить очереди продолжиться после использования queue(callback). Попробуйте убрать в примере строчку $(this).dequeue(); и Вы обнаружите, что анимация остановится после срабатывания toggleClass.

$("button").click(function () {
  $("div").animate({left:'+=200px'}, 2000);
  $("div").animate({top:'0px'}, 600);
  $("div").queue(function () {
    $(this).toggleClass("red");
    $(this).dequeue();
  });
  $("div").animate({left:'10px', top:'30px'}, 700);
});

Откройте пример в отдельном окне и посмотрите исходный код.

В общем про анимационные эффекты библиотеки jQuery вроде бы все.

Interaction Helpers:

hover(over, out)

возвращает: jQuery
Симулирует hovering – отслеживание входа указателя мыши в пределы объекта и выхода за его пределы. Всякий раз, когда указатель мыши оказывается поверх объекта, вызывается функция, переданная в качестве первого аргумента. Аналогично, когда указатель мыши выходит за пределы объекта – вызывается функция, которая является вторым аргументом.

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

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

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

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);

Откройте пример в отдельном окне и посмотрите исходный код.

toggle(fn, fn1)

возвращает: jQuery
Переключается между двумя функциями, которые по очереди вызываются каждым следующим кликом. Каждый раз, когда клик совершен на выбранном элементе, срабатывает первая функция. Если на том же элементе совершен еще один клик – срабатывает вторая функция. Каждый следующий клик продолжает переключение между этими двумя функциями. Можно использовать unbind(«click»), чтобы отменить действие toggle().

Чтобы добавить специальный стиль для ячейки таблицы по которой был совершен клик, можно сделать так:

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

В следующем примере мы применяем и следующим кликом отменяем стили для каждого элемента списка.

$("li").toggle(
  function () {
    $(this).css("list-style-type", "disc")
      .css("color", "blue");
  },
  function () {
    $(this).css({"list-style-type":"", "color":""});
  }
);

Откройте пример в отдельном окне и посмотрите исходный код.

Event Helpers:

blur()

возвращает: jQuery
Вызывает событие blur для всех элементов набора. В этом случае будут вызваны все функции, связанные с этим событием blur и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием blur. Событие blur обычно вызывается, когда элемент теряет фокус через действие указывающего устройства или клавиши Tab.

Вызываем событие blur для всех параграфов:

$("p").blur();

blur(fn)

возвращает: jQuery
Связывает функцию с событием blur для всех элементов набора.

Чтобы выводить в alert сообщение «Hello World!» каждый раз, когда для любого параграфа наступает событие blur, надо сделать следующее:

$("p").blur( function () { alert("Hello World!"); } );

change()

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

change(fn)

возвращает: jQuery
Связывает функцию с событием change для всех элементов набора.

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

$("input:text").change( function() {
  // здесь проверяем ввод на валидность
});

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

$("select").change(function () {
  var str = "";
  $("select option:selected").each(function () {
    str += $(this).text() + " ";
  });
  $("div").text(str);
}).change();

Откройте пример в отдельном окне и посмотрите исходный код.

click()

возвращает: jQuery
Вызывает событие click для каждого элемента набора. В этом случае будут вызваны все функции, связанные с этим обытием.

Чтобы вызвать событие click для всех параграфов на странице:

$("p").click();

click(fn)

возвращает: jQuery
Связывает функцию с событием click для всех элементов набора. Событие click наступает, когда кнопка указывающего устройства (например мышь) кликнута на элементе. Клик определяется как mousedown + mouseup в некотором месте экрана.

Чтобы скрыть параграфы на странице, на них необходимо кликнуть. Здесь hover() используется просто для эффекта.

$("p").click(function () {
  $(this).slideUp();
});
$("p").hover(function () {
  $(this).addClass("hilite");
}, function () {
  $(this).removeClass("hilite");
});

Откройте пример в отдельном окне и посмотрите исходный код.

dblclick()

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

dblclick(fn)

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

Чтобы выводить в alert сообщение «Hello World!» каждый раз, когда для любого параграфа наступает событие dblclick, надо сделать следующее:

$("p").dblclick( function () { alert("Hello World!"); });

В следующем примере двойной клик по элементу div, переключает его цвет.

var divdbl = $("div:first");
divdbl.dblclick(function () {
  divdbl.toggleClass('dbl');
});

Откройте пример в отдельном окне и посмотрите исходный код.

error()

возвращает: jQuery
Вызывает событие error для каждого элемента набора. В этом случае будут вызваны все функции, связанные с этим событием error и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием error. Событие error обычно вызывается, когда элемент теряет фокус через действие указывающего устройства или клавиши Tab.

error(fn)

возвращает: jQuery
Связывает функцию с событием error для каждого элемента набора.
Для события error нет общих стандартов. В большинстве браузеров, событие error объекта window вызывается, когда на странице обнаружена ошибка JavaScript. Для объекта image событие error вызывается при некорректном содержимом атрибута src – например, несуществующий файл.

Если событие произошло в объекте window, обработчик события передает три параметра:

• сообщение, описывающее событие («varName is not defined», «missing operator in expression», и т.д.);
• полный URL документа, который содержит ошибку;
• номер строки, в которой произошла ошибка;

Если обработчик события вернет true, это означает, что событие было обработано и браузер не показывает никаких ошибок.

Чтобы сохранить лог ошибок JavaScript на стороне сервера, можно попробовать сделать так:

$(window).error(function(msg, url, line){
  jQuery.post("js_error_log.php",
    { msg: msg, url: url, line: line });
});

Чтобы скрыть от пользователя ошибки JavaScript, попробуйте:

$(window).error(function(){
  return true;
});

Чтобы скрыть иконку «broken image» от пользователей IE, можно попытаться сделать так:

$("img").error(function(){
  $(this).hide();
});

focus()

возвращает: jQuery
Вызывает событие focus для каждого элемента набора. В этом случае будут вызваны все функции, связанные с этим событием focus.

Чтобы при загрузке страницы сразу передать фокус элементу с идентификатором ‘login’, сделайте следующее:

$(document).ready(function(){
  $("#login").focus();
});

focus(fn)

возвращает: jQuery
Связывает функцию с событием focus для каждого элемента набора. Событие focus вызывается, когда элемент получает фокус через указатель мыши или клавишу Tab.

Чтобы запретить пользователю писать что-либо в поле ввода, сделайте так:

$("input[@type=text]").focus(function(){
  $(this).blur();
});

В этом примере как только элемент input получает фокус, отображается следующий сразу за ним элемент span и в течении одной секунды «затухает».

$("input").focus(function () {
  $(this).next("span").css('display','inline')
    .fadeOut(1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

keydown()

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

keydown(fn)

возвращает: jQuery
Связывает функцию с событием keydown для каждого элемента набора. Событие keydown обычно вызывается, когда на клавиатуре нажата какая-либо клавиша.

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

$(window).keydown(function(event){
  switch (event.keyCode) {
    // ...
    // разные клавиши выполняют разные сценарии
    // разные браузеры могут предоставлять разные коды
    // чтобы узнать больше смотрите тут
    // http://unixpapa.com/js/key.html
    // ...
  }
});

keypress()

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

keypress(fn)

возвращает: jQuery
Связывает функцию с событием keypress для каждого элемента набора. Событие keypress обычно вызывается, когда на клавиатуре была нажата какая-либо клавиша. Событие keypress определяется как keydown + keyup на какой-либо клавише.

В этом примере мы показываем код нажатой клавиши, но добавляем в строку только буквы латинского алфавита и пробелы.

$("input").keypress(function (e) {
if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25) || (97 <= e.which && e.which <= 97 + 25)) {
  var c = String.fromCharCode(e.which);
  $("p").append($("<span></span>")).children(":last").append(document.createTextNode(c));
} else if ( e.which == 8 ) {
  // backspace in IE only be on keydown
  $("p").children(":last").remove();
}
$("div").text(e.which);
});

Откройте пример в отдельном окне и посмотрите исходный код.

keyup()

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

keyup(fn)

возвращает: jQuery
Связывает функцию с событием keyup для каждого элемента набора. Событие keyup обычно вызывается, когда на клавиатуре была отпущена какая-либо клавиша.

Небольшой пример демонстрирует, как выполнить какое-либо действие в тот момент, когда отпущена клавиша escape:

$(document).keyup(function(event){
  if (event.keyCode == 27) {
    alert('escaped!');
  }
});

load(fn)

возвращает: jQuery
Связывает функцию с событием load для каждого элемента набора. Будучи связанным с элементом window, это событие вызывается только тогда, когда агент пользователя завершит загрузку всего содержимого документа (фреймы, объекты, графику). Для элементов это вызывается, когда целевой элемент и все его содержимое полностью загружено.
Необходимо помнить, что load будет работать только в том случае, если он определен перед элементом, полной загрузки которого мы ожидаем. Если же его определить после такого элемента – ничего не произойдет.
В этом примере некоторый код будет выполнен только после полной загрузки страницы, включая и графику.

$(window).load(function () {
  // выполняем некоторый код
});

mousedown(fn)

возвращает: jQuery
Связывает функцию с событием mousedown для каждого элемента набора. Событие mousedown обычно вызывается, когда клавиша указывающего устройства (мыши) была нажата на элементе.

В этом примере добавляется текст сообщений, когда происходят события mouseup и mousedown на элементе p.

$("p").mouseup(function(){
  $(this).append('<span style="color: #ff0000">Up!</span>');
}).mousedown(function(){
  $(this).append('<span style="color: #0000ff">Down!</span>');
});

Откройте пример в отдельном окне и посмотрите исходный код.

mousemove(fn)

возвращает: jQuery
Связывает функцию с событием mousemove для каждого элемента набора. Событие mousemove обычно вызывается, когда указатель мыши перемещается поверх элемента. Обработчик события принимает один аргумент – объект события, в свойствах clientX и clientY которого представлены координаты указателя мыши.

В этом примере показываем координаты указателя мыши в то время, как указатель перемещается над элементом div.

Примите во внимание, что здесь пример демонстрируется во фрейме, поэтому координаты курсора высчитываются относительно этого фрейма.

$("div").mousemove(function(e){
  var pCoords = "( "+e.pageX+", "+e.pageY+" )";
  var cCoords = "( "+e.clientX+", "+e.clientY+" )";
  $("span:first").text("e.pageX,e.pageY-" + pCoords);
  $("span:last").text("e.clientX,e.clientY-" + cCoords);
});

Откройте пример в отдельном окне и посмотрите исходный код.

mouseout(fn)

возвращает: jQuery
Связывает функцию с событием mouseout для каждого элемента набора. Событие mouseout обычно вызывается, когда указатель мыши выходит за пределы элемента.

В этом примере показываются сообщения, когда происходят события mouseover и mouseout. Событие mouseout вызывается, когда указатель мыши перемещается в/из дочернего элемента, тогда как для mouseleave этого не происходит.

var i = 0;
$("div.overout").mouseout(function(){
  $("p:first",this).text("мышь out");
  $("p:last",this).text(++i);
}).mouseover(function(){
  $("p:first",this).text("мышь over");
});
var n = 0;
$("div.enterleave").bind("mouseenter",function(){
  $("p:first",this).text("мышь пришла");
}).bind("mouseleave",function(){
  $("p:first",this).text("мышь ушла");
  $("p:last",this).text(++n);
});

Откройте пример в отдельном окне и посмотрите исходный код.

mouseover(fn)

возвращает: jQuery
Связывает функцию с событием mouseover для каждого элемента набора. Событие mouseover обычно вызывается, когда указатель мыши находится в пределах элемента.
В этом примере показываются сообщения, когда происходят события mouseover и mouseout. Событие mouseover вызывается, когда указатель мыши перемещается в/из дочернего элемента, тогда как для mouseleave этого не происходит.

var i = 0;
$("div.overout").mouseover(function(){
  $("p:first",this).text("мышь over");
  $("p:last",this).text(++i);
}).mouseout(function(){
  $("p:first",this).text("мышь out");
});
var n = 0;
$("div.enterleave").bind("mouseenter",function(){
  $("p:first",this).text("мышь пришла");
  $("p:last",this).text(++n);
}).bind("mouseleave",function(){
  $("p:first",this).text("мышь ушла");
});

Откройте пример в отдельном окне и посмотрите исходный код.

mouseup(fn)

возвращает: jQuery
Связывает функцию с событием mouseup для каждого элемента набора. Событие mouseup обычно вызывается, когда клавиша указывающего устройства (мыши) была отпущена на элементе.

В этом примере добавляется текст сообщений, когда происходят события mouseup и mousedown на элементе p.

$("p").mouseup(function(){
  $(this).append('<span style="color: #ff0000">Up!</span>');
}).mousedown(function(){
  $(this).append('<span style="color: #0000ff">Down!</span>');
});

Откройте пример в отдельном окне и посмотрите исходный код.

resize(fn)

возвращает: jQuery
Связывает функцию с событием resize для каждого элемента набора. Событие resize обычно вызывается, когда изменяются размеры области просмотра документа.

Чтобы сделать изменение размеров окна головной болью, попробуйте сделать так:

$(window).resize(function(){
  alert("Stop it!");
});

scroll(fn)

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

Что бы делать что-нибудь, отслеживая прокрутку области просмотра документа:

$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$(window).scroll(function () {
  $("span").css("display", "inline").fadeOut("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

select()

возвращает: jQuery
Вызывает событие select для всех элементов набора. В этом случае будут вызваны все функции, связанные с этим событием select и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием select.
Не стоит путать событие «select» с событием «change», которое вызывается, когда HTML-элемент select используется для выбора какой(их)-либо опций.

Чтобы вызвать событие select для всех элементов input, попробуйте сделать так:

$("input").select();

select(fn)

возвращает: jQuery
Связывает функцию с событием select для каждого элемента набора. Событие select обычно вызывается, когда пользователь выделяет какой-либо текст в текстовом поле, например input и textarea.

Чтобы выполнить какие-либо действия, когда выделяется текст в элементах ввода текста:

$(document).select( function () {
  $("div").text("Что-то было выделено!")
  .show().fadeOut(1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

submit()

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

Чтобы вызвать событие submit для первой формы на странице, надо сделать так:

$("form:first").submit();

submit(fn)

возвращает: jQuery
Связывает функцию с событием submit для каждого элемента набора. Событие submit обычно вызывается, когда форма отправляется.

Чтобы предотвратить отправку формы, если какая-либо переменная не установлена, сделайте:

$("form").submit( function () {
  return this.some_flag_variable;
} );

Или более подробный пример на ту же тему:

$("form").submit(function() {
  if ($("input:first").val() == "correct") {
    $("span").text("Проверяем...").show();
    return true;
  }
  $("span").text("Неправильно!")
      .show().fadeOut(1000);
  return false;
});

Откройте пример в отдельном окне и посмотрите исходный код.

unload(fn)

возвращает: jQuery
Связывает функцию с событием unload для каждого элемента набора.

Чтобы попрощаться с посетителем, выведя сообщение в alert в то время когда страница закрывается:

$(window).unload( function () { alert("Bye now!"); } );

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

Page Load:

ready(fn)

возвращает: jQuery
Назначает функции, которые будут выполняться всякий раз, когда объектная модель документа (DOM) готова к использованию. Это наверное самая важная функция, включенная в раздел «События», поскольку она может улучшить время реакции веб-приложений, и хорошая альтернатива использованию события window.onload, поскольку при использовании этого метода, Ваши функции будут вызваны уже в тот момент, когда объектная модель документа (DOM) готова к работе. Здесь не нужно ожидать, когда страница будет полностью загружена.

Аргумент, передаваемый обработчику события, является ссылкой на функцию jQuery. Можно использовать jQuery или $ без риска возникновения коллизий в пространстве имен. Однако необходимо убедиться в том, что не имеет обработчика события onload, в противном случае $(document).ready() может не выполниться.

На странице можно иметь сколь угодно много $(document).ready событий. В этом случае функции, связанные с ними, будут выполняться в порядке их следования.

В этом примере мы покажем сообщение о том, что DOM загружена и готова к работе.

$(document).ready(function(){
  $("p:first")
    .text("DOM загружена и готова к работе!");
});
// еще раз тоже самое
jQuery(document).ready(function(){
  jQuery("p:last")
    .text("Объектная модель документа готова!");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Event Handling:

bind(type, [data], fn)

возвращает: jQuery
Связывает обработчик с одним или более событиями (например click) для каждого элемента набора. Может также связывать пользовательские события. Возможные события: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error. Обработчик события принимает объект событие, что делает возможным предотвращение поведения по умолчанию. Чтобы предотвратить и поведение по умолчанию и «всплывание» события (т.е. передачу события от одного элемента другому), обработчик должен возвращать false.

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

$("p").bind("click", function(){
  alert( $(this).text() );
});

В случае, если это невозможно, следует передавать дополнительные данные во втором параметре [data] (см. пример).

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler);

Чтобы отменить действие по умолчанию и предотвратить «всплывание», возвращаем false:

$("form").bind("submit", function() { return false; });

Чтобы отменить только действие по умолчанию используется метод preventDefault.

$("form").bind("submit", function(event){
  event.preventDefault();
});

Для предотвращения «всплывания» события используется метод stopPropagation.

$("form").bind("submit", function(event){
  event.stopPropagation();
});

Также можно связать некие пользовательские события.

$("p").bind("myCustomEvent", function(e,myName,myValue){
  $(this).text(myName + ", hi there!");
  $("span").stop().css("opacity", 1)
    .text("myName = " + myName)
    .fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
  $("p").trigger("myCustomEvent", [ "John" ]);
});

Откройте пример в отдельном окне и посмотрите исходный код.

В следующем примере демонстрируется обработка событий click и double-click на параграфе.

$("p").bind("click", function(e){
  var str = "( " + e.pageX + ", " + e.pageY + " )";
  $("span").text("Кликнуто! " + str);
});
$("p").bind("dblclick", function(){
  $("span").text("Двойной клик сделан на "+this.tagName);
});
$("p").bind("mouseenter mouseleave", function(e){
  $(this).toggleClass("over");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Примите во внимание, что пример демонстрируется во фрейме, соответственно и координаты вычисляются относительно фрейма.

one(type, [data], fn)

возвращает: jQuery
Связывает обработчик с одним или более событиями, которые будут выполнены только один раз, для каждого элемента в наборе. Обработчик исполняется только один раз для каждого элемента. В остальном действуют те же правила, описанные при применении bind(). Обработчик события принимает объект событие, что делает возможным предотвращение поведения по умолчанию. Чтобы предотвратить и поведение по умолчанию и «всплывание» события (т.е. передачу события от одного элемента другому), обработчик должен возвращать false.

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

$("p").one("click", function(){
  alert( $(this).text() );
});

В случае, если это невозможно, следует передавать дополнительные данные во втором параметре [data]. В следующем примере связываем «одноразовый» клик с каждым элементом div.

var n = 0;
$("div").one("click", function(){
  var index = $("div").index(this);
  $(this).css({ borderStyle:"inset", cursor:"auto" });
  $("p").text("DIV с индексом #" + index + " кликнут." +
  "  Всего " + ++n + " кликов.");
});

Откройте пример в отдельном окне и посмотрите исходный код.

trigger(type, [data])

возвращает: jQuery
Вызывает событие (переданное в type) для каждого элемента набора. Однако это также вызовет выполнение браузером действий по умолчанию для этого события. Например, передавая ’submit’ в функцию trigger() Вы заставите браузер отправить форму. Действия браузера по умолчанию можно предотвратить, возвращая false для одной из функций, связанных с событием.

Чтобы отправить первую форму без использования submit(), надо проделать следующее:

$("form:first").trigger("submit");

Чтобы передать произвольные данные событию:

$("p").click( function (event, a, b) {
  // при обычном клике по параграфу,
  // a и b остаются неопределенными
  // при клике вызванном через trigger(),
  // a ссылается на "foo", b ссылается на "bar".
} ).trigger("click", ["foo", "bar"]);

В этом примере будет яснее. Следующий код выводит «Hello World!» в alert.

$("p").bind("myEvent", function (event,mess1,mess2) {
  alert(mess1 + ' ' + mess2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

Также можно вызывать пользовательские события, зарегистрированные в bind. В этом примере клик по button #2 вызывает клик по button #1. Но не наоборот.

$("button:first").click(function () {
  update($("span:first"));
});
$("button:last").click(function () {
  $("button:first").trigger('click');
  update($("span:last"));
});
function update(j) {
  var n = parseInt(j.text(), 0);
  j.text(n + 1);
}

Откройте пример в отдельном окне и посмотрите исходный код.

triggerHandler(type, [data])

возвращает: jQuery
Это особенный метод вызова всех связанных с элементом обработчиков событий БЕЗ выполнения браузером действий по умолчанию. Событие вызывается только для первого элемента, включенного в набор. Если набор элементов пуст, этот метод вернет ‘undefined’.

Испытайте следующий пример. Если Вы вызываете trigger(), то получаете соответствующее сообщение и можете заметить как браузер ТОЖЕ совершил действие по умолчанию – передал фокус элементу input. Попробуйте теперь (убрав фокус с элемента input) вызвать triggerHandler() – сообщение Вы также получите, но действия браузера по умолчанию не произойдет.

$("#old").click(function(){
  $("input").trigger("focus");
});
$("#new").click(function(){
  $("input").triggerHandler("focus");
});
$("input").focus(function(){
  $("<span>Focused!</span>").appendTo("body")
    .fadeOut(1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

unbind([type], [data])

возвращает: jQuery
Это метод – противоположность bind, он удаляет все события связанные с элементом для каждого элемента набора. Можно также удалить пользовательские события, зарегистрированные в bind(). Если передан аргумент type – удалены будут все события этого типа.

Посмотрите внимательнее следующий пример. Нажатие на кнопку Bind, делает цветную кнопку «рабочей». Если же нажать кнопку Unbind, цветная кнопка больше не работает…

function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
  $("#theone").click(aClick).text("Can Click!");
});
$("#unbind").click(function () {
  $("#theone").unbind('click', aClick)
    .text("Does nothing...");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Ну, для первой части достаточно, а во второй, как и обещал, будем знакомиться с хэлперами…

CSS:

css(name)

возвращает: String
Возвращает значения для css-свойства, указанного в name, для первого элемента в наборе.

В этом примере, чтобы получить доступ к css-свойству background-color нужно всего лишь кликнуть по элементу div.

$("div").click(function () {
  var color = $(this).css("background-color");
  $("#result").html("Цвет этого div'а <span>"
  + color + "</span>.");
});

Откройте пример в отдельном окне и посмотрите исходный код.

css(properties)

возвращает: jQuery
Устанавливает значения для css-свойств всех элементов набора, используя объект, состоящий из пар ключ/значение. Это наилучший способ установить значения для сразу нескольких css-свойств всех элементов набора.

Посмотрите этот пример. Если указатель мыши проходит над параграфом, то для этого параграфа будет установлен желтый фон и жирное начертание текста. Когда же указатель мыши выходит за пределы параграфа – фон изменяется на серый, начертание текста становится нормальным, а сам текст становится синего цвета.

$("p").hover(function () {
  $(this).css({
    backgroundColor:"yellow",
    fontWeight:"bolder"
  });
}, function () {
  var cssObj = {
    backgroundColor: "#ddd",
    fontWeight: "",
    color: "rgb(0,40,244)"
  }
  $(this).css(cssObj);
});

Откройте пример в отдельном окне и посмотрите исходный код.

css(name, value)

возвращает: jQuery
Устанавливает значение одного css-свойства для всех элементов набора. Если в качестве значения какого-либо из css-свойств используется число, оно автоматически конвертируется в значение в пикселах.

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

$("p").mouseover(function () {
  $(this).css("color","red");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Позиционирование:

offset()

возвращает: Object{top,left}
Для первого элемента в наборе получает текущие отступы относительно точки просмотра. Возвращается объект, содержащий значения (целые числа) отступов сверху и слева. Этот метод работает только с видимыми элементами.

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

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

Откройте пример в отдельном окне и посмотрите исходный код.

Высота и ширина:

height()

возвращает: Integer
Получает текущее значение высоты в пикселах для первого элемента в наборе. Начиная с версии jQuery 1.2, этот метод позволяет найти высоту для window и document.

В этом примере мы получаем несколько значений высоты. Функция showHeight вспомогательная, просто для вывода значений в элемент div.

function showHeight(ele, h) {
  $("div").text("Высота элемента "
+ ele + " равна " + h + "px.");
}
$("#getp").click(function () {
  showHeight("paragraph", $("p").height());
});
$("#getd").click(function () {
  showHeight("document", $(document).height());
});
$("#getw").click(function () {
  showHeight("window", $(window).height());
});

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

Откройте пример в отдельном окне и посмотрите исходный код.

height(val)

возвращает: jQuery
Устанавливает высоту в CSS-свойстве для каждого элемента в наборе. Если единицы измерения не определены однозначно (например ‘em’ или ‘%’), тогда значение устанавливается в px.

В этом примере по клику на элементе div, для него устанавливается высота в 30px и заодно изменяется цвет.

$("div").one('click', function () {
  $(this).height(30).css({cursor:"auto", backgroundColor:"green"});
});

Откройте пример в отдельном окне и посмотрите исходный код.

width()

возвращает: Integer
Получает текущее значение ширины в пикселах для первого элемента в наборе. Начиная с версии jQuery 1.2, этот метод позволяет найти ширину для window и document.

В этом примере мы получаем несколько значений высоты. Функция showWidth вспомогательная, просто для вывода значений в элемент div.

function showWidth(ele, w) {
  $("div").text("Ширина элемента " + ele + " равна " + w + "px.");
}
$("#getp").click(function () {
  showWidth("paragraph", $("p").width());
});
$("#getd").click(function () {
  showWidth("document", $(document).width());
});
$("#getw").click(function () {
  showWidth("window", $(window).width());
});

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

Откройте пример в отдельном окне и посмотрите исходный код.

width(val)

возвращает: jQuery
Устанавливает ширину в CSS-свойстве для каждого элемента в наборе. Если единицы измерения не определены однозначно (например ‘em’ или ‘%’), тогда значение устанавливается в px.

В этом примере по клику на элементе div, для него устанавливается ширина в 30px и заодно изменяется цвет.

$("div").one('click', function () {
  $(this).width(30).css({cursor:"auto", "background-color":"blue"});
});

Откройте пример в отдельном окне и посмотрите исходный код.

Вот и все на сегодня. Статья получилась не очень большая, но, надеюсь эта информация пригодится многим.