• Геннадий Самков
• 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

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

• Геннадий Самков
• 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"});
});

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

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

Правда начнем мы с нескольких методов, которые уже изучали в статье jQuery API: Attributes – атрибуты, но памятуя о том, что повторение – мать учения, это будет далеко не лишним. Тем более, что их использование вполне укладывается в понятие манипулирования объектной моделью документа.

Изменение контента:

html()

возвращает: String
Получает в виде строки html-код (innerHTML) для первого элемента в наборе. Эта возможность недоступна для XML-документов (хотя это работает для XHTML-документов).

В этом примере клик мышкой на параграфе конвертирует его HTML-код в текст.

$("p").click(function () {
  var htmlStr = $(this).html();
  $(this).text(htmlStr);
});

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

html(val)

возвращает: jQuery
Устанавливает html-код для всех элементов в наборе. Эта возможность недоступна для XML-документов (хотя это работает для XHTML-документов).

В этом примере мы добавляем некоторый html-код в каждый элемент div.

$("div").html("<span class="red">Здрасссьте <strong>еще раз!</strong></span>");

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

text()

возвращает: String
Получает в виде строки текстовое содержимое всех элементов набора. Этот метод работает как с HTML, так и с XML-документами.

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

var str = $("p:first").text();
$("p:last").html(str);

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

text(val)

возвращает: jQuery
Устанавливает текстовое содержимое для всех элементов набора. Очень похоже на html(), но экранирует HTML, заменяя например «<» и «>» их HTML сущностями.

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

$("p").text("<b>Some</b> new text.");

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

Вставка внутрь:

append(content)

возвращает: jQuery
Добавляет контент внутрь всех выбранных элементов ПОСЛЕ существующего контента. Эта операция подобна применению appendChild.

В этом примере мы добавляем некий HTML-код в конец всех параграфов.

$("p").append("<strong>ПРЕВЕД!</strong>");

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

appendTo(content)

возвращает: jQuery
Добавляет все выбранные элементы в другой набор элементов ПОСЛЕ существующего контента. Эта операция обратна использованию выражения $(A).append(B), которое добавляет B в A. Здесь же A будет добавлено в B. Просто сравните с примером append().

В этом примере все элементы span добавляются в элемент, который имеет атрибут id «foo», ПОСЛЕ существующего там контента.

$("span").appendTo("#foo");

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

prepend(content)

возвращает: jQuery
Добавляет контент внутрь всех выбранных элементов ДО существующего контента. Это наилучшее решение, чтобы вставлять элементы в самое начало.

В этом примере мы добавляем некий HTML-код в начало всех параграфов.

$("p").prepend("<strong>ПРЕВЕД </strong>");

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

prependTo(content)

возвращает: jQuery
Добавляет все выбранные элементы в другой набор элементов ДО существующего контента. Эта операция обратна использованию выражения $(A).prepend(B), которое добавляет B в A. Здесь же A будет добавлено в B. Просто сравните с примером prepend().

В этом примере все элементы span добавляются в элемент, который имеет атрибут id «foo», ДО существующего там контента.

$("span").prependTo("#foo");

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

Вставка снаружи:

after(content)

возвращает: jQuery
Вставляет контент ПОСЛЕ каждого выбранного элемента.

В примере вставляем некоторый HTML-код ПОСЛЕ всех параграфов.

$("p").after("<strong>Hello</strong>");

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

before(content)

возвращает: jQuery
Вставляет контент ПЕРЕД каждым выбранным элементом.

В примере вставляем некоторый HTML-код ПЕРЕД всеми параграфами.

$("p").before("<strong>Hello</strong>");

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

insertAfter(content)

возвращает: jQuery
Вставляет все выбранные элементы ПОСЛЕ других, определенных в insertAfter. Эта операция обратна использованию выражения $(A).after(B), где B вставляется после A. Здесь же А вставляется после В. Просто сравните с примером after().

В примере мы вставляем все параграфы ПОСЛЕ элемента, который имеет атрибут id «foo». Тоже самое можно было бы сделать, написав: $(«#foo»).after(«p»)

$("p").insertAfter("#foo");

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

insertBefore(content)

возвращает: jQuery
Вставляет все выбранные элементы ПЕРЕД другими, определенными в insertBefore. Эта операция обратна использованию выражения $(A).before(B), где B вставляется после A. Здесь же А вставляется после В. Просто сравните с примером before().

В этом примере мы вставляем все параграфы ПЕРЕД элементом, который имеет атрибут id «foo». Тоже самое можно было бы сделать, написав: $(«#foo»).before(«p»)

$("p").insertBefore("#foo");

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

Обертывание:

wrap(html)

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

В этом примере оборачиваем новый элемент div вокруг каждого параграфа. В качестве аргумента выступает HTML-код.

$("p").wrap("<div></div>");

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

wrap(elem)

возвращает: jQuery
Оборачивает каждый элемент набора в единственный элемент-обертку.

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

$("p").wrap(document.createElement("div"));

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

wrapAll(html)

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

В этом примере оборачиваем новый элемент div вокруг всех параграфов. В качестве аргумента выступает HTML-код.

$("p").wrapAll("<div></div>");

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

wrapAll(elem)

возвращает: jQuery
Оборачивает все элементы набора в единственный элемент-обертку.

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

$("p").wrapAll(document.createElement("div"));

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

wrapInner(html)

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

В этом примере мы выбираем все параграфы и оборачиваем в тэг b их внутреннее содержимое. В качестве аргумента выступает HTML-код.

$("p").wrapInner("<b></b>");

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

wrapInner(elem)

возвращает: jQuery
Обертывает внутреннее содержимое каждого элемента набора (включая текстовые узлы) в элемент DOM.

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

$("p").wrapInner(document.createElement("b"));

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

Замещение:

replaceWith(content)

возвращает: jQuery
Замещает все элементы набора HTML или DOM элементами.

В этом примере по клику на кнопке она замещается элементом div с таким же текстом, какой был на кнопке.

$("button").click(function () {
  $(this).replaceWith("<div>" + $(this).text() + "</div>");
});

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

replaceAll(selector)

возвращает: jQuery
Замещает все элемента, определенные в селекторе, указанным(и) элементами. Эта функция дополняет replaceWith(), которая решает ту же задачу, только наоборот.

В этом примере мы замещаем все параграфы текстом, заключенным в тэги b.

$("<b>Параграф.</b>").replaceAll("p");

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

Удаление:

empty()

возвращает: jQuery
Удаляет все узлы-потомки (включая текстовые узлы) из набора элементов. Начиная с версии 1.2.2 также удаляет все обработчики событий и внутренние кэшированные данные.

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

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

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

remove(expr)

возвращает: jQuery
Удаляет все выбранные элементы из DOM. Однако при этом они не будут удалены из объекта jQuery, что позволяет использовать их в будущем. Начиная с версии 1.2.2 также удаляет все обработчики событий и внутренние кэшированные данные. Таким образом

$("#foo").remove().appendTo("#bar");

должен быть записан как

$("#foo").appendTo("#bar");

чтобы избежать потери обработчика событий. Опционально может быть использовано фильтрующее выражение expr.

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

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

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

Клонирование:

clone()

возвращает: jQuery
Клонирует выбранные элементы DOM и выбирает клонированные. Наверное немного непонятно, но после рассмотрения примера будет намного яснее. Это полезно при перемещении копий элементов на другую позицию в объектной модели документа (DOM).

В этом примере мы клонируем все элементы b (и выбираем клонированные) и вставляем их перед параграфами.

$("b").clone().prependTo("p");

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

clone(true)

возвращает: jQuery
Клонирует выбранные элементы DOM, и все их обработчики событий и выбирает клонированные. Это полезно при перемещении копий элементов и их обработчиков событий на другую позицию в объектной модели документа (DOM).

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

$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});

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

Ну вот и все… На сегодня. Потому что интересного в библиотеке jQuery еще очень и очень много.

Фильтрация:

eq(index)

возвращает: jQuery
Уменьшает набор элементов до единственного элемента. Позиция элементов в наборе считаются от 0 и до length – 1.

В примере мы задаем элементу div с индексом 2 синий цвет фона путем добавления класса с именем «blue».

$("div").eq(2).addClass("blue");

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

hasClass(class)

возвращает: Boolean
Контролирует текущий набор элементов на наличие указанного класса и возвращает true, если по крайней мере один из элементов набора имеет указанный класс. Это в общем-то альтернатива синтаксису, когда класс указывается как .class

В этом примере, если клик совершен по элементу div имеющему класс «protected», к нему применяется цепочка вызовов, которая заставляет этот элемент несколько раз сместиться влево-вправо.

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

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

filter(expr)

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

В этом примере мы выбираем все элементы div и устанавливаем им одинаковый фоновый цвет. Но только для элементов div, которые имеют класс с именем «middle» мы устанавливаем еще и рамку красного цвета.

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

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

filter(fn)

возвращает: jQuery
Удаляет все элементы из набора, которые не удовлетворяют требованиям функции. Функция вызывается в контексте каждого элемента в наборе (подобно $.each). Если функция возвращает false, элемент удаляется из набора, в случае true элемент сохраняется в наборе.

В этом примере мы изменяем цвет всех элементов div и затем добавляем двойную рамку красного цвета только тем из них, кто удовляетворяет требованиям. Т.е. элементу с индексом равным 1 и элементу, который имеет атрибут id=»fourth».

$("div").css("background", "#b4b0da")
  .filter(function (index) {
    return index == 1 || $(this).attr("id") == "fourth";
  }).css("border", "3px double red");

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

is(expr)

возвращает: Boolean
Проверяет текущий набор элементов на соответствие выражению и возвращает true, если хотя бы один из элементов в наборе соответствует выражению. Если нет подходящих элементов или выражение некорректно, возвращается false.

В примере показано несколько возможных вариантов использования is() внутри обработчика события.

$("div").one('click', function () {
  if ($(this).is(":first-child")) {
    $("p").text("Это первый элемент div.");
  } else if ($(this).is(".blue,.red")) {
    $("p").text("Это синий или красный элемент div.");
  } else if ($(this).is(":contains('Петя')")) {
    $("p").text("Это Петя!");
  } else {
    $("p").html("А это ничего <em>особенного</em>.");
  }
  $("p").hide().slideDown("slow");
  $(this).css({"border-style":"inset",cursor:"default"});
});

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

map(callback)

возвращает: jQuery
Переводит набор элементов объекта jQuery в другой набор, представляя его в виде массива. Это можно использовать, чтобы создавать списки значений, атрибутов, значений css. Или даже создавать специальный, пользовательский селектор.

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

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

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

not(expr)

возвращает: jQuery
Удаляет из набора элементы, соответствующие выражению.

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

$("div").not(".green, #blueone")
              .css("border-color", "red");

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

slice(start, end)

возвращает: jQuery
Отбирает «поднабор» из набора элементов. Работает так же как и встроенный метод slice.

В этом примере часть элементов div окрашивается в желтый цвет случайным образом.

function colorEm() {
  var $div = $("div");
  var start = Math.floor(Math.random()
    * $div.length);
  var end = Math.floor(Math.random()
    * ($div.length - start)) + start + 1;
  if (end == $div.length) end = undefined;
  $div.css("background", "");
  if (end)
    $div.slice(start, end)
    .css("background", "yellow");
  else
    $div.slice(start)
    .css("background", "yellow");
  $("span").text('$("div")
  .slice(' + start + (end ? ', ' + end : '') + ')
  .css("background", "yellow");');
}
$("button").click(colorEm);

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

Поиск:

add(expr)

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

$("div").css("border", "2px solid red")
  .add("p")
  .css("background", "yellow");

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

children(expr)

возвращает: jQuery
Получает набор элементов, содержащий всех уникальных непосредственных потомков для каждого элемента набора. Этот набор может быть дополнительно отфильтрован с помощью выражения (опционально). Отметьте для себя, что в то время как parents() «видит» все родительские элементы, children() «видит» только непосредственных потомков.

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

$("#container").click(function (e) {
  $("*").removeClass("hilite");
  var $kids = $(e.target).children();
  var len = $kids.addClass("hilite").length;

  $("#results span:first").text(len);
  $("#results span:last").text(e.target.tagName);

  e.preventDefault();
  return false;
});

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

contents()

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

В примере мы отыскиваем все текстовые узлы в параграфе и «обертываем» их в тэг b.

$("p").contents().not("[nodeType=1]").wrap("<b/>");

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

find(expr)

возвращает: jQuery
Осуществляет поиск в наборе элементов, отыскивая те из них, которые удовлетворяют выражению. Это хороший способ отыскивать дополнительные потомки среди тех элементов, которые уже содержатся в наборе. Выражение может быть записано с использованием синтаксиса селекторов CSS 1-3.

В этом примере поиск элементов span производится в наборе всех элементов p. По другому это можно записать как $(«p span»)

$("p").find("span").css('color','red');

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

next(expr)

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

В этом примере мы отыскиваем сестринские элементы, следующие непосредственно за элементами button, которые имеют значение атрибута disabled = disabled и изменяем текст этих (следующих за кнопками) элементов на «this button is disabled».

$("button[disabled]").next()
  .text("this button is disabled");

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

nextAll(expr)

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

В этом примере мы определяем все элементы div после первого и назначаем им класс с именем after.

$("div:first").nextAll().addClass("after");

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

parent(expr)

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

В примере мы показываем «родителя» каждого элемента как (parent > child).

$("*", document.body).each(function () {
  var parentTag = $(this).parent().get(0).tagName;
  $(this).prepend(document.createTextNode(parentTag + " > "));
});

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

parents(expr)

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

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

var parentEls = $("b").parents()
  .map(function () {
    return this.tagName;
  }).get().join(", ");
$("b").append("<strong>" + parentEls + "</strong>");

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

prev(expr)

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

В этом примере мы каждый раз по клику на кнопке находим непосредственно предыдущий сестринский элемент для каждого элемента div.

var $curr = $("#start");
$curr.css("background", "#f99");
$("button").click(function () {
  $curr = $curr.prev();
  $("div").css("background", "");
  $curr.css("background", "#f99");
});

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

prevAll(expr)

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

В этом примере мы определяем все элементы div перед последним и назначаем им класс с именем before.

$("div:last").prevAll().addClass("before");

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

siblings(expr)

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

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

var len = $(".hilite").siblings()
  .css("color", "red")
  .length;
$("b").text(len);

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

Формирование цепочки:

andSelf()

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

На примере будет понятнее: мы ищем все элементы div и все все элементы p внутри них, а затем назначаем им два имени класса. Но, обратите внимание, если в первой строке мы добавили к набору элементов p еще и предыдущий div (у всех появилась рамка красного цвета), то во второй строке мы добавили класс, определяющий цвет фона только для элементов p внутри div, но никак не для самого элемента div.

$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");

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

end()

возвращает: jQuery
Возвращает набор элементов к его предыдущему состоянию, до последней «деструктивной» операции над набором элементов. Если же такой операции не производилось, будет возвращен пустой набор. «Деструктивная» операция – любая операция, изменяющая существующий набор элементов. Это все Traversing функции, которые возвращают объект jQuery (add, andSelf, children, filter, find, map, next, nextAll, not, parent, parents, prev, prevAll, siblings и slice), а также функция clone() из раздела Manipulation.

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

• сначала мы выбираем все параграфы;
• вызываем showTags с аргументом 0 и видим, что параграфов обнаружилось ровно 2 штуки;
• отыскиваем все элементы span внутри параграфов;
• вызываем showTags с аргументом 1 и видим, что span внутри p нашлось 5 штук;
• походу зададим им css-свойство background (желтого цвета им!);
• вот теперь и end() – вернулись к предыдущему набору (т.е. там, где p);
• вызываем showTags с аргументом 2 и видим, что действительно вернулись – p = 2 штуки!;
• последнее – применяем стиль italic для шрифта в параграфах – и действительно, все буквы наклонились, а не только в тэгах span, что еще раз подтверждает, что мы действительно вернулись к предыдущему набору.

jQuery.fn.showTags = function (n) {
  var tags = this.map(function () {
    return this.tagName;
  })
  .get().join(", ");
  $("b:eq(" + n + ")").text(tags);
  return this;
};
$("p").showTags(0)
  .find("span")
  .showTags(1)
  .css("background", "yellow")
  .end()
  .showTags(2)
  .css("font-style", "italic");

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

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