jQuery

jQuery документация на Slyweb.ru
Александр Ермаков. Хостинг от www.pwstudio.org


jQuery

Основные методы jQuery ajax:
ajaxComplete(callback)
Добавить функцию, выполняемую всякий раз, когда AJAX запрос завершится. Функция представляет Ajax событие

ajaxError(callback)
Добавить функцию, выполняемую всякий раз, когда AJAX запрос завершится ошибкой. Функция представляет Ajax событие.

ajaxSend(callback)
Добавить функцию, выполянемую перед отправлением AJAX запроса. Функция представляет Ajax событие.

ajaxStart(callback)
Добавить функцию, выполняемую всякий раз, когда AJAX запрос начинается но ещё не активен. Функция Ajax событием.

ajaxStop(callback)
Добавить функцию, выполянемую всякий раз, когда все AJAX запросы будут выполнены. Функция является Ajax событием.

ajaxSuccess(callback)
Добавить функцию, выполянемую всякий раз, когда AJAX запрос завершился успешно. Функция является Ajax событием.

jQuery.param(obj)
Метод создаёт объединенное представление массива или объекта, пригодное для использования в URL при отправке данных методом Ajax.

serialize()
Собрать набор полей input в строку данных.

serializeArray()
Объединить все формы элементы форм (подобно методу .serialize()) но вернуть структуру JSON данных для работы с ней.

jQuery.ajax(options)
Данный метод выполняет асинхронный HTTP запрос.

jQuery.ajaxSetup(options)
Функция позволяет установить глобальные настройки для AJAX запросов.

jQuery.get(url, data, callback, type)
Функция загружает удалённую страницу, используя HTTP GET запрос.

jQuery.getJSON(url, data, callback)
Функция загружает JSON данные используя HTTP GET запрос.

jQuery.getScript(url, callback)
Функция загружает, и выполняет, локальный JavaScript файл, используя HTTP GET запрос.

load(url, data, callback)
Функция позволяет загрузить HTML код из удалённого файла и вставить его в структуру DOM.

jQuery.post(url, data, callback, type)
Функция загружает удалённую страницу, используя HTTP POST запрос.


jQuery

В разделе "Ajax в jQuery" содержаться следующие методы:
jQuery.param(obj)
Метод создаёт объединенное представление массива или объекта, пригодное для использования в URL при отправке данных методом Ajax.

serialize()
Собрать набор полей input в строку данных.

serializeArray()
Объединить все формы элементы форм (подобно методу .serialize()) но вернуть структуру JSON данных для работы с ней.


jQuery jQuery.param(obj)

[Функция] jQuery.param(obj)
Раздел "Ajax"

Метод создаёт объединенное представление массива или объекта, пригодное для использования в URL при отправке данных методом Ajax.
Сигнатура
jQuery.param(obj) → String
Параметры
jQuery.param(obj)
1.2
obj: массив или jQuery объект состоящий из объединяемых пар имя/переменных. Объект, объединяемый через ключ/значение
jQuery.param(obj,traditional)
1.4
obj: массив или объект для сериализцаии
traditional: булев индикатор, определяющий способ сериализации
Description

Данный метод используется внутренне для конвертации значения элемента в объединённое строковое представление. (подробнее об этом смотрите в описании метода .serialize())

Начиная с jQuery 1.3 возвращаемое значение функции используется вместо функции как строки. Начиная с jQuery 1.4 метод $.param() рекурсивно добирается до объектов, снабжая их дополнительными данными в соответствие с популярными языками PHP и Ruby on Rails. Для отключения данной функциональности установите: jQuery.ajaxSettings.traditional = true;.

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

Примеры:

Пример:

Мы можем отобразить строковое представление объекта и его раздекодированное значение с помощью метода decodeURIComponent. Занчения перменных recursiveEncoded и recursiveDecoded отобразятся следующим образом: a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3 a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&amp;b[]=3

<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var myObject = {
  a: {
    one: 1,
    two: 2,
    three: 3
  },
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);

  });
  </script>

<div id="results"></div>

</body>
</html>

Пример:

Мы можем отобразить строковое представление объекта и его раздекодированное значение с помощью метода decodeURIComponent. значения переменных recursiveEncoded и recursiveDecoded отобразятся следующим образом: a=%5Bobject+Object%5D&b=1&b=2&b=3 a=[object+Object]&b=1&b=2&b=3

<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var myObject = {
  a: {
    one: 1,
    two: 2,
    three: 3
  },
  b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);
alert(shallowDecoded);

  });
  </script>

<div id="results"></div>

</body>
</html>

Пример:

Приоритетным поведением метода $.param() для Jquery 1.4 является установка аргумента traditional как true

<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var myObject = {
  a: {
    one: 1,
    two: 2,
    three: 3
  },
  b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);
alert(shallowDecoded);

  });
  </script>

<div id="results"></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/jQuery.param
Версия jQuery 1.4.2 Документ создан 2010-08-21


jQuery serialize()

[Функция] serialize()
Раздел "Ajax"

Собрать набор полей input в строку данных.
Сигнатура
serialize() → jQuery
Параметры
Description

Функция используется для подготовки пользователем данных полей input, отправляемых на сервер. Строка объединенных данных представлена в формате совместимым с большинством серверных языков программирования и фрэймовиков. Для нормальной работы функции запросы должны формироваться из полей формы, имеющих атрибут name. Если указан только id то функция работать не будет. К примеру, с данным кодом: <input id="email" name="email" type="text" />, для версий начиная с jQuery 1.2, метод serialize() будет работать корректно. Для предыдущих версий jQuery должен быть использован метод Form Plugin's fieldSerialize.

Примеры:

Пример:

Собрать данные формы в строку, которая может быть отправлена на сервер Ajax запросом.

<!DOCTYPE html>
<html>
<head>
<style>
body, select { font-size:12px; }
form { margin:5px; }
p { color:red; margin:5px; font-size:14px; }
b { color:blue; }</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }

    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

  });
  </script>

<form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>
<br />
    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>
      <option selected="selected">Multiple3</option>
    </select>
<br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>
    <label for="ch1">check1</label>

    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
    <label for="ch2">check2</label>
<br />
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>
    <label for="r2">radio2</label>
  </form>
  <p><tt id="results"></tt></p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/serialize/


jQuery serializeArray()

[Функция] serializeArray()
Раздел "Ajax"

Объединить все формы элементы форм (подобно методу .serialize()) но вернуть структуру JSON данных для работы с ней.
Сигнатура
serializeArray() → Array, Object
Параметры
Description

Функция объединяет данные всех форм и элементов формы (как .serialize() метод) но возвращает JSON данные для работы с ними.

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

Возвращённая структура JSON состоит из массива объектов, где каждый объект включает один или два ключа: имя параметра, name и переменную параметра если набор не пуст. Учтите что serializeArray() работает с элементами формы, для других элементов не работает. Так же, данный метод не вернёт каких-либо результатов для вложенных форм, которые несоответствующий HTML.

Пример: <codeinp> [ {name: 'firstname', value: 'Hello'}, {name: 'lastname', value: 'World'}, {name: 'alias'}, // this one was empty ]<codeinp>

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
body, select { font-size:14px; }
form { margin:5px; }
p { color:red; margin:5px; }
b { color:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

   function showValues() {
      var fields = $(":input").serializeArray();
      $("#results").empty();
      jQuery.each(fields, function(i, field){
        $("#results").append(field.value + " ");
      });
    }

    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();

  });
  </script>

  <p><b>Results:</b> <span id="results"></span></p>
  <form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>
    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>
      <option selected="selected">Multiple3</option>
    </select><br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>
    <label for="ch1">check1</label>
    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
    <label for="ch2">check2</label>
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>
    <label for="r2">radio2</label>
  </form>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/serializeArray/


jQuery

Глобальные Ajax события:
ajaxComplete(callback)
Добавить функцию, выполняемую всякий раз, когда AJAX запрос завершится. Функция представляет Ajax событие

ajaxError(callback)
Добавить функцию, выполняемую всякий раз, когда AJAX запрос завершится ошибкой. Функция представляет Ajax событие.

ajaxSend(callback)
Добавить функцию, выполянемую перед отправлением AJAX запроса. Функция представляет Ajax событие.

ajaxStart(callback)
Добавить функцию, выполняемую всякий раз, когда AJAX запрос начинается но ещё не активен. Функция Ajax событием.

ajaxStop(callback)
Добавить функцию, выполянемую всякий раз, когда все AJAX запросы будут выполнены. Функция является Ajax событием.

ajaxSuccess(callback)
Добавить функцию, выполянемую всякий раз, когда AJAX запрос завершился успешно. Функция является Ajax событием.


jQuery ajaxComplete(callback)

[Функция] ajaxComplete(callback)
Раздел "Ajax"

Добавить функцию, выполняемую всякий раз, когда AJAX запрос завершится. Функция представляет Ajax событие
Сигнатура
ajaxComplete(callback) → jQuery
Параметры
ajaxComplete(callback)
1.0
callback: выполняемая функция. function (event, XMLHttpRequest, ajaxOptions) { this; // dom element listening }
Description

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

Примеры:

Пример:

Показать сообщение, когда AJAX запрос завершится.

$(document).ready(function(){

 $("#msg").ajaxComplete(function(request, settings){
   $(this).append("<li>Request Complete.</li>");
 });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/ajaxComplete/


jQuery ajaxError(callback)

[Функция] ajaxError(callback)
Раздел "Ajax"

Добавить функцию, выполняемую всякий раз, когда AJAX запрос завершится ошибкой. Функция представляет Ajax событие.
Сигнатура
ajaxError(callback) → jQuery
Параметры
ajaxError(callback)
1.0
callback:  выполняемая функция.
 function (event, XMLHttpRequest, ajaxOptions, thrownError)
 {
 // thrownError передаётся если произошла ошибка;
 // dom element listening
 }
Description

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

Примеры:

Пример:

Выводит сообщение, когда AJAX запрос заканчивается неудачей.

$(document).ready(function(){

 $("#msg").ajaxError(function(event, request, settings){
   $(this).append("<li>Error requesting page " + settings.url + "</li>");
 });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/ajaxError/


jQuery ajaxSend(callback)

[Функция] ajaxSend(callback)
Раздел "Ajax"

Добавить функцию, выполянемую перед отправлением AJAX запроса. Функция представляет Ajax событие.
Сигнатура
ajaxSend(callback) → jQuery
Параметры
ajaxSend(callback)
1.0
callback:  выполняемая функция.
function (event, XMLHttpRequest, ajaxOptions, thrownError)
 {
 // thrownError передаётся если произошла ошибка;
 // dom element listening
 }
Description

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

Примеры:

Пример:

Выводит сообщение, когда AJAX запрос заканчивается неудачей.

$(document).ready(function(){

 $("#msg").ajaxError(function(event, request, settings){
   $(this).append("<li>Error requesting page " + settings.url + "</li>");
 });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/ajaxSend/


jQuery ajaxStart(callback)

[Функция] ajaxStart(callback)
Раздел "Ajax"

Добавить функцию, выполняемую всякий раз, когда AJAX запрос начинается но ещё не активен. Функция Ajax событием.
Сигнатура
ajaxStart(callback) → jQuery
Параметры
ajaxStart(callback)
1.0
callback: выполняемая функция. function () { this; // dom element listening }
Примеры:

Пример:

Показать сообщение, когда AJAX запрос стартует (до тех пор пока не активен).

$(document).ready(function(){

 $("#loading").ajaxStart(function(){
   $(this).show();
 });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/ajaxStart/


jQuery ajaxStop(callback)

[Функция] ajaxStop(callback)
Раздел "Ajax"

Добавить функцию, выполянемую всякий раз, когда все AJAX запросы будут выполнены. Функция является Ajax событием.
Сигнатура
ajaxStop(callback) → jQuery
Параметры
ajaxStop(callback)
1.0
callback: выполняемая функция. function () { this; // dom element listening }
Description

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

Примеры:

Пример:

Скрыть сообщение, когда AJAX запрос прекратится.

$(document).ready(function(){

 $("#loading").ajaxStop(function(){
   $(this).hide();
 });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/ajaxStop/


jQuery ajaxSuccess(callback)

[Функция] ajaxSuccess(callback)
Раздел "Ajax"

Добавить функцию, выполянемую всякий раз, когда AJAX запрос завершился успешно. Функция является Ajax событием.
Сигнатура
ajaxSuccess(callback) → jQuery
Параметры
ajaxSuccess(callback)
1.0
callback: функция, подлежащая выполнению. function (event, XMLHttpRequest, ajaxOptions) { this; // dom element listening }
Description

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

Примеры:

Пример:

Показать сообщение, когда AJAX запрос завершиться успешно.

$(document).ready(function(){

 $("#msg").ajaxSuccess(function(evt, request, settings){
   $(this).append("<li>Successful Request!</li>");
 });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/ajaxSuccess/


jQuery

Основные методы jQuery ajax:
jQuery.ajax(options)
Данный метод выполняет асинхронный HTTP запрос.

jQuery.ajaxSetup(options)
Функция позволяет установить глобальные настройки для AJAX запросов.


jQuery jQuery.ajax(options)

[Функция] jQuery.ajax(options)
Раздел "Ajax"

Данный метод выполняет асинхронный HTTP запрос.
Сигнатура
jQuery.ajax(options) → XMLHttpRequest
Параметры
jQuery.ajax(options)
1.0
options: набор парных ключей/значений, конфигурирующих Ajax запрос. Все опции необязательны. По умолчанию может быть устанволена любая опция $.ajaxSetup().
async: По умолчанию: true Описание опции: по умолчанию все запросы являются асинхронными (значение опции в этом случае устнаолено как true). Если Вам необходим синхронный запрос установите данную опцию как false. Однако будьте внимательны, так как синхронные запросы могут временно блокировать работу браузера, отключая любые действия, производимые пользователем до тех пор, пока запрос выполняется. Возвращаемый тип: логический
beforeSend(XMLHttpRequest): Описание опции: опция позволяет установить функцию, для модифицкации объекта XMLHttpRequest до того как он будет отправлен. Данная опция является ajax событием, поэтому для отмены отправки запроса Вам необходимо вернуть false из функции. Возвращаемый тип: функция
cache: По умолчанию: true, fasle для опции dataType содержащей значения 'script' and 'jsonp'. Описание опции: установив значение опции как false, вы предотвратите кэширование запросов браузером. Возвращаемый тип: логический
complete(XMLHttpRequest, textStatus): Описание опции: опция содержит функцию, выполняемую после завершения ajax запроса (после события success и всех ajax ошибок). Данная функция передает два аргумента: объект XMLHttpRequest и строку, содержащую статус успешности завершения запроса. Данная опция является ajax событием. Возвращаемый тип: функция
contentType: По умолчанию: 'application/x-www-form-urlencoded'. Описание опции: при пересылке данных на сервер используйте данную опцию, определяющую тип данные. По умолчанию данная опция содержит "application/x-www-form-urlencoded", что является удобным в большинстве запросов. Вы можете полностью удалить значение данной опции, после этого все запросы будут отправляться с пустым значением. Возвращаемый тип: строка.
contextObject : Описание опции: объект, создающий контекст для связанной функции обратного вызова. К примеру, если указать в качеств контекста элемент DOM, то данный элемент будет доступен в функции обратного вызова. Возвращаемый тип: объект.
data: Описание опции: опция содержит данные, отсылаемые на сервер. Данные конвертируются в строку, отсылаемую в качестве запроса. Строка прикрепляется к URL, если Вы используете GET запрос. Для того чтобы предотвратить автоматическую конвертацию данных в строку используйте опцию processData. В данной опции объект должен содержать парные ключ/значение. Если значение является массивом, jQuery объединит данные, например массив {foo:["bar1", "bar2"]} будет выглядеть следующим образом: "foo=bar1foo=bar2". Возвращаемый тип: объект, строка.
dataFilter(data, type): Описание опции: Функция применяется для фильтрации данных получаемых от сервера. При использовании данного метода Вы должны сперва убедиться в корректности возвращаемых данных сервером. Функция передаёт два аргумента: возвращенные необработанные данные от сервера и параметр dataType. Возвращаемый тип: функция.
dataType: По умолчанию: опция самостоятельно определяет тип возвращаемых данных, если им является один из следующих типов данных: xml, json, script, html. Описание опции: опция определяет тип данных, которые Вы ожидаете получить от сервера. Если опция не указана, то jQuery самостоятельно пытается определить тип основываясь на данных MIME ответа (например тип ответа XML MIME будет представлен как XML, в версии 1.4 JSON будет представлен как объект, если script, то будет выполнен скрипт, ). Допустимые типы: "xml": означает, что возвращается XML документ, который может быть обработан через jQuery. "html": означает, что возвращается HTML как обычный текст; включающий теги, с помощью которых происходит разбор и вставка элементов в структуру DOM. "script": означает, что возвращается тип данных JavaScript и возвращает обычный текст. для правильной работы данной опции отключите опцию кэширования. Примечание: при использовании данной опции запрос автоматически изменяется с POST на GET если вы запрашивает скрипт с удаленного сервера. "json": опция рассматривает данные как JSON и возвращает объект JavaScript. В jQuery 1.4 повышены требования к структуре данных JSON и их разбору, любые незначительные ошибки в этой структуре прекращают получение данных и вызывают исключение, содержащее ошибку. "jsonp": опция дополняет URL дополнительными значениями - "?callback=?" для определения функции обратного вызова. "text": возвращается обычный текст.
error(XMLHttpRequest, textStatus, errorThrown): Описание опции: опция определяет функцию, вызываемую, если в процессе запроса произошли ошибки. Функция передаёт три аргумента: объект XMLHttpRequest, тип ошибки, третий аргумент – необязательное исключение. возможные значения для второго аргумента: кроме "null" - "timeout", "error", "notmodified" и "parsererror". Данная опция является ajax событием. Возвращаемый тип: функция.
global: Описание опции: опция позволяет установить, как использовать обработчик ajax события - глобально или нет. По умолчанию установлено true. Для того чтобы отключить глобальные обработчики, например для событий ajaxStart и ajaxStop, укажите false в данной опции. Данный метод используется для контроля различных событий. Возвращаемый тип: логический.
ifModified: По умолчанию: false Описание опции: опция позволяет отправить запрос только в том случае, если предыдущий ответ изменился. Опция проверяет ответ через заголовок Last-Modified. По умолчанию опция установлена как false, то есть все заголовки игнорируются. В jQuery 1.4 данная техника дополнена поверкой заголовка etag. Возвращаемый тип: логический.
jsonp: По умолчанию: false Описание опции: данная опция позволяет заменить из Url название функции обратного вызова, при использовании запроса jsonp. Новое значение будет использоваться вместо 'callback' в 'callback=?, в строке, передаваемой в URL при использовании запроса GET или в объекте, если тип запроса POST. То есть опция {jsonp:'onJsonPLoad'} будет представлены как 'onJsonPLoad=?' и переданы на сервер. Возвращаемый тип: логический.
jsonpCallback: Описание опции: данная опция определяет название функции обратного вызова при использовании запроса jsoonp. Данное имя будет использоваться вместо случайного автоматически созданного jQuery имени. Автоматическое создание имени предпочтительнее использовать в jQuery, так как с ним удобнее работать. Однако если Вам нужно улучшить кэширование запросов к серверу, вы можете определить имя функции.
password: Описание опции: данная опция устанавливает пароль в ответ на запрос сервера при аутентификации.
processData: По умолчанию: true Описание опции: по умолчанию данные переданные через опцию data, трансформируются в строку, подходящую при использовании типа содержимого "application/x-www-form-urlencoded". Однако, если вы хотите передать, к примеру DOMDocument или другие необработанные данные, то установите значение данной опции как false. Возвращаемый тип: логический.
scriptCharset : Описание опции: данная опция допустима если dataType "jsonp" или "script" и тип запроса является "GET". Данная опция заставляет запрос интерпретироваться в указанной кодировке.
success(data, textStatus, XMLHttpRequest): Описание опции: опция определяет функцию, выполняемую, если запрос завершился успешно. Функция передаёт три аргумента: data - данные, возвращаемые от сервера, форматируемые в соответствие с параметрами, указанными в опции dataType, textStatus - строка, содержащая статус ответа, и объект XMLHttpRequest - третий аргумент данной функции. Данная опция является событием ajax.
timeout: Описание опции: опция устанавливает период времени для выполнения запроса. С помощью данной опции вы можете отключить глобальный период времени в ходе которого выполняется запрос. О глобально периоде выполнения запроса смотрите в описании метода $.ajaxSetup(). Возвращаемый тип: число.
traditional: Описание опции: опция устанавливает тип объединения данных. Для использования традиционной типа объединения, того который установлен как приоритетный для функции .param(), установите опцию как true, иначе будет использоваться обычный тип объединения. Возвращаемый тип: логический.
type: По умолчанию: GET Описание опции: опция позволяет устанавливать, изменять тип запроса(GET или POST). Другие HTTP запросы, такие как PUT и DALETE могут использоваться в данном методе, однако они не поддерживаются всеми браузерами. Возвращаемый тип: строка.
url: По умолчанию: url текущей страницы Описание опции: с использованием данной опции вы сможете установить url страницы для запроса. Возвращаемый тип: строка.
username: Описание опции: опция содержит имя пользователя, данная опция используется при аутентификации в ответе на запрос сервера.
xhr: Описание опции: функция обратного вызова создающая объект XMLHttpRequest. По умолчанию им является ActiveXObject для IE, иначе XMLHttpRequest. С помощью данной функции Вы можете создать собственную разработку для объекта XMLHttpRequest. Возвращаемый тип: фунцкия.
Description

Описание метода .ajax():

Метод .ajax() лежит в основе всех ajax запросов созданных в jQuery. Зачастую нет надобности использовать данный метод, поскольку есть более упрощенные его вариации, например $.get() или .load(), которые проще для использования. Данный метод рекомендуется использовать в случае, если Вас не удовлетворяют стандартные настройки упрощенных методов ajax.

Ниже указан самый простой способ использования метода ajax(), без опций.

Примечание: не забывайте про глобальные настройки указанные в методе $.ajaxSetup().

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

Функции обратного вызова

Опции beforeSend, error, dataFilter, success и complete могут сдержать функции обратного вызова, которые выполняются в подходящее для их вызова время.

1. функция в опции beforeSend вызывается до того, как запрос отправлен к серверу, данная функция принимает аргумент, содержащий XMLHttpRequest объект как параметр.

2. функция в опции error вызывается, если запрос заканчивается ошибкой. Функция так же принимает объект XMLHttpRequest, а так же тип события ошибки, и исключение, возникающее при срабатывании данного события.

3. функция в опции dataFilter вызывается, если запрос завершился успешно. Функция принимает несколько параметров: данные от сервера, значение опции dataType, и должен вернуть данные (которые, вероятно, будут изменены в данной функции) для дальнейшей передаче в обработчик события success, указанный в опции success.

4. функция в опции success вызываемся, если запрос завершился успешно. Функция принимает в качестве параметров данные от сервера, так же строку, содержащую статус успешности.

5. функция в опции complete вызывается, если запрос завершился, но безразлично успешно или нет. В функциюпередаются XMLHttpRequest объект, а так же строка, содержащая статус успешности отправки запроса либо ошибки.

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

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Загрузка выполнена.');
  }
});

Однако, для данного запроса лучше бы было применить методы $.load() и $.get().

Типы данных.

Метод $.ajax() полагается на данные сервера при получении от него ответа. Если сервер вернул данные с отчетом о том, что их тип XML, jQuery определит тип, и Вы сможете используя методы для разбора XML документов или помощью jQuery селектора. Если будет определен другой тип данных, например HTML, то данные будут рассматриваться как текст.

Обработка разных типов данных может лучше производится указанием в опции dataType соответствующего типа. По-мимо xml, опция dataType может быть html, json, jsonp, script, или text.

Такие типы как text и xml возвращают данные без их предварительной обработки. Попросту говоря данные передаются дальше обработчику события success, через свойства responseText или responseHTML объекта XMLHttpRequest.

Примечание: вы должны быть уверены, что используете корректный MIME-тип данных, он должен соответствовать типу данных, установленных в опции dataType.

Так же будьте внимательны при указании типа данных как html, любой встроенный в возвращаемые данные код javascript будет выполнен до того как данные будут представлены как строка. Аналогично вышесказанному ведет себя тип данных script, скрипт будет выполнен до того как он будет возвращен одной из функций обратного вызова. Данные jsoon разбираются соответствующим образом как javascript объект и передаются во вновь созданный объект. Для разбора используется метод JSON.parse() если браузер поддерживает его, иначе для разбора применяется конструктор Function. JSoon данные представляют собой удобные структурированные данные, удобные для разбора в javascript. Если удаленный файл с данными существует на запрашиваемом сервере, вместо jsoon может быть использован тип jsonp. При использовании данного типа, к URL будет добавлен параметр callback=?. после чего сервер должен присоединить данные именно с тем именем, которое было указано в параметре callback=? и тем самым сформировать правильный JSONP ответ. Если Вам необходимо указать определенное специфичное название данного метода, используйте опцию jsonp метода $.ajax().

Примечание: формат JSONP является расширением формата JSON. Поэтому для того чтобы сервер смог правильно определить параметры передаваемые в строке - запросе используйте код на стороне сервера. Более подробная информация может быть найдена здесь.

Когда данные получены от удаленного сервера (в данном случае рассматриваются такие типы данных как script or jsonp) все операции с ними выполняются с использованием тега <scritp>, а не объекта XMLHttpRequest. Поэтому, в данном случае, объект XMLHttpRequest не возвращается и, следовательно, не передаётся обработчикам, например beforeSend.

Отправка данных на сервер

По умолчанию Ajax использует GET запрос. Если необходим тип POST вы можете указать его в опции type метода $.ajax(). Тип запроса определяет каким способом будут отправлены данные на сервер, содержащиеся в опции data.

Опция data может содержать либо строку из полей формы, например key1=value1key2=value2, либо таблицу {key1: 'value1', key2: 'value2'}. В последнем случае данные конвертируются в строку, после чего отправляются на сервер. Данную конвертацию можно обойти с помощью опции processData, установив её значение как false. К примеру, конвертация может быть нежелательна при отправке объекта XML на сервер, боле того, в данном случае необходимо изменить опцию contentType и указать соответствующий тип MIME.

Усложненные опции:

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

Если сервер запрашивает аутентификацию, используйте опции username и password.

Ajax запрос имеет предельный срок. Данный срок устанавливается с помощью глобальных настроек $.ajaxSetup(), опция timeout используется в меньшем количестве случаев при установке таймаута.

Как правило, запросы передаются на сервер, однако некоторые брауеры кэшируют данные запросы, для предотвращения кэширования применяйте опцию cache: false. Для того чтобы отправить запрос, чтобы проверить отчет браузера о том изменились ли данные на сервере, используйте опцию ifModified, установленную как true.

Опция scriptCharset позволяет четко определить кодировку для таких типов данных как script и jsoonp. Используйте данную опцию, если кодировка скрипта и кодировка страницы на сервера отличаются.

Первая буква Ajax свидетельствует о том, что запрос является асинхронным, то есть порядок завершения в определенной последовательности не гарантируется. Опция async метода $.ajax() по умолчанию установлена как true, то есть последующий код может выполняться после того как запрос выоплнен. Установка данной опции как false позволяет делать запросы синхронно.

Метод $.ajax() возвращает объект XMLHttpRequest, который им же и создаётся. Обычно данный объект создаётся внутри метода jQuery. Однако, если вы желаете созвать его вручную, то можете использовать опцию xhr. Возвращаемый объект в большинстве случаев может быть опущен, в результате вы получите низкоуровневый интерфейс для обследования и манипуляции. В частности, вызов метода .abort() для объекта будет причиной отмены отправки запроса, до того как он будет завершен.

Примеры:

Пример:

Загрузить и выполнить JavaScript файл.

$(document).ready(function(){

 $.ajax({
   type: "GET",
   url: "test.js",
   dataType: "script"
 });

  });

Пример:

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

$(document).ready(function(){

 $.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });

  });

Пример:

Поиск позднейшей версии HTML страницы.

$(document).ready(function(){

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

  });

Пример:

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

$(document).ready(function(){

 var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

  });

Пример:

Отправить xml документ как данные на сервер. Установив параметр processData как false, автоматическая конверсия данных в строки предотвращается.

$(document).ready(function(){

 var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

  });

Пример:

Отправка id как данные на сервер с последующим уведомлением пользователя, если запрос был успешно завершен.

$(document).ready(function(){

bodyContent = $.ajax({
      url: "script.php",
      global: false,
      type: "POST",
      data: ({id : this.getAttribute('id')}),
      dataType: "html",
      success: function(msg){
         alert(msg);
      }
   }
).responseText;

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.ajax/


jQuery jQuery.ajaxSetup(options)

[Функция] jQuery.ajaxSetup(options)
Раздел "Ajax"

Функция позволяет установить глобальные настройки для AJAX запросов.
Сигнатура
jQuery.ajaxSetup(options) → jQuery
Параметры
jQuery.ajaxSetup(options)
1.1
options: набор пары - ключ/переменная, конфигурирующие Ajax запрос по умолчанию. Все опции необязательны.
Description

Все доступные опции, настраивающие ajax рассматриваются в разделе$.ajax.

Примеры:

Пример:

Установить настройки по умолчанию для AJAX запросов, для URL "/xmlhttp/", отключить глобальные данных и использование POST взамен GET. Следующий AJAX запрос отправляет данные, не устанавливая дополнительные настройки.

$(document).ready(function(){

 $.ajaxSetup({
   url: "/xmlhttp/",
   global: false,
   type: "POST"
 });
 $.ajax({ data: myData });

  });

Метод добавлен в jQuery 1.1
Официальная страница метода - http://api.jquery.com/jQuery.ajaxSetup/


jQuery

Упрощенные методы jQuery ajax:
jQuery.get(url, data, callback, type)
Функция загружает удалённую страницу, используя HTTP GET запрос.

jQuery.getJSON(url, data, callback)
Функция загружает JSON данные используя HTTP GET запрос.

jQuery.getScript(url, callback)
Функция загружает, и выполняет, локальный JavaScript файл, используя HTTP GET запрос.

load(url, data, callback)
Функция позволяет загрузить HTML код из удалённого файла и вставить его в структуру DOM.

jQuery.post(url, data, callback, type)
Функция загружает удалённую страницу, используя HTTP POST запрос.


jQuery jQuery.getJSON(url, data, callback)

[Функция] jQuery.getJSON(url, data, callback)
Раздел "Ajax"

Функция загружает JSON данные используя HTTP GET запрос.
Сигнатура
jQuery.getJSON(url, data, callback) → XMLHttpRequest
Параметры
jQuery.getJSON(url, data, callback)
1.0
url: URL адрес загружаемой страницы.
data: Парные Ключ/переменная, которые будут отправлены серверу.
callback: функция выполяемая, когда данные успешно загружены. function (data, textStatus) { // данные могут быть jsonObj// the options for this ajax request }
Description

Начиная с jQuery 1.2, вы можете загружать JSON данные, расположенные на другом домене, если вы указали [ JSONP callback, например так: "myurl?callback=?". jQuery автоматически заменит ? корректным именем методом вызова, вызывав функцию callback. Примечание: Учтите, что строки кода после данной функции будут выполнены до функции callback.

Примеры:

Пример:

Загрузить 4 позднейших рисунка с Flickr JSONP API.

<!DOCTYPE html>
<html>
<head>
<style>
img{ height: 100px; float: left; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 4 ) return false;
          });
        });

  });
  </script>

<div id="images">
</div>

</body>
</html>

Пример:

Загрузить данные JSON из test.js и получить имя JSON данных.

$(document).ready(function(){

 $.getJSON("test.js", function(json){
   alert("JSON Data: " + json.users[3].name);
 });

  });

Пример:

Загрузить JSON из test.js, совместно передавая дополнительные данные, и получить имя из возвращённых JSON данных.

$(document).ready(function(){

 $.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
   alert("JSON Data: " + json.users[3].name);
 });

  });

Пример:

Лист результатов опроса pages.php в HTML как массив. Автор Manuel Gonzalez.

$(document).ready(function(){

var id=$("#id").attr("value");
  $.getJSON("pages.php",{id:id},dates);
function dates(datos)
{

 $("#list").html("Name:"+datos[1].name+"<br>"+"Last Name:"+datos[1].lastname+"<br>"+"Address:"+datos[1].address);
}

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.getJSON/


jQuery jQuery.getScript(url, callback)

[Функция] jQuery.getScript(url, callback)
Раздел "Ajax"

Функция загружает, и выполняет, локальный JavaScript файл, используя HTTP GET запрос.
Сигнатура
jQuery.getScript(url, callback) → XMLHttpRequest
Параметры
jQuery.getScript(url, callback)
1.0
url: URL адрес загружаемой страницы.
callback: функция выполняемая, всякий раз как данные успешно загружены. function (data, textStatus) { // данные могут быть jsonObj// the options for this ajax request }
Description

До jQuery 1.2, getScript был только доступен для загрузки скриптов с отдаленного домена как оригинальную страницу. С весрии 1.2, вы можете загрузить JavaScript с любого домена. Предупреждение: Safari 2 и ранние версии не в состоянии определить количество скриптов в глобальном аспекте синхронизации. Если вы загружаете скрипт через getScript, будьте уверены, что вы вызываете его(скрипт) после задержки.

Примеры:

Пример:

Загрузить новый оффициальный jQuery Color Animation плагин динамично и установить некоторую цветовую анимацию, как только плагин будет загружен.

<!DOCTYPE html>
<html>
<head>
<style>
.block {
   background-color: blue;
   width: 150px;
   height: 70px;
   margin: 10px;
}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: 'pink' }, 1000)
      .animate( { backgroundColor: 'blue' }, 1000);
  });
});

  });
  </script>

<button id="go"> Run</button>
<div class="block"></div>

</body>
</html>

Пример:

Загрузить test.js JavaScript файл и выполнить его.

$(document).ready(function(){

 $.getScript("test.js");

  });

Пример:

$(document).ready(function(){

 $.getScript("test.js", function(){
   alert("Скрипт загружен и выполонен.");
 });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.getScript/


jQuery jQuery.get(url, data, callback, type)

[Функция] jQuery.get(url, data, callback, type)
Раздел "Ajax"

Функция загружает удалённую страницу, используя HTTP GET запрос.
Сигнатура
jQuery.get(url, data, callback, type) → XMLHttpRequest
Параметры
jQuery.get(url, data, callback, type)
1.0
url: URL загружаемой страницы.
data: двойной ключ/переменная, которые будут отправлены на сервер.
callback: функция выполняемая, когда данные успешно загружены. function (data, textStatus) { // данные могут быть xmlDoc, jsonObj, html, text, и т.д...; // тип данных определяется в опциях ajax запроса }
type: тип данных, возвращаемых функцией обратного вызова: "xml", "html", "script", "json", "jsonp", or "text".
Description

Простой путь предать данные GET запросом на сервер без использования других $.ajax функций. Функция поддерживает простую функцию обратного вызова (callback), которая будет выполнена, когда запрос завершится (и только если запрос вернёт успешный ответ). Если вам нужны дополнительные опции как error так и success, вы можете использовать функцию $.ajax.

Примеры:

Пример:

Запросить страницу test.php, но пропустить возврат данных.

$(document).ready(function(){

$.get("test.php");

  });

Пример:

Запрос струнцы test.php и совместная отправка некоторых дополнительных данных (до сих пор пропускать ответ). Фигурные скобки обязательны.

$(document).ready(function(){

$.get("test.php", { name: "John", time: "2pm" } );

  });

Пример:

Передать массив данных на сервер (до сих пор пропуская ответ сервера).

$(document).ready(function(){

 $.get("test.php", { 'choices[]': ["Jon", "Susan"]} );

  });

Пример:

Вывести ответ сервера (от test.php) в диалогом окне (HTML или XML, в зависимости от того, что было возвращено).

$(document).ready(function(){

 $.get("test.php", function(data){
   alert("Data Loaded: " + data);
 });

  });

Пример:

Вывести ответ сервера в диалоговом окне от test.cgi с дополнительными полезными данными (HTML или XML, в зависимости от того что было возвращено).

$(document).ready(function(){

 $.get("test.cgi", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.get/


jQuery jQuery.post(url, data, callback, type)

[Функция] jQuery.post(url, data, callback, type)
Раздел "Ajax"

Функция загружает удалённую страницу, используя HTTP POST запрос.
Сигнатура
jQuery.post(url, data, callback, type) → XMLHttpRequest
Параметры
jQuery.post(url, data, callback, type)
1.0
url: URL адрес загружаемой страницы.
data: парные ключ/переменная отправляемые на сервер.
callback:  Функция выполняемая, когда данные успешно загружены.
function (data, textStatus)
{ // данные могут быть в виде xmlDoc, jsonObj, html, text, и т.д.;
// опции данного ajax запроса
// textStatus может быт одним из:
// timeout // error // notmodified
// success // parsererror //
Примечание: Явно возвращается только success // Ajax позволяет изменить данный способ. Другие ошибки не выводятся. // см. примечание при исползовании $.ajax. }
type: тип данных, возвращаемых функцией callback: "xml", "html", "script", "json", "jsonp", или "text". $.postJSON = function(url, data, callback) { $.post(url, data, callback, "json"); };
Description

Данная функция - простейший метод отправить POST запрос на сервер без использования комплекса $.ajax функциональности. Функция позволяет выполнять обратный вызов (callback функцию), которая будет выполнена после завершения запроса (и если запрос вернёт корректный код). Возвращаемый тип данных может быть обозначен в 4 параметре. Если вам нужны оба – и error и success, вы можете использовать $.ajax. Функция $.post представляет собой упрощенную функцию от $.ajax.

Примеры:

Пример:

Запрос test.php страницы, ответ игнорируется.

$(document).ready(function(){

 $.post("test.php");

  });

Пример:

Запрос test.php страницы совместно с отправлением дополнительных данных (до сих пор ответ игнорируется).

$(document).ready(function(){

$.post("test.php", { name: "John", time: "2pm" } );

  });

Пример:

Передать массив данных на сервер (до сих пор ответ игнорируется).

$(document).ready(function(){

 $.post("test.php", { 'choices[]': ["Jon", "Susan"] });

  });

Пример:

Вывести диалоговое окно с результатом ответа от test.php (HTML или XML, в зависимости от того, что было возвращено).

$(document).ready(function(){

 $.post("test.php", function(data){
   alert("Data Loaded: " + data);
 });

  });

Пример:

Вывести диалогоове окно ответа от test.php с отправкой дополнительных данных (HTML или XML, в зависимости от того что было возвращено).

$(document).ready(function(){

 $.post("test.php", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

  });

Пример:

Получить содержание страницы test.php, сохранив его в XMLHttpResponse объекте и применить функцию process().

$(document).ready(function(){

 $.post("test.php", { name: "John", time: "2pm" },
   function(data){
     process(data);
   }, "xml");

  });

Пример:

Получить содержание test.php в формате json (файл php должен содержать: <?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>)

$(document).ready(function(){

 $.post("test.php", { func: "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.post/


jQuery load(url, data, callback)

[Функция] load(url, data, callback)
Раздел "Ajax"

Функция позволяет загрузить HTML код из удалённого файла и вставить его в структуру DOM.
Сигнатура
load(url, data, callback) → XMLHttpRequest
Параметры
load(url, data, callback)
1.0
url: URL адресс загружаемой HTML страницы .
data: двойной ключ/переменная, которые будут отправлены на сервер. Начиная с jQuery 1.3 взамен может быть передана строка данных.
callback: Фукнция вызываемая, когда ajax запрос выполнен (не обязательно успешно). function (responseText, textStatus, XMLHttpRequest) { this; // dom element }
Description

Запрос GET установлен по умолчанию, но если вы укажет дополнительные параметры, то запрос получится с методом POST. В jQuery 1.2 вы можете указать jQuery селектор в URL. Делайте это для того, чтобы фильтровать входящий HTML код, вставляющий только те элементы, которые соответствующие селектору. Синтаксис следующий "url #some > selector". См. примеры для большей информации.

Примеры:

Пример:

Загрузить часть кода в пользовательский не упорядоченный список.

<!DOCTYPE html>
<html>
<head>
<style>
body{ font-size: 11px; font-family: Arial; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("#links").load("Main_Page #jq-p-Getting-Started li");

  });
  </script>

<b>jQuery Links:</b>
<ul id="links"></ul>

</body>
</html>

Пример:

Загрузить feeds.html в элемент div с ID feeds.

$(document).ready(function(){

$("#feeds").load("feeds.html");

  });

Пример:

Передать массив данных на сервер.

$(document).ready(function(){

$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

  });

Пример:

Как выше, но с POST запросом, в качестве дополнительного параметра, на сервер с последующим вызовом функции callback, которая выполняется, когда сервер прекратит отвечать.

$(document).ready(function(){

 $("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("Последние 25 данные в div с id feed загружены");
 });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/load/


jQuery

В разделе "Атрибты в jQuery" содержаться следующие методы:
addClass(class)
Добавить определенный класс(ы) для всех выбранных элементов.

hasClass(class)
Вернуть true, если обозначенный класс присутствует по крайней мерее в одном из выбираемых элементов.

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

removeAttr(name)
Удаление атрибута из каждого из выбранных элементов.

removeClass(class)
Удалить обозначенный(е) класс(ы) из набора выбранных элементов.

toggleClass(class)
Функция добавляет определенный класс, если класс еще не существует, в ином случае функция удаляет класс.

toggleClass(class, switch)
Функция добавляет определенный класс, если логическая переменная содержит true, либо удаляет определенный класс, если логическая переменная содержит false.

val()
Функция предоставляет доступ к содержанию переменной атрибута первого выбранного элемента.

val(val)
Установить переменную атрибута для каждого выбранного элемента.

val
Устанавливает значение элементов checks или selects, всех переключателей (radio), кнопок (buttons), элементов (checkbox), и элементов option элемента select, которые выбраны для установки переменной.

text(val)
Установить текст как содержание выбранных элементов.


jQuery addClass(class)

[Функция] addClass(class)
Раздел "Attributes"

Добавить определенный класс(ы) для всех выбранных элементов.
Сигнатура
addClass(class) → jQuery
Параметры
addClass(class)
1.0
class: один или множество классов добавляемых к элементам, разделенных пробелом.
addClass( function(index, class) )
1.4
function(index,class): функция, возвращающая один или несколько классов, разделенных пробелом, которые будут добавлены к элементам. Функция передаёт дополнительные аргументы - позицию элемента и его прежний класс.
index: позиция элемента.
class: прежний класс.
Примеры:

Пример:

Добавить класс 'selected' к выбранным элементам.

<!DOCTYPE html>
<html>
<head>
<style>  p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  .highlight { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p:last").addClass("selected");

  });
  </script>

<p>Hello</p>
<p>and</p>
<p>Goodbye</p>

</body>
</html>

Пример:

Добавть классы 'selected' и 'highlight' к выбранным элементам.

<!DOCTYPE html>
<html>
<head>
<style>
 p { margin: 8px; font-size:16px; }
 .selected { color:red; }
 .highlight { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p:last").addClass("selected highlight");

  });
  </script>

<p>Hello</p>
<p>and</p>
<p>Goodbye</p>

</body>
</html>

Пример:

Добавть классы 'selected' и 'highlight' к выбранным элементам.

<!DOCTYPE html>
<html>
<head>
<style>
  .div1{background: #cadceb;}
  .div2{background: #fef;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").css("border", "2px solid red")
        .addClass(function(){
        return "div"+$(this).index;});

  });
  </script>

<div class="div1"><p>Первый div</p></div>
<div class="div2"><p>Второйdiv</p></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/addClass/


jQuery hasClass(class)

[Функция] hasClass(class)
Раздел "Attributes"

Вернуть true, если обозначенный класс присутствует по крайней мерее в одном из выбираемых элементов.
Сигнатура
hasClass(class) → Boolean
Параметры
hasClass(class)
1.0
class: единственный CSS класс по которму происходит поиск.
Примеры:

Пример:

Поиск класса 'selected' в выбранных элементах.

<!DOCTYPE html>
<html>
<head>
<style>
 p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());

  });
  </script>

<p>Hello</p>
  <p class="selected">Goodbye</p>
  <div id="result1">First paragraph has selected class: </div>
  <div id="result2">Last paragraph has selected class: </div>
  <div id="result3">Some paragraph has selected class: </div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/hasClass/


jQuery html()

[Функция] html()
Раздел "Manipulation"

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

Пример:

При нажатии по параграфу, html конвертируется в текст.

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin:8px; font-size:20px; color:blue;
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>
    <b>Click</b> to change the <span id="tag">html</span>
  </p>
  <p>
    to a <span id="text">text</span> node.
  </p>
  <p>
    This <button name="nada">button</button> does nothing.
  </p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/html/


jQuery removeAttr(name)

[Селектор] removeAttr(name)
Раздел "Manipulation"

Удаление атрибута из каждого из выбранных элементов.
Сигнатура
removeAttr(name) → jQuery
Параметры
removeAttr(name)
1.0
name: имя удаляемого свойства.
Description

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

Примеры:

Пример:

Нажмите кнопку для переключения свойства «disabled» поля формы input, следующего за кнопкой.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("button").click(function () {
      $(this).next().removeAttr("disabled")
             .focus()
             .val("editable now");
    });

  });
  </script>

<button>Enable</button>
  <input type="text" disabled="disabled" value="can't edit this" />

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/removeAttr/


jQuery removeClass(class)

[Функция] removeClass(class)
Раздел "Attributes"

Удалить обозначенный(е) класс(ы) из набора выбранных элементов.
Сигнатура
removeClass(class) → jQuery
Параметры
removeClass(class)
1.0
class: один или несколько CSS классов удаляемых из элемента, разделённых пробелом.
Примеры:

Пример:

Удалить класс 'blue' из выбранных чётных элементов.

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p:even").removeClass("blue");

  });
  </script>

<p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>

</body>
</html>

Пример:

Удалить классы 'blue' и 'under' из выбранных нечётных элементов.

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p:odd").removeClass("blue under");

  });
  </script>

<p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>

</body>
</html>

Пример:

Удалить все классы из выбранных элементов с индексом 1.

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p:eq(1)").removeClass();

  });
  </script>

<p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>
  <p class="blue under">Goodbye</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/removeClass/


jQuery text(val)

[Функция] text(val)
Раздел "Attributes"

Установить текст как содержание выбранных элементов.
Сигнатура
text(val) → jQuery
Параметры
text(val)
1.0
val: устанавливаемый текст в качестве содержания элемента.
Description

Подобно html(), но с экранированием HTML (заменяется '<' и '>' их HTML сущностями). Не возможно использовать для полей формы. Для полей формы используйте val attribute.

Примеры:

Пример:

Добавить текст к параграфу (примечание: тэг <b> экранируется).

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:blue; margin:8px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Test Paragraph.</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/text/


jQuery toggleClass(class)

[Функция] toggleClass(class)
Раздел "Attributes"

Функция добавляет определенный класс, если класс еще не существует, в ином случае функция удаляет класс.
Сигнатура
toggleClass(class) → jQuery
Параметры
toggleClass(class)
1.0
class: переключаемый CSS класс для элементов
Примеры:

Пример:

Переключать класс 'highlight' для элемента p при нажатии по данному элементу.

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").click(function () {
      $(this).toggleClass("highlight");
    });

  });
  </script>

<p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/toggleClass/


jQuery toggleClass(class, switch)

[Функция] toggleClass(class, switch)
Раздел "Attributes"

Функция добавляет определенный класс, если логическая переменная содержит true, либо удаляет определенный класс, если логическая переменная содержит false.
Сигнатура
toggleClass(class, switch) → jQuery
Параметры
toggleClass(class, switch)
1.3
class: CSS класс переключаемый для элементов.
switch: логическая переменная, переключающая класс.
.toggleClass( function(index, class), [ switch ] )
1.4
function(index, class): фунцкия, котрая возвращает название класса, который будет переключен в атрибуте class, в каждом из подходящих элементов из набора существующих элементов. Так же возвращается данной функцией позиция элемента в наборе элементов и старое значение атрибута class.
switch: логическое значение, определяющее момент, когда класс должен быть добавлен к элементу и когда удален из него.
Description

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

Примеры:

Пример:

Переключать класс 'highlight' по каждому третьему клику.

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var count = 0;
    $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
    });

  });
  </script>

<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>

</body>
</html>

Пример:

Пример для jQuery 1.4. В примере происходит переключение классов happy и sad, в зависимости от того имеют ли они родительский элемент с id bar, переключение происходит с помщью функции обратного вызова.

<!DOCTYPE html>
<html>
<head>
<style>
.foo {
  border: 1px solid #cad; width:100px;height:100px; background:#cadceb;}
.happy {
  border: 1px solid red;  width:100px;height:100px; ; background:yellow;}
.sad {
  border: 1px solid blue;  width:100px;height:100px; ; background:#cadceb;}

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

  $(".foo").click(function () {
$(this).toggleClass(function() {
  if ($(this).parent().is('#bar')) {
    return 'happy';
  } else {
    return 'sad';
  }
});
});

  });
  </script>

<div id="bar">
    <p class="foo">Click to toggle </p>
</div>
    <p class="foo">Click to toggle </p>

</body>
</html>

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/toggleClas/


jQuery val

[Функция] val
Раздел "Attributes"

Устанавливает значение элементов checks или selects, всех переключателей (radio), кнопок (buttons), элементов (checkbox), и элементов option элемента select, которые выбраны для установки переменной.
Сигнатура
val → jQuery
Параметры
val
1.2
val: набор переменных для check/select.
Примеры:

Пример:

Установить значение для различных полей формы (select и т.д.).

<!DOCTYPE html>
<html>
<head>
<style>
  body { color:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check1","check2", "radio1" ]);

  });
  </script>

<select id="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="checkboxname" value="check1"/> check1
  <input type="checkbox" name="checkboxname" value="check2"/> check2
  <input type="radio"  name="r" value="radio1"/> radio1
  <input type="radio"  name="r" value="radio2"/> radio2

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/val/


jQuery val(val)

[Функция] val(val)
Раздел "Attributes"

Установить переменную атрибута для каждого выбранного элемента.
Сигнатура
val(val) → jQuery
Параметры
val(val)
1.0
val: Переменная, устанавливаемая для выбранного элемента.
Description

В jQuery 1.2 данная функция так же позволяет установить переменные поля select, но выбирается соответствующая опция.

Примеры:

Пример:

Установить переменную поля input.

<!DOCTYPE html>
<html>
<head>
<style>
  button { margin:4px; cursor:pointer; }
  input { margin:4px; color:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });

  });
  </script>

<div>
    <button>Feed</button>
    <button>the</button>
    <button>Input</button>
  </div>
  <input type="text" value="click a button" />

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/val/


jQuery

В разделе "Основы в jQuery" содержаться следующие методы:
jQuery(expression,context)
Функция предоставляет доступ к строке содержащей CSS селектор, которая затем используется для подбора и установки элементов.

jQuery(html,ownerDocument)
Функция создаёт элементы DOM структуры на лету с помощью необработанного строкового выражения HTML.

jQuery(elements)
Функция устанавливает jQuery функциональность вокруг единственного элемента или множества элементов структуры DOM.

jQuery(callback)
Сокращенный аналог $(document).ready().

jQuery.noConflict()
Функция предоставляет контроль над $ переменной, возвращая назад к какокй угодно библиотеке, первоначально используемой.

jQuery.noConflict(extreme)
Возвращает контроль над $ и jQuery переменными к их действительному владельцу. Использовать с осторожностью.

queue(name)
Функция возвращает ссылку на первые элементы очереди (которая является массивом функций).

get(index)
Доступ к единственному выбранному элементу по заданнмому индексу в подобранном наборе.

eq(position)
Уменьшает набор выбираемых элементов к единственному элементу.


jQuery eq(position)

[Function] eq(position)
Раздел "Core"

Уменьшает набор выбираемых элементов к единственному элементу.
Сигнатура
eq(position) → jQuery
Параметры
eq(position)
1.0
position: индекс выбранного элемента.
Description

Позиция элемента среди выбранных элементов, начинается с 0 и переходит к 1.

Примеры:

Пример:

Уменьшение выбора для второго выбранного элемента.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").eq(1).css("color", "red")

  });
  </script>
<p>Это тест.</p><p>Выбран этот элемент.</p>
</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/eq/


jQuery get(index)

[Function] get(index)
Раздел "Core"

Доступ к единственному выбранному элементу по заданнмому индексу в подобранном наборе.
Сигнатура
get(index) → Element
Параметры
get(index)
1.0
index: доступ к элементу в энной позиции.
Description

Функция позволяет вам извлечь актуальный элемент структуры DOM и работать с ним на-прямую, без необходимости использования jQuery функций для доступа к нему. Функция вызывается следующим образом $(this).get(0), что эквивалентно использованию квадратных скобок для обозначения jQuery объекта $(this)[0].

Примеры:

Пример:

Получить имя тэга, по которому произвели щелчок.

<!DOCTYPE html>
<html>
<head>
<style>
  span { color:red; }
  div { background:yellow; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("*", document.body).click(function (e) {
      e.stopPropagation();
      var domEl = $(this).get(0);
      $("span:first").text("Clicked on - " + domEl.tagName);
    });

  });
  </script>

<span></span>
<p>Параграф <span>span</span> параграф</p>
<div><input type="text" /></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/get/


jQuery jQuery(callback)

[Function] jQuery(callback)
Раздел "Core"

Сокращенный аналог $(document).ready().
Сигнатура
jQuery(callback) → jQuery
Параметры
jQuery(callback)
1.0
callback: выполняемая функция, когда структура DOM готова к использованию.
Description

Позволяет "связать" функцию, выполненяемую, когда структура DOM окончательно загрузится. Данная функция ведёт себя так же как и функция $(document).ready(), она может быть использована для охвата других $() операций на вашей странице, зависящих от готовности DOM структуры. Пока данная функция сущетсвует, технически, указывать её повторно нет смысла. Вы можете применять столько $(document).ready событий на вашей странице сколько вам нужно. Для детального изучения ready(Function) используйте описание события ready.

Пример
Примеры:

Пример:

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

$(document).ready(function(){
$(function(){
  // Document is ready
});

  });

Пример:

Используются оба варианта - сокращённый вариант для $(document).ready() и аргумент для написания ошибкоустойчивого кода jQuery, использующий псевдоним $, не полагающийся на глобальный псевдоним.

$(document).ready(function(){
jQuery(function($) {
  // ваш код, использующий ошибкоустойчивый псевдоним $...
});

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery/


jQuery jQuery(elements)

[Function] jQuery(elements)
Раздел "Core"

Функция устанавливает jQuery функциональность вокруг единственного элемента или множества элементов структуры DOM.
Сигнатура
jQuery(elements) → jQuery
Параметры
jQuery(elements)
1.0
elements: элемент(ы) структуры DOM, инкапсулированные jQuery объектом.
Description

Функция предоставляет доступ к XML документам и Window объектам с правильными аргументами (даже если они не являются элементами DOM структуры).

Примеры:

Пример:

Установить цвет фона страницы чёрным.

$(document).ready(function(){
$(document.body).css( "background", "black" );
  });

Пример:

Скрыть все элементы в форме.

$(document).ready(function(){
$(myForm.elements).hide()
  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery/


jQuery jQuery(expression,context)

[Function] jQuery(expression,context)
Раздел "Core"

Функция предоставляет доступ к строке содержащей CSS селектор, которая затем используется для подбора и установки элементов.
Сигнатура
jQuery(expression,context) → jQuery
Параметры
jQuery(expression,context)
1.0
expression: выражение по которому происходит поиск.
context: элемент структуры DOM, Document или jQuery, используемые в качестве контекста.
jQuery(element)
1.1
element: элемент структуры DOM, обёрнутый в jQuery объект.
jQuery(elementArray)
1.1
elementArray: набор, содержащий массив элементов, который оборачиватся в jQuery объект.
jQuery(jQuery object)
1.1
jQuery object: существующий jQuery объект для его клонирования.
jQuery()
1.4
jQuery(): Официальное описание отсутсвует.
Description

Ядро функциональности jQuery сосредотачивается вокруг данной функции. Всё в jQuery основано на ней или с использованием данной функции. Большинство основ используют данную функцию для передачи выражения (обычно состоящего из CSS), которое затем находит все подходящие элементы. По умолчанию, если контекст не был указан, функция $() просматривает все DOM элементы в нутри контекста текущей HTML страницы. Если вы укажете определенный контекст, такой же как у DOM элемента или jQuery объекта, выражение найдёт элемент с данным контекстом. Используйте Selectors, где описывается правильный синтаксис CSS выражений.

В приведенной ниже формулировке, метод $() ищет по структуре DOM элемнты соответсвуюище указанному выражению и создаёт новый объект который ссылаетеся на данные элементы. $('div.foo');

Контекстный селектор (второй параметр функции - selecror)

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

$('div.foo').click(function() {
  $('span', this).addClass('bar');
});

В этом примере мы ограничили элемент span контекстным элементом на который указывает объект this, то есть только те элементы span будут выбраны, которые находятся внутри элемента на котором сработало событие click, то есть внутри элемента с id foo.

Данный способ используется внутренне в методе find(), то есть $('span', this) эквивалентен $(this).find('span').

Использование элементов DOM

Тертий и второй вариант данного метода позволяют нам создавать jQuery объкет используя элемент(ы), который(е) мы нашли с помощью других методов. Простой способ проверить это - вызывать jQuery метод для элемента, который передаётся в фнуцию обратного вызова через объект this.

$('div.foo').click(function() {
  $(this).slideUp();
});

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

Указанное правило аналогичным образом должно применяться и для данных получаемых из XML документа, для того чтобы с ними было удобнее работать. После того как Вы поместите XML данные в обекът jQuery, Вы сможете использовать данный объект для поиска в нем отдельных элементов, расположенных в XML структуре, используя метод find() или иной метод прохождения по элементам(см. раздел Traversing).

Клонирование объектов Jquery

Если в качестве параметра метода $() передаётся объект jQuery, то создаётся копия объекта. По сути копия является новым jQuery объектом ссылающимся на элементы исходного объекта.

Возврат пустого набора

Начиная с jQuery 1.4 при не передаче аргументов в данный метод, будет возвращен пустой набор. В предыдущих версиях Jquery был бы возвращен узел document.

Примеры:

Пример:

Найти все p элементы, которые являются "детьми" div элеметов.

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;background:green;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("div > p").css("border", "1px solid red");
  });
  </script>
<p>one</p> <div><p>two</p></div> <p>three</p>
</body>
</html>

Пример:

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

$(document).ready(function(){
$("input:radio", document.forms[0])
  });

Пример:

Найти все div элементы внутри xml документа из ответа сформированного AJAX.

$(document).ready(function(){
$("div", xml.responseXML);
  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery/


jQuery jQuery(html,ownerDocument)

[Function] jQuery(html,ownerDocument)
Раздел "Core"

Функция создаёт элементы DOM структуры на лету с помощью необработанного строкового выражения HTML.
Сигнатура
jQuery(html,ownerDocument) → jQuery
Параметры
jQuery(html,ownerDocument)
1.0
html: строка содержащая код HTML,создаваемый на "лету".
ownerDocument: документ в котором будет создан новый элемент.
Description

Вы можете указать простую HTML строку, и использовать затем её как шаблон или плагин, или загружать её через Ajax. При создании простого элемента используйте закрывающий тэг или XHTML формат. К примеру, для создания span используйте $("<span/>"). Начиная с jQuery 1.3 данный синтаксис полностью эквивалентен $(document.createElement("span")).

Пример
Примеры:

Пример:

Создание элемента div(и всёго его содержания) и добавление всего созданного к элементу body. Внутри функции создаётся элемент и к его свойству innerHTML устанавливается исходная разметка. Поэтому обе кавычки зафиксированы и ограничены.

$(document).ready(function(){
$("<div><p>Hello</p></div>").appendTo("body")
  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery/


jQuery jQuery.noConflict()

[Function] jQuery.noConflict()
Раздел "Core"

Функция предоставляет контроль над $ переменной, возвращая назад к какокй угодно библиотеке, первоначально используемой.
Сигнатура
jQuery.noConflict() → jQuery
Параметры
Description

Функция предотвращает конфликт jQuery с $ объектом другой библиотеки. При использовании данной функции, для получения доступа к jQuery, используйте jQuery переменную. К примеру, если вы использовали $("div p"), то теперь вы должны указать jQuery("div p").

ПРИМЕЧАНИЕ: Данная функция должна быть включена после подключенного jQuery javascript файла, но до подключения любой другой конфликтующей библиотеки,а так же до того как фактически другая конфликтующая библиотека будет вызвана. noConflict может быть вызвана в конце jQuery.js файла, чтобы глобально отключить псевдоним $() jQuery. jQuery.noConflict возвращает ссылку на jQuery, что может быть использовано для аннулирования псевдонима $() jQuery объекта.

Примеры:

Пример:

Установить соответствие оригинального объекта, который ссылался на $, обратно к $.

$(document).ready(function(){

jQuery.noConflict();
// Выполнить что-нибудь с jQuery
jQuery("div p").hide();
// Выполнить что-нибудь с другой библиотекой $()
$("content").style.display = 'none';

  });

Пример:

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

$(document).ready(function(){

jQuery.noConflict();
(function($) {
  $(function() {
    // код, использующий $ как псевдоним jQuery
  });
})(jQuery);
// другой код, использующий $ как псевдоним другой библиотеки

  });

Пример:

Вы можете "связать" функцию jQuery.noConflict() с сокращенным вариантом функции ready, для компактности кода.

$(document).ready(function(){

jQuery.noConflict()(function(){
    // код используемый jQuery
});
// другой код использующий $ как псевдоним другой библиотеки

  });

Пример:

Создать различные псевдонимы, взамен jQuery для использования в остальном скрипте.

$(document).ready(function(){

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

  });

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/jQuery.noConflict/


jQuery jQuery.noConflict(extreme)

[Function] jQuery.noConflict(extreme)
Раздел "Core"

Возвращает контроль над $ и jQuery переменными к их действительному владельцу. Использовать с осторожностью.
Сигнатура
jQuery.noConflict(extreme) → jQuery
Параметры
jQuery.noConflict(extreme)
1.1.4
extreme: установите true, чтобы включить отдалённый откат для jQuery и его переменных.
Description

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

Примеры:

Пример:

Полностью переместить jQuery в новое пространство имён другого объекта

$(document).ready(function(){

var dom = {};
dom.query = jQuery.noConflict(true);

  });

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/jQuery.noConflict/


jQuery queue(name)

[Function] queue(name)
Раздел "Core"

Функция возвращает ссылку на первые элементы очереди (которая является массивом функций).
Сигнатура
queue(name) → Array
Параметры
queue(name)
1.2
name: Имя очереди (fx по умолчанию).
Примеры:

Пример:

Вывод длинны очереди.

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; }
 </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + 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();

  });
  </script>

<button id="show">Show Length of Queue</button>
<span></span>
<div></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/queue/


jQuery

В разделе "Манипуляция элементами в jQuery" содержаться следующие методы:
css(name)
Функция возвращает свойство стиля для первого подходящего элемента.

css(properties)
Функция устанавливает ключ/переменную объекта как стилевые свойтсва ко всем подходящим элементам.

css(name, value)
Функция устанавливает единственное стилевое свойство в качестве значения для всех подходящих элементов.

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

height(val)
Функция устанавливает CSS свойство height для каждого подходящего элемента.

width()
Функция предоставляет доступ к ширине первого подходящего элемента, которая выражена в пикселях.

width(val)
Функция устанавливает CSS свойство width для каждого подходящего элемента.

innerHeight()
Функция предоставляет значение внутренней высоты (исключающую рамку (border) и включающую свойство padding) для первого подходящего элемента.

innerWidth()
Функция предоставляет значение внутренней ширины (исключающую рамку (border) и включающую свойство padding) для первого подходящего элемента.

outerHeight(options)
Функция предоставляет значение внешней высоты (включающую рамку (border) и значение свойства padding (по умолчанию) для первого подходящего элемента.

outerWidth(options)
Функция возвращает значение внешней ширины (включающую рамку (border) и значение свойства padding по умолчанию) для первого выбранного элемента.

position()
Получить позицию верхнего и левого отступа элемента относительно смещения его родителя.

scrollTop()
Функция предоставляет доступ к значению свойства scroll для первого подходящего элемента.

scrollTop(val)
Когда переменная будет указана, свойство scroll установит данное значение для смещения относительно верха документа, для всех подходящих элементов.

scrollLeft()
Получить значение свойства scroll левого смещения для первого подходящего элемента.

scrollLeft(val)
Когда переменная будет указана, свойство scroll установит данное значение для смещения относительно левого края документа для всех подходящих элементов.


jQuery css(name)

[Функция] css(name)
Раздел "CSS"

Функция возвращает свойство стиля для первого подходящего элемента.
Сигнатура
css(name) → String
Параметры
css(name)
1.0
name: имя получаемого свойства.
Примеры:

Пример:

Получить css свойство background-color для элемента div, по клику.

<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("div").click(function () {
      var color = $(this).css("background-color");
      $("#result").html("That div is <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });

  });
  </script>

<span id="result"> </span>
  <div style="background-color:blue;"></div>
  <div style="background-color:rgb(15,99,30);"></div>
  <div style="background-color:#123456;"></div>
  <div style="background-color:#f11;"></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/css/


jQuery css(name, value)

[Функция] css(name, value)
Раздел "CSS"

Функция устанавливает единственное стилевое свойство в качестве значения для всех подходящих элементов.
Сигнатура
css(name, value) → String
Параметры
css(name, value)
1.0
name: имя устанавливаемого свойства.
value: значение устанавливаемого свойства.
Description

Если указано число, оно автоматически конвертируется в значение измеряемое с помощью пикселей.

Примеры:

Пример:

Изменить цвет любого параграфа на красный по событию mouseover.

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:blue; width:200px; font-size:14px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>
    Только проведи мышью надо мной.
  </p>
  <p>
    Или надо мной, чтоб увидеть как цвет текста изменится.
  </p>

</body>
</html>

Пример:

Чтобы подсветить слово кликните по нему.

<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; font-weight:bold; cursor:pointer; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");
$("span").click(function () {
$(this).css("background-color","yellow");
});

  });
  </script>

<p>
    Once upon a time there was a man
    who lived in a pizza parlor. This
    man just loved pizza and ate it all
    the time.  He went on to be the
    happiest man in the world.  The end.
  </p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/css/


jQuery css(properties)

[Функция] css(properties)
Раздел "CSS"

Функция устанавливает ключ/переменную объекта как стилевые свойтсва ко всем подходящим элементам.
Сигнатура
css(properties) → String
Параметры
css(properties)
1.0
properties: пара ключ/переменная, устанавливаемые в качестве стилевых свойств .
Description

Данная функция является лучшим способом установить несколько значений стиля для всех подходящих элементов. Будьте внимательны, когда ключ содержат дефис, например «background-color», в этом случае ключ должен быть помещен в кавычки или записан с большой буквы, например backgroundColor. Так как "float" и "class" являются зарезервированными словами в JavaScript, их рекомендуется всегда окружать кавычками. jQuery нормализовало свойство "opacity" в Internet Explorer.

Примеры:

Пример:

Установить цвет текста всех параграфов красным и фон – голубым.

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:green; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("p").hover(function () {
      $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
    }, function () {
      var cssObj = {
        'background-color' : '#ddd',
        'font-weight' : '',
        'color' : 'rgb(0,40,244)'
      }
      $(this).css(cssObj);
    });

  });
  </script>

<p>
Пошевелите мышью над параграфом.
</p>
<p>
Подобно этому параграфу или выше.  </p>

</body>
</html>

Пример:

Если имя содержит "-", оно должно быть записано в кавычках:

<!DOCTYPE html>
<html>
<head>
<style>
p { color:green; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>
    Пошевеилте мышью над параграфом.
  </p>
  <p>
    Подобно этому параграфу или выше.
</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/css/


jQuery height()

[Функция] height()
Раздел "CSS"

Функция предоставляет доступ к текущему значению высоты, выраженному в пикселях, первого подходящего элемента.
Сигнатура
height() → Integer
Параметры
Description

В jQuery 1.2, этот метод позволяет вычислить высоту окна и документа.

Примеры:

Пример:

Показать различные значения возвращаемые свойством height. Учтите значение переменной iframe может быть настолько маленьким насколько вам необходимо. Iframe body выделен желтым цветом.

<!DOCTYPE html>
<html>
<head>
<style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font}

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

function showHeight(ele, h) {
      $("div").text("The height for the " + ele +
                    " is " + h + "px.");
    }
    $("#getp").click(function () {
      showHeight("paragraph", $("p").height());
    });
    $("#getd").click(function () {
      showHeight("document", $(document).height());
    });
    $("#getw").click(function () {
      showHeight("window", $(window).height());
    });

  });
  </script>

<button id="getp">Get Paragraph Height</button>
  <button id="getd">Get Document Height</button>
  <button id="getw">Get Window Height</button>
  <div> </div>
  <p>
    Sample paragraph to test height
  </p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/css/


jQuery height(val)

[Функция] height(val)
Раздел "CSS"

Функция устанавливает CSS свойство height для каждого подходящего элемента.
Сигнатура
height(val) → Integer
Параметры
height(val)
1.0
val: устанавливаемое CSS свойство 'height' по заданному значению.
Description

Если нет явно заданного размера (например размер в следующих единицах измерения 'em' или '%') переменная будет установлена в пикселях.

Примеры:

Пример:

При нажатии установить свойство height для каждого элемента div в 30 px и изменить цвет текста.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/height/


jQuery innerHeight()

[Функция] innerHeight()
Раздел "CSS"

Функция предоставляет значение внутренней высоты (исключающую рамку (border) и включающую свойство padding) для первого подходящего элемента.
Сигнатура
innerHeight() → Integer
Параметры
Description

Этот метод работает как с видимыми, так и со скрытыми элементами.

Примеры:

Пример:

Получить значение innerHeight.

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin:10px;padding:5px;border:2px solid #666; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p:last").text( "innerHeight:" + p.innerHeight() );

  });
  </script>

<p>Hello</p><p></p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/innerHeight/


jQuery innerWidth()

[Функция] innerWidth()
Раздел "CSS"

Функция предоставляет значение внутренней ширины (исключающую рамку (border) и включающую свойство padding) для первого подходящего элемента.
Сигнатура
innerWidth() → Integer
Параметры
Description

Этот метод работает как с видимыми так и со скрытыми элементами.

Примеры:

Пример:

Получить значение innerHeight.

<!DOCTYPE html>
<html>
<head>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p:last").text( "innerWidth:" + p.innerWidth() );

  });
  </script>

<p>Hello</p><p></p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/innerWidth/


jQuery outerHeight(options)

[Функция] outerHeight(options)
Раздел "CSS"

Функция предоставляет значение внешней высоты (включающую рамку (border) и значение свойства padding (по умолчанию) для первого подходящего элемента.
Сигнатура
outerHeight(options) → Integer
Параметры
outerHeight(options)
1.0
options: набор пары ключ/значение, настараивающие outerHeight метод. Все опции необязательны.
Description

Данный метод работает как с видимыми, так и со скрытыми элементами.

Примеры:

Пример:

Получить outerHeight.

<!DOCTYPE html>
<html>
<head>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

  });
  </script>

<p>Hello</p><p></p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/outerHeight/


jQuery outerWidth(options)

[Функция] outerWidth(options)
Раздел "CSS"

Функция возвращает значение внешней ширины (включающую рамку (border) и значение свойства padding по умолчанию) для первого выбранного элемента.
Сигнатура
outerWidth(options) → Integer
Параметры
outerWidth(options)
1.0
options: пара ключ/значение, настраивающие outerHeight метод. Все опции факультативны.
Description

Этот метод работает как с видимыми так и со скрытыми элементами. Свойство CSS margin может быть подключено при указании его включении в options с помощью указания true.

Примеры:

Пример:

Получить значение outerWidth.

<!DOCTYPE html>
<html>
<head>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" + p.outerWidth(true) );

  });
  </script>

<p>Hello</p><p></p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/outerWidth/


jQuery position()

[Функция] position()
Раздел "CSS"

Получить позицию верхнего и левого отступа элемента относительно смещения его родителя.
Сигнатура
position() → Object{top,left}
Параметры
Description

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

Примеры:

Пример:

Получить позицию 2 параграфа:

<!DOCTYPE html>
<html>
<head>
<style>
  div { padding: 15px;}
  p { margin-left:10px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );

  });
  </script>

<div><p>Hello</p></div><p></p>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/Object/


jQuery scrollLeft()

[Функция] scrollLeft()
Раздел "CSS"

Получить значение свойства scroll левого смещения для первого подходящего элемента.
Сигнатура
scrollLeft() → Integer
Параметры
Description

Метод доступен как для видимых, так и для скрытых элементов.

Примеры:

Пример:

Получить значение свойства scrollLeft.

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin:10px;padding:5px;border:2px solid #666; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );

  });
  </script>

<p>Привет</p><p></p>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/scrollLeft/


jQuery scrollLeft(val)

[Функция] scrollLeft(val)
Раздел "CSS"

Когда переменная будет указана, свойство scroll установит данное значение для смещения относительно левого края документа для всех подходящих элементов.
Сигнатура
scrollLeft(val) → Integer
Параметры
scrollLeft(val)
1.2
val: положительное число, устанавливающее необходимое смещение от левого края документа.
Description

Метод доступен как для видимых, так и скрытых элементов.

Примеры:

Пример:

Установить свойство scrollLeft.

<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
  </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div.demo").scrollLeft(300);

  });
  </script>

<div class="demo"><p>Hello</p></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/scrollLeft/


jQuery scrollTop()

[Функция] scrollTop()
Раздел "CSS"

Функция предоставляет доступ к значению свойства scroll для первого подходящего элемента.
Сигнатура
scrollTop() → Integer
Параметры
Description

Метод доступен как для видимых, так и для скрытых элементов.

Примеры:

Пример:

Получить значение свойства для элемента p.

<!DOCTYPE html>
<html>
<head>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );

  });
  </script>

<p>Hello</p><p></p>
</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/scrollTop/


jQuery scrollTop(val)

[] scrollTop(val)
Раздел "CSS"

Когда переменная будет указана, свойство scroll установит данное значение для смещения относительно верха документа, для всех подходящих элементов.
Сигнатура
scrollTop(val) → Integer
Параметры
scrollTop(val)
1.2
val: положительное число, устанавливающее необходимое смещение от верха документа.
Description

Метод доступен как для видимых, так и для скрытых элементов.

Примеры:

Пример:

Устанвоить свойство scrollTop.

<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div.demo").scrollTop(300);

  });
  </script>

<div class="demo"><p>Hello</p></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/scrollTop/


jQuery width()

[Функция] width()
Раздел "CSS"

Функция предоставляет доступ к ширине первого подходящего элемента, которая выражена в пикселях.
Сигнатура
width() → Integer
Параметры
Description

В jQuery 1.2, это метод позволяет получить ширину окна и документа.

Примеры:

Пример:

Показать ширину разных элементов. Учтите значение переменной iframe может быть настолько маленьким насколько вам необходимо. Подсветка желтым цветом показывает iframe body.

<!DOCTYPE html>
<html>
<head>
<style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold;  }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    function showWidth(ele, w) {
      $("div").text("The width for the " + ele +
                    " is " + w + "px.");
    }
    $("#getp").click(function () {
      showWidth("paragraph", $("p").width());
    });
    $("#getd").click(function () {
      showWidth("document", $(document).width());
    });
    $("#getw").click(function () {
      showWidth("window", $(window).width());
    });

  });
  </script>

<button id="getp">Get Paragraph Width</button>
  <button id="getd">Get Document Width</button>
  <button id="getw">Get Window Width</button>
  <div> </div>
  <p>
    Sample paragraph to test width
  </p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/width/


jQuery width(val)

[Функция] width(val)
Раздел "CSS"

Функция устанавливает CSS свойство width для каждого подходящего элемента.
Сигнатура
width(val) → Integer
Параметры
width(val)
1.0
val: устанавливаемое CSS свойство width по заранее заданному значению.
Description

Если нет явно заданного размера (например в 'em' or '%') переменная будет выражена в "px".

Примеры:

Пример:

По нажатию установить css свойство width для каждого элемента div в 30 px и изменить цвет текста.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:70px; height:50px; float:left; margin:5px;
        background:red; cursor:pointer; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/width/


jQuery

В разделе "Данные в jQuery" содержаться следующие методы:
clearQueue([queueName])
Метод удаляет все элементы очереди, которые до момента запуска данной функции не были выполнены.

data(name)
Функция возвращает значение определенных данных (data), сохранённых в элементе, установленных через функцию data(name, value).

$.data(elem)

$.data(elem, name)

$.data(elem, name, value)

dequeue(name)
Функция удаляет очередь функций из начала очереди и после этого продолжает выполнение.

queue(name, callback)
Функция позволяет добавить новую функцию, выполняемую, в конце очереди всех выбранных элементов.

queue(name, callback)
Функция позволяет заменить очередь всех выбранных элементов новой очередью (массивом функций).

removeData(name)
Удалить выбранные данные из элемента.


jQuery clearQueue([queueName])

[Function] clearQueue([queueName])
Раздел "Data"

Метод удаляет все элементы очереди, которые до момента запуска данной функции не были выполнены.
Сигнатура
clearQueue([queueName]) → jQuery
Параметры
clearQueue([queueName])
1.4
queueName: строка, содержащая название очереди, по умолчанию fx, данный метод удаляет все методы.
Description

При вызове данного метода все функции, которые до этого не были выполнены будут удалены из очереди выполнения функций. Когда метод .clearQueue() применяется без аргументов он становится аналогом метода .stop(true). Однако в отличие от последнего данный метод позволяет работать не только с методами использующими анимацию, но и для удаления любых других функций установленных в очередь с помощью метода .queue().

Примеры:

Пример:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px;
    background:green; display:none; }
div.newcolor { background:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("#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").clearQueue();
  $("div").stop();
});

  });
  </script>

<body>
    <button id="start">Start</button>
<button id="stop">Stop</button>

</body>
</html>

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/clearQueue/


jQuery data(name)

[Function] data(name)
Раздел "Data"

Функция возвращает значение определенных данных (data), сохранённых в элементе, установленных через функцию data(name, value).
Сигнатура
data(name) → Any
Параметры
data(name)
1.2.3
name: имя сохранённых данных.
Description

Если jQuery коллекция ссылается на многочисленные элементы, значение вернёт ссылку на первый элемент. Данная функция используется для того чтобы получить сохранённые данные элемента без риска циклической передачи. Функция использует jQuery.data, что введено в jQuery 1.2.3. Функция может быть использована по многим причинам, в jQuery UI можно обнаружить многочисленные примеры данной функции.

Примеры:

Пример:

Получить данные названные как "blah," сохранённые в элемент.

<!DOCTYPE html>
<html>
<head>
<style>
  div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

       $("button").click(function(e) {
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = $("div").data("blah");
          break;
        case 1 :
          $("div").data("blah", "hello1");
          value = "Stored!";
          break;
        case 2 :
          $("div").data("blah", 86);
          value = "Stored!";
          break;
        case 3 :
          $("div").removeData("blah");
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

  });
  </script>

<div>A div  <button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button></div>
<p>The "blah" value of this div is <span>?</span></p>

</body>
</html>

Метод добавлен в jQuery 1.2.3
Официальная страница метода - http://api.jquery.com/data/


jQuery dequeue(name)

[Function] dequeue(name)
Раздел "Data"

Функция удаляет очередь функций из начала очереди и после этого продолжает выполнение.
Сигнатура
dequeue(name) → jQuery
Параметры
dequeue(name)
1.2
name: имя очереди (fx по умолчанию)
Примеры:

Пример:

Использование функции dequeue() прекращает выполнение пользовательской функции queue(), что позволяет продолжить алгоритм.

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:50px; position:absolute;
      height:50px; left:10px; top:30px;
      background-color:yellow; }
div.red { background-color:red; }
 </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("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);
    });

  });
  </script>

<button>Start</button>
<div></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/dequeue/


jQuery $.data(elem)

[Function] $.data(elem)
Раздел "Data"

Сигнатура
$.data(elem) → Number
Параметры
$.data(elem)
1.2.3
elem: элемент структуры DOM.
Description

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

Примеры:

Пример:

Получить сохранённый id элемента. Который был задан с помощью функции data().

$(document).ready(function(){

    $(document.body).click(function(e) {
      var id = jQuery.data(e.target);
      $("span").text(id);
    });

  });

Метод добавлен в jQuery 1.2.3
Официальная страница метода - http://api.jquery.com/data/


jQuery $.data(elem, name)

[Function] $.data(elem, name)
Раздел "Data"

Сигнатура
$.data(elem, name) → Any
Параметры
$.data(elem, name)
1.2.3
elem: элемент структуры DOM.
name: название сохраяемых данных.
Description

Возвращает значение определенных данных, сохранённых в элемент.

Примеры:

Пример:

Получить данные "blah" сохранённые в элементе.

$(document).ready(function(){

$("button").click(function(e) {
      var adiv = $("div").get(0);
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = jQuery.data(adiv, "blah");
          break;
        case 1 :
          jQuery.data(adiv, "blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          jQuery.data(adiv, "blah", 86);
          value = "Stored!";
          break;
        case 3 :
          jQuery.removeData(adiv);
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

  });

Метод добавлен в jQuery 1.2.3
Официальная страница метода - http://api.jquery.com/data/


jQuery $.data(elem, name, value)

[Function] $.data(elem, name, value)
Раздел "Data"

Сигнатура
$.data(elem, name, value) → Any
Параметры
$.data(elem, name, value)
1.2.3
elem: элемент структуры DOM.
name: название сохраяемых данных.
value: значение данных.
Description

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

var obj = jQuery.data($("#target").get(0), "pluginname", {}); obj[...] = ...

Примеры:

Пример:

Сохранить и извлечь значение данных из элемента div.

$(document).ready(function(){

    var adiv = $("div").get(0);
    jQuery.data(adiv, "test", { first: 16, last: "pizza!" });
    $("span:first").text(jQuery.data(adiv, "test").first);
    $("span:last").text(jQuery.data(adiv, "test").last);

  });

Метод добавлен в jQuery 1.2.3
Официальная страница метода - http://api.jquery.com/data/


jQuery queue(name, callback)

[Function] queue(name, callback)
Раздел "Data"

Функция позволяет заменить очередь всех выбранных элементов новой очередью (массивом функций).
Сигнатура
queue(name, callback) → jQuery
Параметры
queue(name, callback)
1.2
name: имя очереди (fx по умолчанию)
queue: очередь заменяющая все предыдущие очереди. Функция имеет переменную this и несколько параметров аналогичных функции queue(callback).
Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
      position:absolute; left:0px; top:30px;
      background:green; display:none; }
div.newcolor { background:blue; }
 </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("#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();
    });

  });
  </script>

<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/queue/


jQuery removeData(name)

[Function] removeData(name)
Раздел "Data"

Удалить выбранные данные из элемента.
Сигнатура
removeData(name) → jQuery
Параметры
removeData(name)
1.2.3
name: название удаляемых данных.
Description

Данная функция дополняет функциию $(...).data(name, value).

Примеры:

Пример:

Установить два типа данных, затем удалить один из них.

<!DOCTYPE html>
<html>
<head>
<style>
  div { margin:2px; color:blue; }
  span { color:red; }
 </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("span:eq(0)").text("" + $("div").data("test1"));
    $("div").data("test1", "VALUE-1");
    $("div").data("test2", "VALUE-2");
    $("span:eq(1)").text("" + $("div").data("test1"));
    $("div").removeData("test1");
    $("span:eq(2)").text("" + $("div").data("test1"));
    $("span:eq(3)").text("" + $("div").data("test2"));

  });
  </script>

<div>Значение до: <span></span></div>
<div>Значение после: <span></span></div>
<div>Значение после удаления: <span></span></div>
<div>Значение после удаления: <span></span></div>

</body>
</html>

Метод добавлен в jQuery 1.2.3
Официальная страница метода - http://api.jquery.com/removeData/


jQuery

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

height(val)
Функция устанавливает CSS свойство height для каждого подходящего элемента.

width()
Функция предоставляет доступ к ширине первого подходящего элемента, которая выражена в пикселях.

width(val)
Функция устанавливает CSS свойство width для каждого подходящего элемента.

innerHeight()
Функция предоставляет значение внутренней высоты (исключающую рамку (border) и включающую свойство padding) для первого подходящего элемента.

innerWidth()
Функция предоставляет значение внутренней ширины (исключающую рамку (border) и включающую свойство padding) для первого подходящего элемента.

outerHeight(options)
Функция предоставляет значение внешней высоты (включающую рамку (border) и значение свойства padding (по умолчанию) для первого подходящего элемента.

outerWidth(options)
Функция возвращает значение внешней ширины (включающую рамку (border) и значение свойства padding по умолчанию) для первого выбранного элемента.


jQuery

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

show(speed, callback)
Отобразить все подходящие элементы с применением анимации и запустить необязательную функцию после выполнения.

hide()
Скрыть каждый из набора подходящих элементов, если они отображены (show).

hide(speed, callback)
Cкрыть все подходящие элементы используя анимацию и запустить необязательную функцию после выполнения.

toggle()
Функция переключает отображение каждого набора подходящих элементов.

toggle(switch)
Переключать отображение каждого набора подходящих элементов, основываяся на переключении (true показывает все элементы, false скрывает все элементы).

toggle(switch)
Функция переключает режим отображения элементов для каждого находящегося в наборе элемента с использованием анимации и запускает необязательную функцию обратного вызова (callback) после собственного выполнения.

toggle(fn, fn2, fn3,fn4)
Функция обеспечивает переключение между двумя и более функциями, которые вызываются при нажатии кнопки мыши.

animate(params, duration, easing, callback)
Функция предназначена для создания пользовательской анимации.

animate(params, options)
Функция создающая пользовательскую анимацию.

delay(duration,[queueName ])
установка задержки для выполнения последующей функции в очереди.

stop(clearQueue, gotoEnd)
Функция останавливает выполнение текущей анимации для всех подходящих элементов.

fadeIn(speed, callback)
Функция увеличивает свойство opacity (прозрачность) во всех подходящих элементах и запускает необязательную функцию callback после выполнения основной функции.

fadeOut(speed, callback)
Функция уменьшает свойство opacity для всех выбранных элементов к 0, затем устанавливает свойство display как none и запускает необязательную функцию повторного вызова callback, после выполнения основной функции.

fadeTo(speed, opacity, callback)
Функция уменьшает свойство opacity для всех подходящих элементов к заданному значению и запускает необязательную функцию callback, после выполнения основной функции.

slideDown(speed, callback)
Функция делает видимыми все подходящие элементы до определенной установленной высоты и запускает необязательную функцию обратного вызова (callback) после выполнения основной функции.

slideUp(speed, callback)
Функция скрывает все подходящие элементы посредством изменения их высоты и запускает необязательную функцию callback после выполнения основной функции.

slideToggle(speed, callback)
Функция переключает свойство visibility для каждого выбранного элемента, регулируя свойства height и запустить необязательную функцию callback после выполнения основной функции.


jQuery

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

show(speed, callback)
Отобразить все подходящие элементы с применением анимации и запустить необязательную функцию после выполнения.

hide()
Скрыть каждый из набора подходящих элементов, если они отображены (show).

hide(speed, callback)
Cкрыть все подходящие элементы используя анимацию и запустить необязательную функцию после выполнения.

toggle()
Функция переключает отображение каждого набора подходящих элементов.

toggle(switch)
Переключать отображение каждого набора подходящих элементов, основываяся на переключении (true показывает все элементы, false скрывает все элементы).

toggle(switch)
Функция переключает режим отображения элементов для каждого находящегося в наборе элемента с использованием анимации и запускает необязательную функцию обратного вызова (callback) после собственного выполнения.

toggle(fn, fn2, fn3,fn4)
Функция обеспечивает переключение между двумя и более функциями, которые вызываются при нажатии кнопки мыши.


jQuery hide()

[Функция] hide()
Раздел "Effects"

Скрыть каждый из набора подходящих элементов, если они отображены (show).
Сигнатура
hide() → jQuery
Параметры
Description

Подобно функции hide( speed, [callback] ) но без анимации. Ничего не происходит если выбранные элемента скрыты (hidden).

Примеры:

Пример:

Скрыть все параграфы, затем, по щелчку, скрыть ссылку.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello</p>
  Click to hide me too
  <p>Here is another paragraph</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/hide/


jQuery hide(speed, callback)

[Функция] hide(speed, callback)
Раздел "Effects"

Cкрыть все подходящие элементы используя анимацию и запустить необязательную функцию после выполнения.
Сигнатура
hide(speed, callback) → jQuery
Параметры
hide(speed, callback)
1.0
speed: строка представляющая одну из трех предопределнных скоростей ("slow", "normal", or "fast") или скорость в миллисекундах (т.е. 1000).
callback: функция выполняемая, когда анимация завершена, выполняется единожды для каждого анимируемого объекта. function callback() { this; // dom element }
Description

Высота, ширина, и свойство opacity для каждого выбранного элемента динамично изменяются согласно заданной скорости. В jQuery 1.3 свойства padding и margin также анимированы, для придания сглаживающего эффекта.

Примеры:

Пример:

Анимировать все отображаемые параграфы со скоростью slow, анимация выполняется со скорость в 600 миллисекунд.

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:#dad; font-weight:bold; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<button>Hide 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>

</body>
</html>

Пример:

Анимировать все элементы span (слова в элементах), чтобы скрыть их, анимация выполняется со скоростью 200 миллисекунд. После того как анимация будет выполнена, анимация начинается заново.

<!DOCTYPE html>
<html>
<head>
<style>
span { background:#def3ca; padding:3px; float:left; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("#hidr").click(function () {
      $("span:last-child").hide("fast", function () {
        // используйте callee чтобы не указывать имя функции
        $(this).prev().hide("fast", arguments.callee);
      });
    });
    $("#showr").click(function () {
      $("span").show(2000);
    });

  });
  </script>

<button id="hidr">Hide</button>
  <button id="showr">Show</button>
  <div>
    <span>Once</span> <span>upon</span> <span>a</span>
    <span>time</span> <span>there</span> <span>were</span>
    <span>three</span> <span>programmers...</span>
  </div>

</body>
</html>

Пример:

Скрывать элементы div по щелчку в течение 2 секунд, затем удалить div элемент. Проверьте нажатие более чем по одному элементу во время выполнения функции.

<!DOCTYPE html>
<html>
<head>
<style>
div { background:#ece0fb; width:30px;
height:40px; margin:2px; float:left; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/hide/


jQuery show()

[Функция] show()
Раздел "Effects"

Отобразить каждый из набора подходящих элементов, если они скрыты.
Сигнатура
show() → jQuery
Параметры
Description

Функция подобна методу show( speed, [callback] ) , но без анимации. Не происходит ни каких изменений, если выбранные элементы видимы (visible). Наоборот происходит изменение видимости, если элемент скрыт через метод hide(), или через css свойство display:none.

Примеры:

Пример:

Показать все параграфы.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").show()

  });
  </script>
<p style="display:none">Hello</p>
</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/show/


jQuery show(speed, callback)

[Функция] show(speed, callback)
Раздел "Effects"

Отобразить все подходящие элементы с применением анимации и запустить необязательную функцию после выполнения.
Сигнатура
show(speed, callback) → jQuery
Параметры
show(speed, callback)
1.0
speed: строковое значение представляющее одну из трёх встроенных скоростей ("slow", "normal", or "fast") или значение в миллисекундах для движения анимации (например 1000).
callback: функция выполняемая, когда анимация завершена; выполняется один раз для каждого анимируемого объекта. function callback() { this; // dom element }
Description

Данный метод позволяет изменить свойства высоты, ширины и свойство opacity каждого выбранного элемента динамично, соразмерно заданной скорости. В jQuery 1.3 css свойства padding и margin так же анимированы, что создаёт сглаживающий эффект.

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<button>Show it</button>
<p style="display: none">Hello</p>
</body>
</html>

Пример:

Анимировать все скрытые элементы div, чтобы быстро их показать, в определенном порядке, анимация длится в течении 200 миллисекунд. Как только анимация выполнена, она снова повторяется для каждого объекта.

<!DOCTYPE html>
<html>
<head>
<style>
  div { background:#def3ca; margin:3px; width:80px;
        display:none; float:left; text-align:center; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("#showr").click(function () {
      $("div:eq(0)").show("fast", function () {
        // используйте callee, чтоб не повторять имени функции
        $(this).next().show("fast", arguments.callee);
      });
    });
    $("#hidr").click(function () {
      $("div").hide(2000);
    });

  });
  </script>

<button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div>Hello,</div>
  <div>how</div>
  <div>are</div>
  <div>you?</div>

</body>
</html>

Пример:

Анимировать все элементы span и input чтобы сделать их видимыми со скоростью normal. Как только анимация будет показана, произойдёт отображение текста.

<!DOCTYPE html>
<html>
<head>
<style>
span { display:none; }
div { display:none; }
p { font-weight:bold; background-color:#fcd; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    function doIt() {
      $("span,div").show("normal");
    }
    $("button").click(doIt); // можно передать название функции
    $("form").submit(function () {
      if ($("input").val() == "yes") {
        $("p").show(4000, function () {
          $(this).text("Ok, DONE! (now showing)");
        });
      }
      $("span,div").hide("normal");
      return false; // остановить отправку данных
    });

  });
  </script>

<button>Do it!</button>
  <span>Введите 'yes' и нажмите enter</span>
  <div>
    <form>
      <input type="text" />
    </form>
  </div>
<p style="display:none;">I'm hidden...</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/show/


jQuery toggle()

[Функция] toggle()
Раздел "Effects"

Функция переключает отображение каждого набора подходящих элементов.
Сигнатура
toggle() → jQuery
Параметры
Description

Если элементы отображены, функция сделает их скрытыми (используется метод hide). Если элементы скрыты, функция отобразит их (используется метод show).

Примеры:

Пример:

Переключать все параграфы.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/toggle/


jQuery toggle(fn, fn2, fn3,fn4)

[Функция] toggle(fn, fn2, fn3,fn4)
Раздел "Effects"

Функция обеспечивает переключение между двумя и более функциями, которые вызываются при нажатии кнопки мыши.
Сигнатура
toggle(fn, fn2, fn3,fn4) → jQuery
Параметры
toggle(fn, fn2, fn3,fn4)
1.3
fn1: выполняемая функция. function callback(eventObject) { this; // dom element }
fn2: выполняемая функция. function callback(eventObject) { this; // dom element }
fn3,fn4: выполняемая функция. function callback(eventObject) { this; // dom element }
Description

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

Примеры:

Пример:

Нажмите чтобы переключить цвет элементов списка.

<!DOCTYPE html>
<html>
<head>
<style>
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>
    <li>Take a jog</li>
  </ul>
</ul>

</body>
</html>

Пример:

Переключить стиль ячеек таблицы:

$(document).ready(function(){

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

  });

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/toggle/


jQuery toggle(switch)

[Функция] toggle(switch)
Раздел "Effects"

Функция переключает режим отображения элементов для каждого находящегося в наборе элемента с использованием анимации и запускает необязательную функцию обратного вызова (callback) после собственного выполнения.
Сигнатура
toggle(switch) → jQuery
Параметры
toggle(switch)
1.0
speed: значение скорости, представленное одним из трёх вариантом скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000).
callback: функция выполняемая, когда анимация будет завершена, выполняется единажды для каждого анимируемого элемента. function callback() { this; // dom element }
Description

Высота, ширина, и свойство opacity каждого соответствующего элемента меняется динамично, соответственно заданной скорости, указанной в параметре speed. Для jQuery 1.3 css свойства padding и margin так же анимированы, что придаёт сглаживающий эффект.

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>  p { background:#dad; font-weight:bold; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/toggle/


jQuery

В разделе "Эффекты в jQuery" содержаться следующие методы:
animate(params, duration, easing, callback)
Функция предназначена для создания пользовательской анимации.

animate(params, options)
Функция создающая пользовательскую анимацию.

delay(duration,[queueName ])
установка задержки для выполнения последующей функции в очереди.

stop(clearQueue, gotoEnd)
Функция останавливает выполнение текущей анимации для всех подходящих элементов.


jQuery animate(params, duration, easing, callback)

[Функция] animate(params, duration, easing, callback)
Раздел "Effects"

Функция предназначена для создания пользовательской анимации.
Сигнатура
animate(params, duration, easing, callback) → jQuery
Параметры
animate(params, duration, easing, callback)
1.0
params: набор стилевых атрибутов, которые вам необходимо анимировать.
duration: строка представленная одним из трёх предопределенных параметров скорости (speed) ("slow", "normal", or "fast") или количеством миллисекунд выполнения анимации (например, 1000).
easing: имя используемого эффекта, который вам необходимо использовать (рекомендуется использовать дополнение). Есть два предопределенных метода , "linear" и "swing".
callback: выполняемая функция, когда анимация будет завершена, выполняется один раз для каждого анимируемого элемента.
Description

Ключевой аспект данной функции – объект стилевых свойств, который будет анимирован. Каждый ключ внутри представляет свойство стиля, которое будет анимировано (например: "height", "top", or "opacity"). Учтите, что свойства должны быть обозначены без пробелов, последующее слово с большой буквы, т.е. "marginLeft" вместо "margin-left." Переменная, связанная со свойством представляет тот результат свойства, который будет анимирован. Если значение свойства стиля заданно определенным значением, свойство стиля затем переходит из текущего его значения в новое значение. Функция ведёт себя по-другому, если свойство представлено как "hide", "show", или "toggle", анимация будет создана по заданному значению. Поддерживаются только те свойства, переменные которых носят числовой характер (т.е. свойство backgroundColor не поддерживается).

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

Начиная с jQuery 1.3 если вы указываете параметр функции duration как 0 анимация будет синхронно устанавливаться для элемента (это отличие от ранних версий где данное свойство было коротким, не синхронизованным, замедленным перед устанавливаемым окончанием того или иного стиля).

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    background-color:#bca;
    width:100px;
    border:1px solid green;
  }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
      }, 1500 );
    });

  });
  </script>

<button id="go"> Run</button>
  <div id="block">Hello!</div>

</body>
</html>

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
    position:absolute;
    background-color:#abc;
    left:50px;
    width:90px;
    height:90px;
    margin:5px;
  }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

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

  });
  </script>

<button id="left"></button> <button id="right"></button>
<div class="block"></div>

</body>
</html>

Пример:

Анимировать все параграфы переключая высоту (height) и прозрачность (opacity), выполнение анимации займёт 600 мс.

$(document).ready(function(){

$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, "slow");

  });

Пример:

Анимировать все пеараграфы, установив левый отступ 50 и свойство opacity 1 (непрозрачным, видимым), анимация выполняется в течении 500 миллисекунд.

$(document).ready(function(){

$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, "slow");

  });

Пример:

Пример использования параметра функции easing, обеспечивающего различный стиль анимации. Пример будет работать, если вы подключили соответствующее дополнение, обеспечивающее данную анимацию. Учтите, данный код ничего не будет делать пока элемент скрыт (hidden).

$(document).ready(function(){

$("p").animate({
      "opacity": "show"
    }, "slow", "easein");

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - animate(params, duration, easing, callback)<offpage>http://api.jquery.com/animate/<offpage>


jQuery animate(params, options)

[Функция] animate(params, options)
Раздел "Effects"

Функция создающая пользовательскую анимацию.
Сигнатура
animate(params, options) → jQuery
Параметры
animate(params, options)
1.0
params: набор стилевых атрибутов, которые вам необходимы для анимации.
options: набор опций, настраивающих свойства анимации.
Description

Ключевой аспект данной функции – объект стилевых свойств который анимируется. Каждый ключ внутри представляет свойство стиля, которое подлежит анимации (например: "height", "top", or "opacity"). Учтите, что свойства должны быть обозначены без пробела, последующее слово с большорй буквы, т.е. "marginLeft" вместо "margin-left." Переменная связанная со свойством представляет конечный результат свйоство, которое будет анимировано. Если значение свойства стиля заданно определенным значением, свойство стиля затем переходит из текущего его значения в новое значение. Функция ведёт себя по-другому, если свойство представлено как "hide", "show", или "toggle", анимация будет создана по умолчанию.

Примеры:

Пример:

Первая кнопка показывает, как работает анимация. Пример показывает, как расширяется элемент div (90% width) в то время как свойство font-size возрастает. Как только свойство font-size изменится, начинается анимация рамки. Вторая кнопка начинает аналогичную цепочку анимации, где каждая анимация будет стартовать как только анимация предыдущего элемента завершится.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color:#bca;
    width:200px;
    height:1.1em;
    text-align:center;
    border:2px solid green;
    margin:3px;
    font-size:14px;
  }
  button {
    font-size:14px;
  }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("#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:""});
    });

  });
  </script>

<button id="go1"> Animate Block1</button>
  <button id="go2"> Animate Block2</button>
  <button id="go3"> Animate Both</button>
  <button id="go4"> Reset</button>
  <div id="block1">Block1</div>
  <div id="block2">Block2</div>

</body>
</html>

Пример:

Анимировать все параграфы, переключая css свойства height и opacity, анимация занимает 600 мс.

$(document).ready(function(){

$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, { duration: "slow" });

  });

Пример:

Анимировать все параграфы, css свойство left установить как 50 и свойство opacity как 1 (непрозрачный, видимый), анимция выполяется в течение 500 мс. Функция ведёт себя «вне очереди», это означает, что анимация автоматически стартует не ожидая своей очереди.

$(document).ready(function(){

$("p").animate({
      left: "50px", opacity: 1
    }, { duration: 500, queue: false });

  });

Пример:

Пример использования параметра функции 'easing', обеспечивающего различную анимацию. Пример будет работать, если вы подключили соответствующее дополнение, обеспечивающее данную анимацию.

$(document).ready(function(){

$("p").animate({
      "opacity": "show"
    }, { "duration": "slow", "easing": "easein" });

  });

Пример:

Пример использования функции обратного вызова (callback). Первый аргумент это массив CSS свойств, второй - заданное значение времени анимации - 1000 мс, третий - используемый Палагин, и четвертый аргумент - анонимная функция обратного вызова (callback).

$(document).ready(function(){

$("p").animate({
       height:200, width:400, opacity: .5
    }, 1000, "linear", function(){alert("all done");} );

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/animate/


jQuery delay(duration,[queueName ])

[Функция] delay(duration,[queueName ])
Раздел "Effects"

установка задержки для выполнения последующей функции в очереди.
Сигнатура
delay(duration,[queueName ]) → jQuery
Параметры
delay(duration,[queueName ])
1.2
duration: целое число, указывающее количество миллисекунд задержки для выполнения последующей функции в очереди. queueName: строка, содержащая название очереди.
Description

Если несколько анимации поставлены в очередь (и аргумент clearQueue не возвращает true), функция будет выполнена немедленно.

Данный метод был добавлен в jQuery 1.4, метод позволяет установить период для задержки выполнения последующей функции в очереди функций. Метод может применяться для очереди со стандартными эффектами и для очереди пользовательских методов. К примеру, при использовании стандартных эффектов fadeIn и fadeout между ними может быть установлена задержка в количество 8000 миллисекунд для элемента с id foo: <codeinp> $('#foo').slideUp(300).delay(800).fadeIn(400); В данной строке сначала будет выполнен метод slideUp, после него будет запущена задержка(800 мс.), затем будет запущен метод fadeIn.<codeinp>

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px;
    background:green; display:none; }
div.newcolor { background:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("#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").clearQueue();
  $("div").stop();
});

  });
  </script>

    <button id="start">Start</button>
<button id="stop">Stop</button>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/delay/


jQuery stop(clearQueue, gotoEnd)

[Функция] stop(clearQueue, gotoEnd)
Раздел "Effects"

Функция останавливает выполнение текущей анимации для всех подходящих элементов.
Сигнатура
stop(clearQueue, gotoEnd) → jQuery
Параметры
stop(clearQueue, gotoEnd)
1.2
clearQueue: (true/false), если установлен true, то значит очищает очередь анимации, эффективно прекращая всю анимцию поставленую в очередь.
gotoEnd : (true/false), если установлен true вызывает текущую анимацию к немедленному выполнению, включающую сброс оригинальных настроек стилей к свойствам show и hide и вызов функции callback.
Description

Если несколько анимации поставлены в очередь (и аргумент clearQueue не возвращает true), функция будет выполнена немедленно.

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
    position: absolute;
    background-color: #abc;
    left: 0px;
    top:30px;
    width: 60px;
    height: 60px;
    margin: 5px;
  }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    // Start animation
    $("#go").click(function(){
      $(".block").animate({left: '+=100px'}, 2000);
    });

    // Stop animation when button is clicked
    $("#stop").click(function(){
      $(".block").stop();
    });

    // Start animation in the opposite direction
    $("#back").click(function(){
      $(".block").animate({left: '-=100px'}, 2000);
    });

  });
  </script>

<button id="go">Go</button>
  <button id="stop">STOP!</button>
  <button id="back">Back</button>
  <div class="block"></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/stop/


jQuery

Методы устанавливающие прозрачность элементов:
fadeIn(speed, callback)
Функция увеличивает свойство opacity (прозрачность) во всех подходящих элементах и запускает необязательную функцию callback после выполнения основной функции.

fadeOut(speed, callback)
Функция уменьшает свойство opacity для всех выбранных элементов к 0, затем устанавливает свойство display как none и запускает необязательную функцию повторного вызова callback, после выполнения основной функции.

fadeTo(speed, opacity, callback)
Функция уменьшает свойство opacity для всех подходящих элементов к заданному значению и запускает необязательную функцию callback, после выполнения основной функции.


jQuery fadeIn(speed, callback)

[Функция] fadeIn(speed, callback)
Раздел "Effects"

Функция увеличивает свойство opacity (прозрачность) во всех подходящих элементах и запускает необязательную функцию callback после выполнения основной функции.
Сигнатура
fadeIn(speed, callback) → jQuery
Параметры
fadeIn(speed, callback)
1.0
speed: значение скорости, строка представленная одним из трёх вариантом скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000).
callback: функция выполянейтся, когда анимация будет завершена, выполняется единажды, для каждого анимируемого элемента. function callback() { this; // dom element }
Description

Анимация производится для свойства opacity(прозрачность), это означает, что все нужные вам элементы должны иметь определенную высоту (height) и ширину (width).

Примеры:

Пример:

Анимировать прозрачность (css свойство opacity) всех элементов div, анимация занимает 600 мс.

<!DOCTYPE html>
<html>
<head>
<style>
  div { margin:3px; width:80px; display:none;
        height:80px; float:left; }
  div#one { background:#f00; }
  div#two { background:#0f0; }
  div#three { background:#00f; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>
<span>Click here...</span>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>

</body>
</html>

Пример:

Сделать непрозрачным красный блок по верх некоторый текста. Как только анимация выполнена, появляется дополнительлный текст поверх красного блока.

<!DOCTYPE html>
<html>
<head>
<style>
  p { position:relative; width:400px; height:90px; }
  div { position:absolute; width:400px; height:65px;
        font-size:36px; text-align:center;
        color:yellow; background:red;
        padding-top:25px;
        top:0; left:0; display:none; }
  span { display:none; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>
    Let it be known that the party of the first part
    and the party of the second part are henceforth
    and hereto directed to assess the allegations
    for factual correctness... (click!)
    <div><span>CENSORED!</span></div>
  </p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/fadeIn/


jQuery fadeOut(speed, callback)

[Функция] fadeOut(speed, callback)
Раздел "Effects"

Функция уменьшает свойство opacity для всех выбранных элементов к 0, затем устанавливает свойство display как none и запускает необязательную функцию повторного вызова callback, после выполнения основной функции.
Сигнатура
fadeOut(speed, callback) → jQuery
Параметры
fadeOut(speed, callback)
1.0
speed: значение скорости, строка представленная одним из трёх вариантов скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000).
callback: функция выполняемая, когда анимация будет завершена, выполняется единажды, для каждого анимируемого элемента. function callback() { this; // dom element }
Description

Анимируется только свойтсво opacity, что предполагает наличие свойств height и width у каждого соответствующего объекта.

Примеры:

Пример:

Уменьшить прозрачность всех параграфов, функция выполянет анимацию в течение 600 мс.

<!DOCTYPE html>
<html>
<head>
<style>
p { font-size:150%; cursor:pointer; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>
    If you click on this paragraph
    you'll see it just fade away.
  </p>

</body>
</html>

Пример:

Уменьшить прозрачность всех элементов span в секции, по которой был произведён щелчок.

<!DOCTYPE html>
<html>
<head>
<style>
  span { cursor:pointer; }
  span.hilite { background:yellow; }
  div { display:inline; color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("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");
    });

  });
  </script>

<h3>Find the modifiers - <div></div></h3>
  <p>
    If you <span>really</span> want to go outside
    <span>in the cold</span> then make sure to wear
    your <span>warm</span> jacket given to you by
    your <span>favorite</span> teacher.
  </p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/fadeOut/


jQuery fadeTo(speed, opacity, callback)

[Функция] fadeTo(speed, opacity, callback)
Раздел "Effects"

Функция уменьшает свойство opacity для всех подходящих элементов к заданному значению и запускает необязательную функцию callback, после выполнения основной функции.
Сигнатура
fadeTo(speed, opacity, callback) → jQuery
Параметры
fadeTo(speed, opacity, callback)
1.0
speed: строка представленная одним из трёх вариантом скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000).
opacity: уменьшаемое значение прозрачности (число от 0 до 1).
callback: функция выполянейтся, когда анимация будет завершена, выполняется единажды, для каждого анимируемого элемента. function callback() { this; // dom element }
Description

Анимируется только свойство opacity, что предполагает наличие свойств height и width у каждого выбранного объекта.

Примеры:

Пример:

Уменьшить прозрачность первого параграфа до 0.33 (33%, примерно одна третья), анимация выполняется в течение 600 мс.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>
    Click this paragraph to see it fade.
  </p>
  <p>
    Compare to this one that won't fade.
  </p>

</body>
</html>

Пример:

Установить прозрачность элемента div случайным образом, по каждому щелчку, функция выполняется примерно 200 мс.

<!DOCTYPE html>
<html>
<head>
<style>
  p { width:80px; margin:0; padding:5px; }
  div { width:40px; height:40px; position:absolute; }
  div#one { top:0; left:0; background:#f00; }
  div#two { top:20px; left:20px; background:#0f0; }
  div#three { top:40px; left:40px; background:#00f; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>And this is the library that John built...</p>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</p>

</body>
</html>

Пример:

Найди правый ответ! Уменьшение прозрачности займёт 250 мс, так же происходит изменение различных стилей, когда анимация завершена.

<!DOCTYPE html>
<html>
<head>
<style>
  div, p { width:80px; height:40px; top:0; margin:0;
           position:absolute; padding-top:8px; }
  p { background:#fcc; text-align:center; }
  div { background:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var getPos = function (n) {
      return (Math.floor(n) * 90) + "px";
    };
    $("p").each(function (n) {
      var r = Math.floor(Math.random() * 3);
      var tmp = $(this).text();
      $(this).text($("p:eq(" + r + ")").text());
      $("p:eq(" + r + ")").text(tmp);
      $(this).css("left", getPos(n));
    });
    $("div").each(function (n) {
                  $(this).css("left", getPos(n));
                })
            .css("cursor", "pointer")
            .click(function () {
                  $(this).fadeTo(250, 0.25, function () {
                        $(this).css("cursor", "")
                               .prev().css({"font-weight": "bolder",
                                            "font-style": "italic"});
                      });
                });

  });
  </script>

<p>Wrong</p>
  <div></div>
  <p>Wrong</p>
  <div></div>
  <p>Right!</p>
  <div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/fadeTo/


jQuery

Слайдинг в jQuery:
slideDown(speed, callback)
Функция делает видимыми все подходящие элементы до определенной установленной высоты и запускает необязательную функцию обратного вызова (callback) после выполнения основной функции.

slideUp(speed, callback)
Функция скрывает все подходящие элементы посредством изменения их высоты и запускает необязательную функцию callback после выполнения основной функции.

slideToggle(speed, callback)
Функция переключает свойство visibility для каждого выбранного элемента, регулируя свойства height и запустить необязательную функцию callback после выполнения основной функции.


jQuery slideDown(speed, callback)

[Функция] slideDown(speed, callback)
Раздел "Effects"

Функция делает видимыми все подходящие элементы до определенной установленной высоты и запускает необязательную функцию обратного вызова (callback) после выполнения основной функции.
Сигнатура
slideDown(speed, callback) → jQuery
Параметры
slideDown(speed, callback)
1.0
speed: значение скорости, строка представленная одним из трёх вариантом скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000).
callback: функция выполянейтся, когда анимация будет завершена, выполняется единажды, для каждого анимируемого элемента. function callback() { this; // dom element }
Description

Анимируется только высота элемента, выполняется для всех элементов с использованием "скользящего" метода. Для jQuery 1.3 свойства vertical padding и vertical margin так же анимированы, что делает сглаживающий эффект.

Примеры:

Пример:

Анимировать все элементы div, с помощью эффекта скольжения вниз, и после чего отображать их приблизительно 600 милисекунд.

<!DOCTYPE html>
<html>
<head>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; float:left; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

Click me!
<div></div>
<div></div>
<div></div>

</body>
</html>

Пример:

Анимировать все элементы input с эффектом скольжения вниз, анимация выполняется в течение 1000 милисекунд. Как только анимция выполнена, поле input изменяется, особенно поле в центре, которое получает событие focus.

<!DOCTYPE html>
<html>
<head>
<style>
  div { background:#cfd; margin:3px; width:50px;
        text-align:center; float:left; cursor:pointer;
        border:2px outset black; font-weight:bolder; }
  input { display:none; width:120px; float:left;
          margin:10px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("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");
      });
    });

  });
  </script>

<div>Push!</div>
<input type="text" />
<input type="text" class="middle" />
<input type="text" />

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/slideDown/


jQuery slideToggle(speed, callback)

[Функция] slideToggle(speed, callback)
Раздел "Effects"

Функция переключает свойство visibility для каждого выбранного элемента, регулируя свойства height и запустить необязательную функцию callback после выполнения основной функции.
Сигнатура
slideToggle(speed, callback) → jQuery
Параметры
slideToggle(speed, callback)
1.0
speed: строка представленная одним из трёх вариантов скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000).
callback: функция выполняемая, когда анимация будет завершена, выполняется единожды для каждого анимируемого элемента. function callback() { this; // dom element }
Description

Только высота элемента подлежит анимации, функция делает все элементы скрытыми или видимыми в "скользящей" манере. Начиная с jQuery 1.3 свойства vertical padding и vertical margin также анимированы, что создаёт сглаживающий эффект.

Примеры:

Пример:

Анимировать все параграфы с использованием «скользящего вверх или вниз метода», анимация выполняется в течение 600 мс.

<!DOCTYPE html>
<html>
<head>
<style>
p { width:400px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<button>Toggle</button>
  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>

</body>
</html>

Пример:

Анимировать элементы div между разделителями с использованием функции toggle, которая показывает и скрывает их.

<!DOCTYPE html>
<html>
<head>
<style>
  div { background:#b977d1; margin:3px; width:60px;
        height:60px; float:left; }
  div.still { background:#345; width:5px; }
  div.hider { display:none; }
  span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<button id =aa>Toggle</button> There have been <span>0</span> toggled divs.
  <div></div><div class="still"></div>
  <div style="display:none;"></div><div class="still"></div>
  <div></div><div class="still"></div>
  <div class="hider"></div><div class="still"></div>
  <div class="hider"></div><div class="still"></div>
  <div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/slideToggle/


jQuery slideUp(speed, callback)

[Функция] slideUp(speed, callback)
Раздел "Effects"

Функция скрывает все подходящие элементы посредством изменения их высоты и запускает необязательную функцию callback после выполнения основной функции.
Сигнатура
slideUp(speed, callback) → jQuery
Параметры
slideUp(speed, callback)
1.0
speed: значение скорости, строка представленная одним из трёх вариантом скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000).
callback: функция выполняемая, когда анимация будет завершена, функция выполняется единожды для каждого анимируемого элемента. function callback() { this; // dom element }
Description

Анимируется только высота элемента, выполняется для всех элементов с использованием "скользящего" метода. Для jQuery 1.3 свойства vertical padding и vertical margin так же анимированы, что делает сглаживающий эффект.

Примеры:

Пример:

Анимировать все элементы div с использованием “скользящего вверх” метода, анимация выполняется в течение 400 мс.

<!DOCTYPE html>
<html>
<head>
<style>
  div { background:#3d9a44; margin:3px; width:80px;
        height:40px; float:left; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

Click me!
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>

Пример:

Анимировать все элементы div с использованием эффекта «скольжения вверх», анимация выполняется в течение 200 мс. Как только анимация будет выполнена будет показано сообщение.

<!DOCTYPE html>
<html>
<head>
<style>
  div { margin:2px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("button").click(function () {
      $(this).parent().slideUp("slow", function () {
        $("#msg").text($("button", this).text() + " has completed.");
      });
    });

  });
  </script>

<div>
    <button>Hide One</button>
    <input type="text" value="One" />
  </div>
  <div>
    <button>Hide Two</button>
    <input type="text" value="Two" />
  </div>
  <div>
    <button>Hide Three</button>
    <input type="text" value="Three" />
  </div>
  <div id="msg"></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/slideUp/


jQuery

В разделе "События в jQuery" содержаться следующие методы:
error()
Функция запускает событие error для каждого выбранного элемента.

error(fn)
Связать функцию с событием error для каждого подходящего элемента.

resize(fn)
Связать функцию с событием resize для каждого подходящего элемента.

scroll(fn)
Связать функцию с событием scroll для каждого подходящего элемента.

load(fn)
Связать функцию с событием load для каждого подходящего элемента.

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

unload(fn)
Связать функцию с событием unload для каждого выбранного элемента.

bind(type, data, fn)
Функция позволяет связать обработчик с одним событием или несколькими событиями (например с событием click) для каждого подходящего элемента. Функция может связать обработчик событий с пользовательскими событиям.

die(type,n)
Появилось в jQuery 1.3: Функция является противоположностью функции live() и удаляет связанные функцией live() события.

live(type, fn)
Добавлено в jQuery 1.3: Функция позволяет связать обработчик с событием (например с click) для всех текущих – и будущих - подходящих элементов. Так же функция позвляет связывать пользовательское событие с обработчиком.

one(type,data,fn)
Связать обработчик с одним или несколькими событием(ями) чтобы быть выполненным(и) один раз для каждого соответствующего элемента.

jQuery.proxy( function, scope )
Возвращает данные, которые всегда находятся в области видимости функции.

trigger(event,data)
Функция инициирует событие для каждого подходящего элемента.

triggerHandler(event , data )
Специфичный метод, запускающий все связанные обработчики событий с элементами (для особого типа события) БЕЗ выполнения действий браузера по умолчанию и без всплывания событий.

unbind(type,fn)
Функция противоположность функции bind, функция удаляет связанные события для каждого подходящего элемента.

event.currentTarget
текущий элемент структуры DOM, находящийся в фазе всплывания.

event.data
данное свойство содержит необязательные данные, переданные в метод jQuery.fn.bind, используемые, когда текущий обработчик связан с элементом.

event.isDefaultPrevented()
данный метод позволяет определить был ли запущен метод event.preventDefault() для объекта события.

event.isImmediatePropagationStopped()
данный метод позволяет определить был ли запущен метод event.stopImmediatePropagation() для объекта события.

event.isPropagationStopped()
данный метод позволяет определить был ли запущен метод event.stopPropagation() для объекта события.

event.pageX
данный метод предоставляет значение позиции курсора относительно левого края окна браузера

event.pageY
данный метод предоставляет значение позиции курсора относительно верхнего края окна браузера

event.preventDefault
если данный метод используется, то действие события, предусмотренное по умолчанию не произойдёт.

event.relatedTarget()
Доступ к другому элементу, связанному с событием, если такой элемент существует.

event.result()
Данный атрибут содержит последнее значение, возвращаемое обработчиком, который был связан с данным событием, за исключением, если значение не определено (undefined).

event.stopImmediatePropagation()
Отключить выполнение других обработчиков данного события за исключением существующего.

event.stopPropagation()
Данный метод предотвращает всплытие события по элементам структуры DOM, предотвращая при этом срабатывания обработчиков события любых родительских элементов.

event.target
Возвращает имя элемента DOM, инициировавшего событие.

event.timeStamp()
метод возвращает количество миллисекунд прошедших с 1 января 1970 года, до момента, когда происходит запуск события.

event.type
Метод возвращает тип события

event.which
Метод позволяет опередить тип нажатой клавиши или кнопки.

blur()
Запустить событие blur для каждого подходящего элемента.

blur(fn)
Связать функцию с событием blur для каждого подходящего элемента.

change()
Запустить событие change для каждого подходящего элемента.

change(fn)
Связать функцию с событием change для каждого подходящего элемента.

focus()
Запустиь событие focus для каждого подходящего элемента.

focus(fn)
Связать функцию с событием focus для каждого подходящего элемента.

select()
Функция запускает событие select для каждого подходящего элемента.

select(fn)
Связать функцию с событим select для каждого подходящего элемента.

submit()
Функция запускает событие submit для каждого выбранного элемента.

submit(fn)
Связать функцию с событием submit для каждого подходящего элемента.

focusin( handler(eventObject) )
Метод позволяет связать обработчик события с javascript событием focusin.

focusout( handler(eventObject) )
Метод позволяет связать обработчик события с javascript событием focusout.

hover(over, out)
Функция имитирует css свойство hover (при помещениеи курсора мыши на элемент и отведении курсора мыши от элемента). Данная функция представляет собой пользовательский метод, который обеспечивает выполнение частных задач.

keydown()
Запустить событие keydown для каждого подходящего элемента.

keydown(fn)
Связать функцию с событием keydown для каждого подходящего элемента.

keydown()
Вызвать событие keypress для каждого соответствующего элемента.

keypress(fn)
Связать функцию с событием keydown для каждого подходящего элемента.

keyup()
Запустить событие keyup для каждого подходящего элемента.

keyup(fn)
Свзать функцию с событию keyup для каждого подходящего элемента.

click()
Запустить событие click для каждого подходящего элемента.

click(fn)
Связать функцию с событием click для каждого подходящего элемента.

dblclick()
Запустить событие dblclick для каждого подходящего элемента

dblclick(fn)
Связать функцию с событием dblclick для каждого подходящего элемента.

keyup()
Связать функцию с событием mousedown для каждого подходящего элемента. function callback(eventObject) {this; // dom element}

mousemove(fn)
Связать функцию с событию mousemove для каждого подходящего элемента.

mouseout(fn)
Связать функцию с событию mouseout для каждого подходящего элемента.

mouseover(fn)
Связать функцию с событием mouseover для каждого подходящего элемента.

mouseup(fn)
Связать функцию с событием mouseup для каждого подходящего элемента.


jQuery

Объект события
event.currentTarget
текущий элемент структуры DOM, находящийся в фазе всплывания.

event.data
данное свойство содержит необязательные данные, переданные в метод jQuery.fn.bind, используемые, когда текущий обработчик связан с элементом.

event.isDefaultPrevented()
данный метод позволяет определить был ли запущен метод event.preventDefault() для объекта события.

event.isImmediatePropagationStopped()
данный метод позволяет определить был ли запущен метод event.stopImmediatePropagation() для объекта события.

event.isPropagationStopped()
данный метод позволяет определить был ли запущен метод event.stopPropagation() для объекта события.

event.pageX
данный метод предоставляет значение позиции курсора относительно левого края окна браузера

event.pageY
данный метод предоставляет значение позиции курсора относительно верхнего края окна браузера

event.preventDefault
если данный метод используется, то действие события, предусмотренное по умолчанию не произойдёт.

event.relatedTarget()
Доступ к другому элементу, связанному с событием, если такой элемент существует.

event.result()
Данный атрибут содержит последнее значение, возвращаемое обработчиком, который был связан с данным событием, за исключением, если значение не определено (undefined).

event.stopImmediatePropagation()
Отключить выполнение других обработчиков данного события за исключением существующего.

event.stopPropagation()
Данный метод предотвращает всплытие события по элементам структуры DOM, предотвращая при этом срабатывания обработчиков события любых родительских элементов.

event.target
Возвращает имя элемента DOM, инициировавшего событие.

event.timeStamp()
метод возвращает количество миллисекунд прошедших с 1 января 1970 года, до момента, когда происходит запуск события.

event.type
Метод возвращает тип события

event.which
Метод позволяет опередить тип нажатой клавиши или кнопки.


jQuery event.currentTarget

[Функция] event.currentTarget
Раздел "Events"

текущий элемент структуры DOM, находящийся в фазе всплывания.
Сигнатура
event.currentTarget → Element
Параметры
Description

Примеры:

Пример:

В примере будет открыто диалоговое, потому что свойство event.currentTarget соответствует указателю на текущий объект.

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:100px; height:100px;
    background:green;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").click(function(event) {
  alert( event.currentTarget === this ); // true
});

  });
  </script>

<div></div>

</body>
</html>

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/event.currentTarget/


jQuery event.data

[Функция] event.data
Раздел "Events"

данное свойство содержит необязательные данные, переданные в метод jQuery.fn.bind, используемые, когда текущий обработчик связан с элементом.
Сигнатура
event.data → Element
Параметры
Примеры:

Пример:

В примере будет открыто диалоговое, содержащее данные.

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:100px; height:100px;
    background:green;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").each(function(i) {
  $(this).bind('click', {index:i}, function(e){
     alert('my index is ' + e.data.index);
     return false
  });
});

  });
  </script>

<div>Index 0</div>
<div>Index 1</div>

</body>
</html>

Метод добавлен в jQuery 1.1
Официальная страница метода - http://api.jquery.com/event.data/


jQuery event.isDefaultPrevented()

[Функция] event.isDefaultPrevented()
Раздел "Events"

данный метод позволяет определить был ли запущен метод event.preventDefault() для объекта события.
Сигнатура
event.isDefaultPrevented() → Element
Параметры
Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:100px; height:100px;
    background:green; float:left;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").click(function(event){
  alert( event.isDefaultPrevented() ); // false
  event.preventDefault();
  alert( event.isDefaultPrevented() ); // true
});

  });
  </script>

<div></div>

</body>
</html>

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/event.isDefaultPrevented/


jQuery event.isImmediatePropagationStopped()

[Функция] event.isImmediatePropagationStopped()
Раздел "Events"

данный метод позволяет определить был ли запущен метод event.stopImmediatePropagation() для объекта события.
Сигнатура
event.isImmediatePropagationStopped() → Element
Параметры
Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:100px; height:100px;
    background:green; float:left;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").click(function(event){
  alert( isImmediatePropagationStopped() ); // false
  event.stopImmediatePropagation();
  alert( isImmediatePropagationStopped() ); // true
});

  });
  </script>

<div></div>

</body>
</html>

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/event.isImmediatePropagationStopped/


jQuery event.isPropagationStopped()

[Функция] event.isPropagationStopped()
Раздел "Events"

данный метод позволяет определить был ли запущен метод event.stopPropagation() для объекта события.
Сигнатура
event.isPropagationStopped() → Element
Параметры
Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:100px; height:100px;
    background:green; float:left;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").click(function(event){
  alert( event.isDefaultPrevented() ); // false
  event.event.event.isPropagationStopped();
  alert( event.isDefaultPrevented() ); // true
});

  });
  </script>

<div></div>

</body>
</html>

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/event.isPropagationStopped/


jQuery event.pageX

[Функция] event.pageX
Раздел "Events"

данный метод предоставляет значение позиции курсора относительно левого края окна браузера
Сигнатура
event.pageX → Number
Параметры
Примеры:

Пример:

Отобразить координаты курсора мыши относительно краёв окна браузера:

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:100px; height:100px;
    background:green; float:left;color:white;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$(document).bind('mousemove',function(e){
            $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
});

  });
  </script>

<div id="log"></div>

</body>
</html>

Метод добавлен в jQuery 1.0.4
Официальная страница метода - http://api.jquery.com/event.pageX/


jQuery event.pageY

[Функция] event.pageY
Раздел "Events"

данный метод предоставляет значение позиции курсора относительно верхнего края окна браузера
Сигнатура
event.pageY → Number
Параметры
Примеры:

Пример:

Отобразить координаты курсора мыши относительно краёв окна браузера:

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:100px; height:100px;
    background:green; float:left;color:white;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$(document).bind('mousemove',function(e){
            $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
});

  });
  </script>

<div id="log"></div>

</body>
</html>

Метод добавлен в jQuery 1.0.4
Официальная страница метода - http://api.jquery.com/event.pageY/


jQuery event.preventDefault

[Функция] event.preventDefault
Раздел "Events"

если данный метод используется, то действие события, предусмотренное по умолчанию не произойдёт.
Сигнатура
event.preventDefault → Number
Параметры
Description

К примеру, нажатие по ссылке не приведёт к действию браузера по умолчанию, то есть Вы не перейдете к другой странице. Используйте метод event.isDefaultPrevented() для определения было ли предотвращено действие по умолчанию для данного события.

Примеры:

Пример:

Отобразить координаты курсора мыши относительно краёв окна браузера:

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("a").click(function(event){
  event.preventDefault();
  // do something
});

  });
  </script>

default click action is prevented

</body>
</html>

Метод добавлен в jQuery 1.0.4
Официальная страница метода - http://api.jquery.com/event.preventDefault/


jQuery event.relatedTarget()

[Функция] event.relatedTarget()
Раздел "Events"

Доступ к другому элементу, связанному с событием, если такой элемент существует.
Сигнатура
event.relatedTarget() → Number
Параметры
Description

Доступ к другому элементу, связанному с событием, если такой элемент существует.

Примеры:

Пример:

Отобразить координаты курсора мыши относительно краёв окна браузера:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: #eef; }
div { padding: 20px;background-color: green; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("a").mouseout(function(event) {
  alert(event.relatedTarget.nodeName); // "DIV"
});

  });
  </script>

<div>
default click action is prevented
</div>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/event.relatedTarget/


jQuery event.result()

[Функция] event.result()
Раздел "Events"

Данный атрибут содержит последнее значение, возвращаемое обработчиком, который был связан с данным событием, за исключением, если значение не определено (undefined).
Сигнатура
event.result() → Object
Параметры
Примеры:

Пример:

Вывести сообщение со значением, которое содержится в обработчике.

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:100px; height:100px;
    background:green; float:left;color:white;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").click(function(event) {
  return "hey"
});
$("div").click(function(event) {
  alert( event.result );
});

  });
  </script>

<div>

</div>

</body>
</html>

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/event.result/


jQuery event.stopImmediatePropagation()

[Функция] event.stopImmediatePropagation()
Раздел "Events"

Отключить выполнение других обработчиков данного события за исключением существующего.
Сигнатура
event.stopImmediatePropagation() → Number
Параметры
Description

Данный метод так же косвенным образом отключает действие метода event.stopPropagation(). Используйте метод event.isImmediatePropagationStopped() для того, чтобы определить бл ли вызван метод event.stopImmediatePropagation() для объекта события.

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:100px; height:100px;
    background:green; float:left;color:white;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").click(function(event){
  event.stopImmediatePropagation();
});
$("p").click(function(event){
  // данная функция не будет ваполнена
  $(this).css("background-color", "#f00");
});
$("div").click(function(event) {
  // данныая функция будет выполнена
    $(this).css("background-color", "#f00");
});

  });
  </script>

<p>paragraph</p>
<div>division</div>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/event.stopImmediatePropagation/


jQuery event.stopPropagation()

[Функция] event.stopPropagation()
Раздел "Events"

Данный метод предотвращает всплытие события по элементам структуры DOM, предотвращая при этом срабатывания обработчиков события любых родительских элементов.
Сигнатура
event.stopPropagation() → Number
Параметры
Description

Для проверки был ли запущен метод event.stopPropagation() существует метод .isPropagationStopped() Равным образом данный метод работает и для пользовательских событий, запускаемых с помощью метода trigger(). Учтите, что данный метод не предотвращает срабатывание других обработчиков для этих же элементов. Используйте метод event.isPropagationStopped() для определения был ли применен метод event.stopPropagation() к какому-либо событию объекту.

Примеры:

Пример:

Уничтожить всплытие для события click

<!DOCTYPE html>
<html>
<head>
<style>
div.parent {background-color: #eef; width:200px;height:200px;}
div div { padding: 20px; background-color: red; width:100px;height:100px;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$(".parent").click(function(event){

  alert(1)
// do something
});
$(".child").click(function(event){
  event.stopPropagation();
  alert(2)
// do something
});

  });
  </script>

<div class="parent">
<div class="child">

</div>
</div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/event.stopPropagation/


jQuery event.target

[Функция] event.target
Раздел "Events"

Возвращает имя элемента DOM, инициировавшего событие.
Сигнатура
event.target → Number
Параметры
Description

Имя может быть именем элемента, зарегистрировавшего событие или имя дочернего элемента. Использование данного метода полезно для сравнения event.target с this для определения порядка, если событие было перехвачено обработчиком вследствие всплытия. Так же данное свойство полезно при делегировании события в процессе его всплытия.

Примеры:

Пример:

Отобразить имя тега при нажатии по body:

<!DOCTYPE html>
<html>
<head>
<style>
div.parent {background-color: #eef; width:200px;height:200px;}
div div { padding: 20px; background-color: red; width:100px;height:100px;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("body").click(function(event) {
  $("#log").html("clicked: " + event.target.nodeName);
});

  });
  </script>

<div id="log"></div>
<div>
  <p>
    <strong><span>click</span></strong>
  </p>
</div>

</body>
</html>

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div.parent {background-color: #eef; width:200px;height:200px;}
div div { padding: 20px; background-color: red; width:100px;height:100px;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

function handler(event) {
  var $target = $(event.target);
  if( $target.is("li") ) {
     $target.children().toggle();
  }
}
$("ul").click(handler).find("ul").hide();

  });
  </script>

<ul>
  <li>item 1
    <ul>
      <li>sub item 1-a</li>
      <li>sub item 1-b</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>sub item 2-a</li>
      <li>sub item 2-b</li>
    </ul>
  </li>
</ul>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/event.target/


jQuery event.timeStamp()

[Функция] event.timeStamp()
Раздел "Events"

метод возвращает количество миллисекунд прошедших с 1 января 1970 года, до момента, когда происходит запуск события.
Сигнатура
event.timeStamp() → Number
Параметры
Примеры:

Пример:

Отобразить количество миллисекунд прошедших с последнего запуска события cilck.

<!DOCTYPE html>
<html>
<head>
<style>
div.timer {background-color: #eef; width:200px;height:200px;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var last;
$(".timer").click(function(event) {
   if( last )
      alert( "time since last event " + parseInt(event.timeStamp - last));
   last = event.timeStamp;
});

  });
  </script>

<div class="timer" style="border:1px solid grey;height:100px;">
</div>

</body>
</html>

Метод добавлен в jQuery 1.2.6
Официальная страница метода - http://api.jquery.com/event.timeStamp/


jQuery event.type

[Функция] event.type
Раздел "Events"

Метод возвращает тип события
Сигнатура
event.type → String
Параметры
Примеры:

Пример:

При нажатии любой из ссылок отобразить тип события

<!DOCTYPE html>
<html>
<head>
<style>
div.timer {background-color: #eef; width:200px;height:200px;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").click(function(event) {
  alert(event.type); // "click"
});

  });
  </script>

<div class="timer" style="border:1px solid grey;height:100px;">
</div>

</body>
</html>

Метод добавлен в jQuery 1.2.6
Официальная страница метода - http://api.jquery.com/event.type/


jQuery event.which

[Функция] event.which
Раздел "Events"

Метод позволяет опередить тип нажатой клавиши или кнопки.
Сигнатура
event.which → String
Параметры
Description

event.which упорядочило разногласия event.keyCode и event.charCode. Рекомендуется использовать данный метод. Подробно об этом написано на https://developer.mozilla.org/en/DOM/event.charCode#Notes

Примеры:

Пример:

Отобразить тип клавиши:

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$('#whichkey').bind('keydown',function(e){
  $('#log').html(e.type + ': ' +  e.which );
});

  });
  </script>

<input id="whichkey" value="type something">
<div id="log" style="border:1px solid grey;height:100px;">
</div>

</body>
</html>

Метод добавлен в jQuery 1.1.3
Официальная страница метода - http://api.jquery.com/event.which/


jQuery

jQuery документацияSlyweb.ru
События браузера:
error()
Функция запускает событие error для каждого выбранного элемента.

error(fn)
Связать функцию с событием error для каждого подходящего элемента.

resize(fn)
Связать функцию с событием resize для каждого подходящего элемента.

scroll(fn)
Связать функцию с событием scroll для каждого подходящего элемента.


jQuery error()

[Функция] error()
Раздел "Events"

Функция запускает событие error для каждого выбранного элемента.
Сигнатура
error() → jQuery
Параметры
Description

Метод вызывает и выполняет функцию, которая была связанна с событием error(), и вызывает действие браузера по умолчанию - error для подходящего(их) элемента (ов). Действие по умолчанию может быть предотвращено возвратом false одной из функций, связанных с событием error().

Примеры:
Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/error/


jQuery error(fn)

[Функция] error(fn)
Раздел "Events"

Связать функцию с событием error для каждого подходящего элемента.
Сигнатура
error(fn) → jQuery
Параметры
error(fn)
1.0
fn: обарботчик событий, связанный с событием error. function callback(eventObject) { this; // dom element }
Description

Не существует общепринятого стандарта получения события error. В большинстве браузеров, событие error объекта window возникает, когда происходит JavaScript ошибка на странице. Событие error объекта изображения происходит, когда указан неправильный src атрибут - или не существующий файл, или данные повреждены.

Если событие передано объектом window, обработчик событий принимает три параметра: Сообщение, описывающее событие ("varName is not defined", "missing operator in expression", и т.д.), абсолютный URL документа содержащего ошибку, и позицию линии на которой произошла ошибка. Если обработчик вернёт true, это означает, что событие было обработано и браузер не нашёл ошибок. Более подробно об этом смотрите:

msdn - onerror Event Gecko DOM Reference - onerror Event DOM Events

Примеры:

Пример:

Cохранить на сервере лог JavaScript ошибок, указав:

$(document).ready(function(){

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

  });

Пример:

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

$(document).ready(function(){

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

  });

Пример:

Чтобы скрыть "поврежденное изображение" для ваших пользователей, использующих IE, вы можете указать:

$(document).ready(function(){

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

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/


jQuery resize(fn)

[Функция] resize(fn)
Раздел "Events"

Связать функцию с событием resize для каждого подходящего элемента.
Сигнатура
resize(fn) → jQuery
Параметры
resize(fn)
1.0
fn: функция, связывающая событие resize для каждого выбранного элемента. function callback(eventObject) { this; // dom element }
Description

Событие resize запускается, когда окно просмотра(браузера) изменено.

Примеры:

Пример:

Запретить изменять размеры окна:

$(document).ready(function(){

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

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/resize/


jQuery scroll(fn)

[Функция] scroll(fn)
Раздел "Events"

Связать функцию с событием scroll для каждого подходящего элемента.
Сигнатура
scroll(fn) → jQuery
Параметры
scroll(fn)
1.0
fn: функция, связывающая событие scroll для каждого подходяещго элемента. function callback(eventObject) { this; // dom element }
Description

Событие scroll запускается, при прокрутке окна.

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>
<div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/scroll/


jQuery

jQuery документация Slyweb.ru
События клавиатуры:
focusin( handler(eventObject) )
Метод позволяет связать обработчик события с javascript событием focusin.

focusout( handler(eventObject) )
Метод позволяет связать обработчик события с javascript событием focusout.

hover(over, out)
Функция имитирует css свойство hover (при помещениеи курсора мыши на элемент и отведении курсора мыши от элемента). Данная функция представляет собой пользовательский метод, который обеспечивает выполнение частных задач.

keydown()
Запустить событие keydown для каждого подходящего элемента.

keydown(fn)
Связать функцию с событием keydown для каждого подходящего элемента.

keydown()
Вызвать событие keypress для каждого соответствующего элемента.

keypress(fn)
Связать функцию с событием keydown для каждого подходящего элемента.

keyup()
Запустить событие keyup для каждого подходящего элемента.

keyup(fn)
Свзать функцию с событию keyup для каждого подходящего элемента.


jQuery focusin( handler(eventObject) )

[Функция] focusin( handler(eventObject) )
Раздел "Events"

Метод позволяет связать обработчик события с javascript событием focusin.
Сигнатура
focusin( handler(eventObject) ) → String
Параметры
focusin( handler(eventObject) )
1.4
handler(eventObject): функция, выполняемая каждый раз при запуске события focusin.
Description

Данный метод - сокращенный аналог .bind('focusin', handler). Событие focusin возникает в случае передачи фокуса элементу или элементам расположенным внутри него. Это основное отличие от события focus, при использовании данного метода фокус передаётся только родительскому элементу. Данное событие вероятнее всего необходимо использовать с событием focusout.

Примеры:

Пример:

Отобразить тип клавиши:

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("p").focusin(function() {
         $(this).find("span").css('display','inline').fadeOut(1000);
    });

  });
  </script>

    <p><input type="text" /> <span>focusin fire</span></p>
<p><input type="password" /> <span>focusin fire</span></p>

</body>
</html>

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/focusin/


jQuery focusout( handler(eventObject) )

[Функция] focusout( handler(eventObject) )
Раздел "Events"

Метод позволяет связать обработчик события с javascript событием focusout.
Сигнатура
focusout( handler(eventObject) ) → String
Параметры
focusout( handler(eventObject) )
1.4
handler(eventObject): функция, выполняемая каждый раз при запуске события.
Description

Событие focusin возникает в случае утери фокуса элементом или элементами расположенным внутри него. Это основное отличие от события blur, при использовании данного метода отслеживание потери фокуса происходит для родительского элемента. Данное событие, вероятнее всего, необходимо использовать с событием focusin.

Примеры:

Пример:

Отобразить тип клавиши:

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

  });
  </script>

    <p><input type="text" /> <span>focusin fire</span></p>
<p><input type="password" /> <span>focusin fire</span></p>

</body>
</html>

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/focusout/


jQuery keydown()

[Функция] keydown()
Раздел "Events"

Вызвать событие keypress для каждого соответствующего элемента.
Сигнатура
keydown() → jQuery
Параметры
Description

Примеры:
Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/keypress/


jQuery keydown(fn)

[Функция] keydown(fn)
Раздел "Events"

Связать функцию с событием keydown для каждого подходящего элемента.
Сигнатура
keydown(fn) → jQuery
Параметры
keydown(fn)
1.0
fn: функция, связывающая событие keydown для каждомого подходящего элемента. function callback(eventObject) { this; // dom element }
Description

Примеры:

Пример:

Выполнить действие в ответ на нажатие клавиши:

$(document).ready(function(){

$(window).keydown(function(event){
  switch (event.keyCode) {
    // ...
    // различные клавиши выполняют соответствующие функции
    // Каждый браузер по-разному определяет клавишу
    // подробнее об этом см.: key
    // ...
  }
});

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/keydown/


jQuery keypress(fn)

[Функция] keypress(fn)
Раздел "Events"

Связать функцию с событием keydown для каждого подходящего элемента.
Сигнатура
keypress(fn) → jQuery
Параметры
keypress(fn)
1.0
fn: функция, связывающая событие keypress для каждого подходящего элемента. function callback(eventObject) { this; // dom element }
Description

Событие keypress возникает, когда клавиша "зажата". Событие keypress равнозначно событиям keydown и keyup для любой клавиши. Последовательность данных событий: keydown keypress keyup.

Примеры:

Пример:

Показать печатаемые пробелы и буквы.

<!DOCTYPE html>
<html>
<head>
<style>
  input { margin:10px; }
  p { color:blue; margin:10px; font-size:18px; }
  p.hilite { background:yellow; }
  div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("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/>"))
              .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);
    });

  });
  </script>

<input type="text" />
<p>Add text - </p>
<div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/keypress/


jQuery keyup()

[Функция] keyup()
Раздел "Events"

Связать функцию с событием mousedown для каждого подходящего элемента. function callback(eventObject) {this; // dom element}
Сигнатура
keyup() → jQuery
Параметры
keyup()
1.0
fn: функция, связывающая событие mousedown для каждого подходящего элемента. function callback(eventObject) { this; // dom element }
Description

Событие возникает, когда кнопка мыши нажата на элементе.

Примеры:

Пример:

Отобразить текст, когда события mouseup и mousedown запущены:

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("p").mouseup(function(){
      $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
      $(this).append('<span style="color:#00F;">Mouse down.</span>');
    });

  });
  </script>

<p>Press mouse and release here.</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/mousedown/


jQuery keyup(fn)

[Функция] keyup(fn)
Раздел "Events"

Свзать функцию с событию keyup для каждого подходящего элемента.
Сигнатура
keyup(fn) → jQuery
Параметры
keyup(fn)
1.0
fn: функция, связывающая событие keyup для каждого подходящего элемента. function callback(eventObject) { this; // dom element }
Description

Данное событие возникает, когда отжата клавиша.

Примеры:

Пример:

Выполнить действие, когда escape клавиша будет отжата:

$(document).ready(function(){

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

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/keyup/


jQuery

jQuery Slyweb.ru
Методы, обработчики, события связанные с нажатием на кнопки мыши:
click()
Запустить событие click для каждого подходящего элемента.

click(fn)
Связать функцию с событием click для каждого подходящего элемента.

dblclick()
Запустить событие dblclick для каждого подходящего элемента

dblclick(fn)
Связать функцию с событием dblclick для каждого подходящего элемента.

mousemove(fn)
Связать функцию с событию mousemove для каждого подходящего элемента.

mouseout(fn)
Связать функцию с событию mouseout для каждого подходящего элемента.

mouseover(fn)
Связать функцию с событием mouseover для каждого подходящего элемента.

mouseup(fn)
Связать функцию с событием mouseup для каждого подходящего элемента.


jQuery blur()

[Функция] blur()
Раздел "Events"

Запустить событие blur для каждого подходящего элемента.
Сигнатура
blur() → jQuery
Параметры
Description

Данная функция запускает все функций, которые были связаны с событием blur, и вызывает действие браузера blur по умолчанию для подходящего(их) элемента(ов). Действие по умолчанию может быть предотвращено возвратом false, одной из функциий связанной с blur событием. Событие blur обычно запускается, когда элемент перестаёт находиться в фокусе курсора мыши или при переключении с помощью кнопки tab.

Примеры:

Пример:

Запустить событие blur для всех параграфов:

$(document).ready(function(){

$("p").blur();

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/blur/


jQuery blur(fn)

[Функция] blur(fn)
Раздел "Events"

Связать функцию с событием blur для каждого подходящего элемента.
Сигнатура
blur(fn) → jQuery
Параметры
blur(fn)
1.0
fn: функция, связывающая событием blur для каждого из подходящих элементов. function callback(eventObject) { this; // dom element }
Description

Событие blur запускается, когда элемент теряет фокус или при переключении фокуса с использованием мыши или при переключении кнопки tab.

Примеры:

Пример:

Запустить события blur.

<!DOCTYPE html>
<html>
<head>
<style>
span {display:none;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p><input type="text" /> <span>blur fire</span></p>
<p><input type="password" /> <span>blur fire</span></p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/blur/


jQuery change()

[Функция] change()
Раздел "Events"

Запустить событие change для каждого подходящего элемента.
Сигнатура
change() → jQuery
Параметры
Description

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

Примеры:
Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/change/


jQuery change(fn)

[Функция] change(fn)
Раздел "Events"

Связать функцию с событием change для каждого подходящего элемента.
Сигнатура
change(fn) → jQuery
Параметры
change(fn)
1.0
fn: функция, связывающая событием change для каждого подходящего элемента. function callback(eventObject) { this; // dom element }
Description

Событие change запускается, когда утерян контроль над фокусом поля input и значение поля было изменено с того момента, как получило фокус.

Примеры:

Пример:

Привязать событие change к элементу select, которое получает текст каждого выбронного элемента option, и указать данный текст затем в элементе div. Первоначальный вывод текста происходит в результате инициирования события Change.

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<select name="sweets" multiple="multiple">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>
    <option>Taffy</option>
    <option selected="selected">Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
  <div></div>

</body>
</html>

Пример:

Добавить проверочный тест ко всем полям формы, тип которых - text:

$(document).ready(function(){

$("input[@type='text']").change( function() {
  // check input ($(this).val()) for validity here
});

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/change/


jQuery focus()

[Функция] focus()
Раздел "Events"

Запустиь событие focus для каждого подходящего элемента.
Сигнатура
focus() → jQuery
Параметры
Description

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

Примеры:

Пример:

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

$(document).ready(function(){

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

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/focus/


jQuery focus(fn)

[Функция] focus(fn)
Раздел "Events"

Связать функцию с событием focus для каждого подходящего элемента.
Сигнатура
focus(fn) → jQuery
Параметры
focus(fn)
1.0
fn: функция, связывающая событие focus для каждого подходящего элемента. function callback(eventObject) { this; // dom element }
Description

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

Примеры:

Пример:

Запустить событие focus.

<!DOCTYPE html>
<html>
<head>
<style>
span {display:none;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>

</body>
</html>

Пример:

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

$(document).ready(function(){

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

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/focus/


jQuery select()

[Функция] select()
Раздел "Events"

Функция запускает событие select для каждого подходящего элемента.
Сигнатура
select() → jQuery
Параметры
select()
1.0
fn: функция, «связывающая» событие scroll для каждого выбранного элемента. function callback(eventObject) { this; // dom element }
Description

Функция запускает все связанные с событием select функции, и вызывает событие select как действие браузера по умолчанию для выбранного(ых) элемента(ов). Действие по умолчанию может быть предотвращено возвращением false, одной из функций, связанных с событием select. Примечание: не смешивайте "select" событие с <a <![CDATA[change событием, которое запускается единожды, когда элемент option поля "select" изменяется пользователем.

Примеры:

Пример:

Запустить событие select для всех элементов input:

$(document).ready(function(){

$("input").select();

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/select/


jQuery select(fn)

[Функция] select(fn)
Раздел "Events"

Связать функцию с событим select для каждого подходящего элемента.
Сигнатура
select(fn) → jQuery
Параметры
select(fn)
1.0
fn: функция, связывающая событием select для каждого выбранного элемента. function callback(eventObject) { this; // dom element }
Description

Событие select возникает, когда пользователь выбирает некоторый текст в текстовом поле, включающим элементы input и textarea.

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; }
div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $(document).select( function () {
      $("div").text("Something was selected").show().fadeOut(1000);
    });

  });
  </script>
<p>
Нажмите и выделите выбарнный текст в поле input.
</p>
<input type="text" value="Some text" />
<input type="text" value="to test on" />
<div></div>
</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/select/


jQuery submit()

[Функция] submit()
Раздел "Events"

Функция запускает событие submit для каждого выбранного элемента.
Сигнатура
submit() → jQuery
Параметры
submit()
1.0
fn: функция, связывающая событие select для каждого выбранного элемента. function callback(eventObject) { this; // dom element }
Description

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

Примеры:

Пример:

Запустись событие submit для первой формы:

$(document).ready(function(){

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

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/submit/


jQuery submit(fn)

[Функция] submit(fn)
Раздел "Events"

Связать функцию с событием submit для каждого подходящего элемента.
Сигнатура
submit(fn) → jQuery
Параметры
submit(fn)
1.0
fn: функция, связывающая событием submit для каждого подходящего элемента. function callback(eventObject) { this; // dom element }
Description

Событие submit запускается, при отправке данных формы

Примеры:

Пример:

Для недопущения отправки данных из существующей формы, до тех пор пока не установлена переменная:

<!DOCTYPE html>
<html>
<head>
<style>
p { margin:0; color:blue; }
div,p { margin-left:10px; }
span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("form").submit(function() {
      if ($("input:first").val() == "correct") {
        $("span").text("Validated...").show();
        return true;
      }
      $("span").text("Not valid!").show().fadeOut(1000);
      return false;
    });

  });
  </script>
<p>Type 'correct' to validate.</p>
  <form action="javascript:alert('success!');">
    <div>
      <input type="text" />
      <input type="submit" />
    </div>
  </form>
  <span></span>
</body>
</html>

Пример:

Для недопущения отправки данных из существующей формы до тех пор пока не установлена переменная:

$(document).ready(function(){

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

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/submit/


jQuery

jQuery Slyweb.ru
События загрузки DOM:
load(fn)
Связать функцию с событием load для каждого подходящего элемента.

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

unload(fn)
Связать функцию с событием unload для каждого выбранного элемента.


jQuery load(fn)

[Функция] load(fn)
Раздел "Events"

Связать функцию с событием load для каждого подходящего элемента.
Сигнатура
load(fn) → jQuery
Параметры
load(fn)
1.0
fn: ): функция, связывающая событие load для каждого подходящего элемента. function callback(eventObject) { this; // dom element }
Description

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

Примечание переводчика. в руководстве jQuery указано: "Примечание: функция будет работать, только если вы установите её перед элементом, который полностью загружен, если вы установите её после элемента ничего не произойдёт. Данный метод не ведёт себя так же как $(document).ready(), где вы более свободно можете использовать jQuery обработчик, то есть, даже установив $(document).ready() после того как будет загружен DOM." Данное примечание неверно, если вы установить функцию load(fn) до элемента, то ничего не произойдёт, наоборот если вы её укажите после элемента, то функция будет выполнена.

Примеры:

Пример:

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

$(document).ready(function(){

$(window).load(function () {
  // код…
});

  });

Пример:

Добавить класс bigImg ко всем загружаемым изображениям, размер которых больше чем 100 px.

$(document).ready(function(){

$('img.userIcon').load(function(){
  if($(this).height() > 100) {
    $(this).addClass('bigImg');
  }
});

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/load/


jQuery ready(fn)

[Функция] ready(fn)
Раздел "Events"

Данная функция позволяет связать выполнение определенной функции с моментом, когда документ DOM готов к использованию и манипуляции.
Сигнатура
ready(fn) → jQuery
Параметры
ready(fn)
1.0
fn: выполняемая функция, когда структура DOM готова к использованию. function callback(jQueryReference) { this; // document }
Description

Вероятно данная функция, одна из важнейших функций, включённых в модуль событий, так как функция весьма ускоряет время ответа вашего приложения. В дальнейшем данная функция заменит событие window.onload, и присоединяемые к нему функции. При использовании данного метода, связанная функция будет вызвана немедленно после того как DOM будет готов для чтения и манипуляции, то есть тогда, когда 99.99% всего JavaScript кода необходимо запускать. Функция содержит один аргумент передаваемый обработчику события ready: ссылка на jQuery функцию. Вы можете назвать этот аргумент как угодно и вследствие этого применять $ псевдоним без риска конфликта имён. Вы можете использовать столько событий $(document).ready на вашей странице, сколько пожелаете. Функция будет выполняться в том порядке, в котором вы её добавляли. Примечание: Пожалуйста, будьте уверены, что все ваши листы стилей подключены перед скриптами (особенно те которые используются данной функцией). Применяя данную функцию, будьте уверены, что все ваши стили загружены и готовы до того как код jQuery начнёт использоваться.

Примеры:

Пример:

Вывести сообщение, когда DOM структура загрузится.

<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$(document).ready(function () {
    $("p").text("DOM загружен и может быть использован.");
});

  });
  </script>

<p>
  </p>

</body>
</html>

Пример:

Для выполнения кода, когда DOM структура загружаена, укажите следующее:

$(document).ready(function(){

$(document).ready(function(){
  // Your code here...
});

  });

Пример:

Чтобы использовать оба - сокращение для $(document).ready() и аргумент устанавливающий ошибкоустойчивый код jQuery, использующий $ псевдоним, не полагаясь на глобальный псевдонимом, укажите:

$(document).ready(function(){

jQuery(function($) {
  // Ваш код, использующий ошибкоустойчивый $ псевдоним...
});

  });

Пример:

Обычно записываемый как:

$(document).ready(function(){

$(function() {
  // Ваш код...
});

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/ready/


jQuery unload(fn)

[Функция] unload(fn)
Раздел "Events"

Связать функцию с событием unload для каждого выбранного элемента.
Сигнатура
unload(fn) → jQuery
Параметры
unload(fn)
1.0
fn: функция, связанная с событием unload для каждого выбраного элемнета . function callback(eventObject) { this; // dom element }
Description

функция, связанная с событием unload для каждого выбраного элемнета. <codeinp> function callback(eventObject) { this; // dom element } <codeinp>

Примеры:

Пример:

Показать диалоговое окно, когда страница закрывается:

$(document).ready(function(){

$(window).unload( function () { alert("Пока!"); } );

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/unload/


jQuery click()

[Функция] click()
Раздел "Events"

Запустить событие click для каждого подходящего элемента.
Сигнатура
click() → jQuery
Параметры
Description

Функция вызывает и выполняет все функции, которые были связаны с событием click.

Примеры:

Пример:

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

$(document).ready(function(){

$("p").click();

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/click/


jQuery click(fn)

[Функция] click(fn)
Раздел "Events"

Связать функцию с событием click для каждого подходящего элемента.
Сигнатура
click(fn) → jQuery
Параметры
click(fn)
1.0
fn: функция, связывающая событие click для каждого подходящего элемента. function callback(eventObject) { this; // dom element }
Description

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

Примеры:

Пример:

Скрыть параграфы на странице, когда по ним происходит нажатие:

<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; margin:5px; cursor:pointer; }
p.hilite { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/click/


jQuery dblclick()

[Функция] dblclick()
Раздел "Events"

Запустить событие dblclick для каждого подходящего элемента
Сигнатура
dblclick() → jQuery
Параметры
Description

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

Примеры:
Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/dblclick/


jQuery dblclick(fn)

[Функция] dblclick(fn)
Раздел "Events"

Связать функцию с событием dblclick для каждого подходящего элемента.
Сигнатура
dblclick(fn) → jQuery
Параметры
dblclick(fn)
1.0
fn: функция, связывающая событие dblclick с каждым подходящим элементом. function callback(eventObject) { this; // dom element }
Description

Событие dblclick запускается, когда кнопка мыши дважды нажата над элементом.

Примеры:

Пример:

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

$(document).ready(function(){

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

  });

Пример:

Дважды щелкните, чтобы переключить фоновый цвет.

<!DOCTYPE html>
<html>
<head>
<style>
div { background:blue;
        color:white;
        height:100px;
        width:150px;
 }
  div.dbl { background:yellow;color:black; }</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>
<div></div><span>Double click the block</span>
</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/dblclick/


jQuery hover(over, out)

[Функция] hover(over, out)
Раздел "Events"

Функция имитирует css свойство hover (при помещениеи курсора мыши на элемент и отведении курсора мыши от элемента). Данная функция представляет собой пользовательский метод, который обеспечивает выполнение частных задач.
Сигнатура
hover(over, out) → jQuery
Параметры
hover(over, out)
1.3
over: функция, исполняемая, когда курсор маши наведён над выбранным элементом. function callback(eventObject) { this; // dom element }
out: исполняемая функция, когда курсор мыши отведён над выбранным элементом. function callback(eventObject) { this; // dom element }
Description

Когда курсор мыши наведен над подходящим элементом, первая заданная функция выполняется (over). Всякий раз как курсор мыши будет отведён от элемента, вторая заданная функция выполняется (out). В дополнение, убедитесь в следующем - пока курсор мыши внутри определенного элемента (например зображение внутри элемента div), функция будет повторятся и не прекратится (общая ошибка в использовании обработчика события mouseout).

Примеры:

Пример:

Добавить особый стиль к элементам списка при наведении мыши:

<!DOCTYPE html>
<html>
<head>
<style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("li").hover(
      function () {
        $(this).append($("<span> ***</span>"));
      },
      function () {
        $(this).find("span:last").remove();
      }
    );
//Другой пример, отражающий имитацию свойства hover с гиперсылками
$("a").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

  });
  </script>

<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Chips</li>
    <li>Socks</li>
  </ul>

</body>
</html>

Пример:

Добавить особый стиль к ячейкам таблицы, придающий им эффект hover:

$(document).ready(function(){

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

  });

Пример:

Освободить обработчик при применении предыдущего примера:

$(document).ready(function(){

$("td").unbind('mouseenter mouseleave');

  });

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/hover/


jQuery mousemove(fn)

[Функция] mousemove(fn)
Раздел "Events"

Связать функцию с событию mousemove для каждого подходящего элемента.
Сигнатура
mousemove(fn) → jQuery
Параметры
mousemove(fn)
1.0
fn: функция, привязанная к событию mousemove и нужному вам элементу элементу. function callback(eventObject) { this; // dom element }
Description

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

Примеры:

Пример:

Показать координаты курсора мыши перемещаемой над элементом div. Координаты относительно элемента window.

<!DOCTYPE html>
<html>
<head>
<style>  div { width:250px; height:170px; margin;10px; margin-right:50px;
        background:yellow; border:2px groove; float:right; }
  p { margin:0; margin-left:10px; color:red; width:250px;
      height:120px; padding-top:70px;
      float:left; font-size:14px; }
  span { display:block; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>
    Попробуйте перемещать курсор.
    <span>Двигайте мышью над div.</span>
    <span> </span>
  </p>
  <div></div>
</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/mousemove/


jQuery mouseout(fn)

[Функция] mouseout(fn)
Раздел "Events"

Связать функцию с событию mouseout для каждого подходящего элемента.
Сигнатура
mouseout(fn) → jQuery
Параметры
mouseout(fn)
1.0
fn: функция, связывающая событию mousemove для каждого подходящего элемента. function callback(eventObject) { this; // dom element }
Description

Событие возникает, когда курсор мыши удалён от элемента.

Примеры:

Пример:

Отобразить текст, когда события mouseover и mouseout запущены. Событие mouseout запускается, когда курсор помещается или удаляется от элемента обозначаемого как "ребёнок", до тех пор пока не произойдёт событие mouseleave.

<!DOCTYPE html>
<html>
<head>
<style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

  var i = 0;
    $("div.overout").mouseout(function(){
      $("p:first",this).text("mouse out");
      $("p:last",this).text(++i);
    }).mouseover(function(){
      $("p:first",this).text("mouse over");
    });

    var n = 0;
    $("div.enterleave").bind("mouseenter",function(){
      $("p:first",this).text("mouse enter");
    }).bind("mouseleave",function(){
      $("p:first",this).text("mouse leave");
      $("p:last",this).text(++n);
    });

  });
  </script>

<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>
<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/mouseout/


jQuery mouseover(fn)

[Функция] mouseover(fn)
Раздел "Events"

Связать функцию с событием mouseover для каждого подходящего элемента.
Сигнатура
mouseover(fn) → jQuery
Параметры
mouseover(fn)
1.0
fn: функция, связывающая событие mouseover для всех подходящих элементов. function callback(eventObject) { this; // dom element }
Description

Событие mouseover возникает, когда курсор мыши перемещается по элементу.

Примеры:

Пример:

Показывать текст, когда события mouseover и mouseout запущены. Mouseover событие запускается, когда указатель мыши передвигается внутрь или удаляется от элемента, до тех пор пока не произошло событие mouseenter.

<!DOCTYPE html>
<html>
<head>
<style>  div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
      $("p:last",this).text(++i);
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
    });

    var n = 0;
    $("div.enterleave").bind("mouseenter",function(){
      $("p:first",this).text("mouse enter");
      $("p:last",this).text(++n);
    }).bind("mouseleave",function(){
      $("p:first",this).text("mouse leave");
    });

  });
  </script>

<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>
<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/mouseover/


jQuery mouseup(fn)

[Функция] mouseup(fn)
Раздел "Events"

Связать функцию с событием mouseup для каждого подходящего элемента.
Сигнатура
mouseup(fn) → jQuery
Параметры
mouseup(fn)
1.0
fn: функция, связывающая событие mouseup для каждого выбранного элемента. function callback(eventObject) { this; // dom element }
Description

Событие mouseup запускается, когда клавиша мыши отжата над элементом.

Примеры:

Пример:

Показать текст, когда события mouseup и mousedown запущены.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("p").mouseup(function(){
      $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
      $(this).append('<span style="color:#00F;">Mouse down.</span>');
    });

  });
  </script>

<p>Press mouse and release here.</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/mouseup/


jQuery

jQuery Slyweb.ru
Функции обработчики:
bind(type, data, fn)
Функция позволяет связать обработчик с одним событием или несколькими событиями (например с событием click) для каждого подходящего элемента. Функция может связать обработчик событий с пользовательскими событиям.

die(type,n)
Появилось в jQuery 1.3: Функция является противоположностью функции live() и удаляет связанные функцией live() события.

live(type, fn)
Добавлено в jQuery 1.3: Функция позволяет связать обработчик с событием (например с click) для всех текущих – и будущих - подходящих элементов. Так же функция позвляет связывать пользовательское событие с обработчиком.

one(type,data,fn)
Связать обработчик с одним или несколькими событием(ями) чтобы быть выполненным(и) один раз для каждого соответствующего элемента.

jQuery.proxy( function, scope )
Возвращает данные, которые всегда находятся в области видимости функции.

trigger(event,data)
Функция инициирует событие для каждого подходящего элемента.

triggerHandler(event , data )
Специфичный метод, запускающий все связанные обработчики событий с элементами (для особого типа события) БЕЗ выполнения действий браузера по умолчанию и без всплывания событий.

unbind(type,fn)
Функция противоположность функции bind, функция удаляет связанные события для каждого подходящего элемента.


jQuery bind(type, data, fn)

[Функция] bind(type, data, fn)
Раздел "Events"

Функция позволяет связать обработчик с одним событием или несколькими событиями (например с событием click) для каждого подходящего элемента. Функция может связать обработчик событий с пользовательскими событиям.
Сигнатура
bind(type, data, fn) → jQuery
Параметры
bind(type, data, fn)
1.0
type: один или несколько событий разделенных пробелом.
data: добавочные данные, переданные обработчику как event.data.
fn: функция, связанная с событием для каждого выбранного элемента, перехватывающая объект события. function callback(eventObject) { this; // dom element }
Description

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

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

Примеры:

Пример:

Нажатие или двойное нажатие в качестве события. Примечание: координаты окна указаны относительно демонстрационного элемента iframe.

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});

  });
  </script>

<p>Нажатие или двойное нажатие</p>
<span></span>

</body>
</html>

Пример:

Показать текст каждого параграфа в диалоговом окне всякий раз по щелчку:

$(document).ready(function(){

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

  });

Пример:

Вы можете передать дополнительные данные перед обработчиком события:

$(document).ready(function(){

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

  });

Пример:

Отменить действие по умолчанию и предотвратить всплывание события, укажите false:

$(document).ready(function(){

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

Пример:

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

$(document).ready(function(){

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

  });

Пример:

$(document).ready(function(){

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

  });

Пример:

Можно связать функцию с пользовательскими события.

<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("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" ]);
    });

  });
  </script>

<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/bind/


jQuery die(type,n)

[Функция] die(type,n)
Раздел "Events"

Появилось в jQuery 1.3: Функция является противоположностью функции live() и удаляет связанные функцией live() события.
Сигнатура
die(type,n) → jQuery
Параметры
die(type,n)
1.3
type: освобождаемый тип события, предварительно связанный функцией live().
fn: функция, освобождаемая от события для каждого набора подходящих элементов.
Description

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

Примеры:

Пример:

Позволяет связать и освободить событие для красной кнопки.

<!DOCTYPE html>
<html>
<head>
<style>
  button { margin:5px; }
  button#theone { color:red; background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>

</body>
</html>

Пример:

Для освобождения всех событий связанных функцией live() из всех параграфов, укажите:

$(document).ready(function(){

$("p").die()

  });

Пример:

Для освобождения всех событий click, связанных с функцией live для всех параграфов, укажите:

$(document).ready(function(){

$("p").die( "click" )

  });

Пример:

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

$(document).ready(function(){

var foo = function () {
  // code to handle some kind of event
};

$("p").live("click", foo); // ... сейчас foo будет вызывана, когда происходит нажатие по параграфам ...

$("p").die("click", foo); // ... foo больше не будет вызвана.

  });

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/die/


jQuery jQuery.proxy( function, scope )

[Функция] jQuery.proxy( function, scope )
Раздел "Events"

Возвращает данные, которые всегда находятся в области видимости функции.
Сигнатура
jQuery.proxy( function, scope ) → String
Параметры
jQuery.proxy( function, scope )
1.4
function: функция, в области видимости которой, будут изменены значения.
scope: объект, находящийся в области видимости функции, значение которого подлежит установке.
jQuery.proxy(scope, name)
1.4
scope: объект, находящийся в области видимости функции, значение которого подлежит установке.
name: объект, находящийся в области видимости функции, значение которого подлежит установке.
Description

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

Примеры:

Пример:

Отобразить тип клавиши:

<!DOCTYPE html>
<html>
<head>
<style>
#test{
background-color:green;
}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var obj = {
  name: "John",
  test: function() {
    alert( this.name );
    $("#test").unbind("click", obj.test);
  }
};

$("#test").click( jQuery.proxy( obj, "test" ) );

// This also works:
// $("#test").click( jQuery.proxy( obj.test, obj ) );

  });
  </script>

<div id="test" style="width:100px;height:100px;"></div>

</body>
</html>

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/jQuery.proxy/


jQuery live(type, fn)

[Функция] live(type, fn)
Раздел "Events"

Добавлено в jQuery 1.3: Функция позволяет связать обработчик с событием (например с click) для всех текущих – и будущих - подходящих элементов. Так же функция позвляет связывать пользовательское событие с обработчиком.
Сигнатура
live(type, fn) → jQuery
Параметры
live(type, fn)
1.3
type: один или несколько типов событий разделенных пробелом.
fn: функция, связывающая событием для каждого из набора подходящих элементов. function callback(eventObject) { this; // dom element }
Description

Поддерживаемые события: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.

Не поддерживаемые события: blur, focus, mouseenter, mouseleave, change, submit.

В отличие от функции bind() только единственное событие может быть связано с функцией live().

Функция ведёт себя подобно jQuery bind () методу, но с одним важным отличием: Когда вы связываете с помощью функции live () событие, функция свяжет с данным событием все текущие и будущие элементы на странице (используется http://www.sitepoint.com/blogs/2008/07/23/javascript-event-delegation-is-easier-than-you-think/ event delegation]).

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

События, связанные функцией live() не «всплывают» по документу в традиционной манере и не могут быть остановлены применением свойств stopPropagation или stopImmediatePropagation.

К примеру, возьмём два примера с событиями click – первое связано с элементом li и второе с элементом a, вложенным в элемент li. Если вы кликните по элементу anchor оба события будут инициированы. Это происходит, потому что связывание $("li").bind("click", fn); можно охарактеризовать следующими словами: «Где ни произойдёт событие click, - по элементу li или внутри элемента li, - инициировать данное событие click.

В настоящий момент функцией live() и связанные ею события выполняются, когда она указана напротив селектора. К примеру, данный случай будет работь: $("a").live(...), но этот случай не будет $("a", someElement).live(...) и этот не будет работать $("a").parent().live(...).

Функция live() ведёт себя подобно популярному [http://plugins.jquery.com/project/livequery liveQuery] плагину, но с некоторыми отличиями:

* .live (сейчас) поддерживает подмножество событий. Список поддерживаемых/неподдерживаемых событий смотрите выше.

* .live не поддерживает свойство no-event style callback, которое используется в liveQuery. Только обработчики события могут быть связаны функцией .live.

* .live не имеет свойств "setup" or "cleanup", поскольку все события передаются раньше, чем происходит связывание.

Чтобы удалить связанные функцией live() события вы должны использовать функцию die().

Примеры:

Пример:

По щелчку на параграфе добавить еще один. Учтите, что функция live() связывает событие click со всеми параграфами – даже с вновь созданными.

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("p").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });

  });
  </script>

<p>Click me!</p>
<span></span>

</body>
</html>

Пример:

Показать текст всех параграфов в диалоговом окне, когда происходит нажатие:

$(document).ready(function(){

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

  });

Пример:

Отменить действия по умолчанию и предотвратить всплывания событий, вернув false:

$(document).ready(function(){

$("a").live("click", function() { return false; })

  });

Пример:

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

$(document).ready(function(){

$("a").live("click", function(event){
  event.preventDefault();
});

  });

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>

</body>
</html>

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/live/


jQuery one(type,data,fn)

[Функция] one(type,data,fn)
Раздел "Events"

Связать обработчик с одним или несколькими событием(ями) чтобы быть выполненным(и) один раз для каждого соответствующего элемента.
Сигнатура
one(type,data,fn) → jQuery
Параметры
one(type,data,fn)
1.0
type: тип события.
data: дополнительные данные, переданные обработчику как event.data.
fn: функция, связывающая определенное событие с каждым из подходящих элементов. function callback(eventObject) { this; // dom element }
Description

Обработчик выполняется единожды для каждого элемента. Иной способ, иные правила описаны при использовании bind(). Обработчик события перехватывает объект события, для которого вы можете предотвратить выполнения действия по умолчанию. Для прекращения выполнения действий по умолчанию и всплывания события, ваш обработчик должен возвратить false. В большинстве случаев, вы можете назвать ваш обработчик как анонимную функцию (1 пример). В случае если это невозможно, вы можете передать дополнительные данные во втором параметре (и обработчик функцию в третьем).

Допустимые события: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

Примеры:

Пример:

Связать одиночный клик с каждым div элементом.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:5px; float:left;
        background:green; border:10px outset;
        cursor:pointer; }
  p { color:red; margin:0; clear:left; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var n = 0;
    $("div").one("click", function(){
      var index = $("div").index(this);
      $(this).css({ borderStyle:"inset",
                    cursor:"auto" });
      $("p").text("Div at index #" + index + " clicked." +
                  "  That's " + ++n + " total clicks.");
    });

  });
  </script>

<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <p>Click a green square...</p>

</body>
</html>

Пример:

Отображение текста каждого параграфа в диалоговом окне один раз по событию onclick:

$(document).ready(function(){

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

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/one/


jQuery trigger(event,data)

[Функция] trigger(event,data)
Раздел "Events"

Функция инициирует событие для каждого подходящего элемента.
Сигнатура
trigger(event,data) → jQuery
Параметры
trigger(event,data)
1.0
event: запускаемое событие объект или его тип.
data: дополнительные данные, передаваемые в качетсве аргумента (после события объекта) к обработчику события.
Description

Данная функция выступает причиной создания действия по умолчанию для браузера с таким же именем (если оно существует), для того чтобы быть выполненным. К примеру передача события 'submit' функции trigger(), будет причиной отправки браузеру формы. Это действие по умолчанию может быть предотвращено возвращением false одной из функций связанного события.

Инициировать можно не только те события, которые поддерживаются браузером, вы можете инициировать пользовательское событие связанное с функцией. Обработчик события получит зафиксированное (нормализованное) событие - объект, но оно не будет содержать любые специфичные для браузера атрибуты (например, такие как keyCode, pageX, или pageY). jQuery так же поддерживает пространство имен событий. Это позволяет вам инициировать или освобождать особые группы связанных обработчиков без указания ссылки на них напрямую. Вы можете добавить знак ! к концу событий, чтобы инициировать только обработчики, которые не имеют определенного пространства имён.

Новое в jQuery 1.3: Все инициированные события немедленно всплывают по структуре DOM документа. К примеру, если вы инициируете событие для параграфа этот элемент будет инициирован первым, затем его родительский элемент, и его родительский элемент, и так далее по документу. Событие объект будет иметь .target свойство подобное оригинальному инициированому элементу.

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

Доступны 3 способа определения события:

Вы можете указать имя события (тип) как строку.

Вы можете так же использовать jQuery.Event объект.

Вы можете указать данные в объекте, которые будут переданы обработчику. В заключение, вы можете передать буквальный объект с данными. Это приведет к копированию jQuery.Event объекта. Учтите, что вы должны определить тип атрибута в данном случае.

Примеры:

Пример:

Нажатие по кнопке с номером 2 приведёт к нажатию по кнопке с номером 1.

<!DOCTYPE html>
<html>
<head>
<style>
  button { margin:10px; }
  div { color:blue; font-weight:bold; }
  span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("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(), 10);
      j.text(n + 1);
    }

  });
  </script>

<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>

</body>
</html>

Пример:

Отправка формы без использования функции submit():

$(document).ready(function(){

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

  });

Пример:

То же самое, что и предыдущий пример:

$(document).ready(function(){

var event = jQuery.Event("submit");
$("form:first").trigger(event);
if ( event.isDefaultPrevented() ) {
  // Perform an action...
}

  });

Пример:

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

$(document).ready(function(){

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

  });

Пример:

Передать произвольные данные через событие объект:

$(document).ready(function(){

var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);

  });

Пример:

Дополнительный путь передать данные через событие объект:

$(document).ready(function(){

$("body").trigger({
  type:"logged",
  user:"foo",
  pass:"bar"
});

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/trigger/


jQuery triggerHandler(event , data )

[Функция] triggerHandler(event , data )
Раздел "Events"

Специфичный метод, запускающий все связанные обработчики событий с элементами (для особого типа события) БЕЗ выполнения действий браузера по умолчанию и без всплывания событий.
Сигнатура
triggerHandler(event , data ) → jQuery
Параметры
triggerHandler(event , data )
1.0
type: инициируемый тип события.
data: дополниетльные данные, передаваемые в качестве аргументов (после события объекта) к обработчику.
Description

Данная функция ведёт себя подобно функции trigger(), с двумя важными исключениями: Во первых действия браузера, исполняемые по умолчанию, не запускаются. Во-вторых, событие запускается только для первого элемента в jQuery коллекции. Этот метод возвращает обратную переменную запущенного обработчика, взамен объекта jQuery. Также, если jQuery коллекция пуста, данная функция вернёт 'undefined'.

Примеры:

Пример:

Если вы вызовете .triggerHandler() для события focus как действия браузера по умолчанию, оно не произойдёт, только обработчик событий, связанный с событием focus запускается.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<button id="old">.trigger("focus")</button>
  <button id="new">.triggerHandler("focus")</button><br/><br/>
  <input type="text" value="To Be Focused"/>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/triggerHandler/


jQuery unbind(type,fn)

[Функция] unbind(type,fn)
Раздел "Events"

Функция противоположность функции bind, функция удаляет связанные события для каждого подходящего элемента.
Сигнатура
unbind(type,fn) → jQuery
Параметры
unbind(type,fn)
1.0
type: освобождаемый тип события.
fn: функция, освобождаемая из события для каждого комплекта элементов.
Description

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

Примеры:

Пример:

Можно связать или освободить события связанные с кнопкой.

<!DOCTYPE html>
<html>
<head>
<style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    function aClick() {
      $("div").show().fadeOut("slow");
    }
    $("#bind").click(function () {
      // можно использовать .bind('click', aClick) взамен, но как вариант...
      $("#theone").click(aClick)
                  .text("Can Click!");
    });
    $("#unbind").click(function () {
      $("#theone").unbind('click', aClick)
                  .text("Does nothing...");
    });

  });
  </script>

<button id="theone">Does nothing...</button>
  <button id="bind">Bind Click</button>
  <button id="unbind">Unbind Click</button>
  <div style="display:none;">Click!</div>

</body>
</html>

Пример:

Чтобы освободить все события для параграфов, укажите:

$(document).ready(function(){

$("p").unbind()

  });

Пример:

Чтобы освободить все события click для всех параграфов, укажите:

$(document).ready(function(){

$("p").unbind( "click" )

  });

Пример:

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

$(document).ready(function(){

var foo = function () {
  // code to handle some kind of event
};
$("p").bind("click", foo); // ... foo будет вызван при нажатии по параграфу...
$("p").unbind("click", foo); // ... foo больше на опрделен.

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/unbind/


jQuery

Формы в jQuery:
blur()
Запустить событие blur для каждого подходящего элемента.

blur(fn)
Связать функцию с событием blur для каждого подходящего элемента.

change()
Запустить событие change для каждого подходящего элемента.

change(fn)
Связать функцию с событием change для каждого подходящего элемента.

focus()
Запустиь событие focus для каждого подходящего элемента.

focus(fn)
Связать функцию с событием focus для каждого подходящего элемента.

select()
Функция запускает событие select для каждого подходящего элемента.

select(fn)
Связать функцию с событим select для каждого подходящего элемента.

submit()
Функция запускает событие submit для каждого выбранного элемента.

submit(fn)
Связать функцию с событием submit для каждого подходящего элемента.

jQuery.param(obj)
Метод создаёт объединенное представление массива или объекта, пригодное для использования в URL при отправке данных методом Ajax.

serialize()
Собрать набор полей input в строку данных.

serializeArray()
Объединить все формы элементы форм (подобно методу .serialize()) но вернуть структуру JSON данных для работы с ней.

val()
Функция предоставляет доступ к содержанию переменной атрибута первого выбранного элемента.

val(val)
Установить переменную атрибута для каждого выбранного элемента.

val
Устанавливает значение элементов checks или selects, всех переключателей (radio), кнопок (buttons), элементов (checkbox), и элементов option элемента select, которые выбраны для установки переменной.


jQuery

В разделе "Манипуляция элементами в jQuery" содержаться следующие методы:
clone()
Функция копирует выбранный DOM элемент, затем выбирает копию элемента.

clone(true)
Функция копирует выбранные DOM элементы и все связанные с ними события, после чего выбирает копии данных элементов.

text()
Получить объединённое текстовое содержание всех выбранных элементов.

unwrap()
Удаление родительских элементов для набора выбираемых элементов из структуры DOM.

wrap(html)
Функция устанавливает вокруг каждого подходящего элемента определенный HTML код.

wrap(elem)
Функция создаёт вокруг каждого подходящего элемента определенный элемент.

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

wrapAll(elem)
Функция помещает все подходящие элементы в одиночный элемент.

wrapInner(html)
Функция создаёт HTML структуру вокруг внутреннего содержимого каждого подходящего элемента(включающего текстовый узел).

wrapInner(elem)
Функция создаёт DOM элемент вокруг содержимого каждого подходящего элемента (включающего текстовой узел).

append(content)
Функция добавляет код внутрь каждого подходящего элемента.

appendTo(selector)
Функция присоединяет ко всем подходящим элементам ещё один, обозначенный комплект элементов.

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

html(val)
Добавить html код для каждого выбранного элемента. Данная функция недоступна для XML документов (хотя доступна в XHTML документах).

prepend(content)
Функция добавляет код во внутрь каждого подходящего элемента.

prependTo(selector)
Функция добавляет ко всем выбранным элементам еще один обозначенный элемент, или комплект элементов.

after(content)
Функция добавляет содержимое после каждого подходящего элемента.

before(content)
Функция вставялет код перед каждым из выбранных элементов.

before(content)
Функция вставляет все подходящие элементы после других, обозначенных наборов элементов.

insertBefore(content)
Функция вставляет все подходящие элементы перед другими, определенными наборами элементов.

detach(selector)
Метод удаляет набор подходящих элементов из структуры DOM.

empty()
Функция удаляет все дочерние узлы из набора подходящих элементов.

remove(expr)
Функция удаляет все подходящие элементы из DOM структуры.

replaceWith(content)
Функция заменяет все подходящие элементы заданным HTML кодом или DOM элементами. Функция так же возвращает JQuery элемент, который был только что заменён, который удалён из DOM структуры.

replaceAll(selector)
Функция заменяет элементы, подобранные по заданному селектору соответствующими элементами.

attr(name)
Метод обеспечивает доступ к свойству первого найденного элемента. Метод позволяет легко извлечь значение свойства из первого выбранного элемента. Если элемент не имеет атрибута с таким именем, будет возвращено undefined. Поддерживаемые атрибуты title, alt, src, href, width, style, и т.д.

attr(properties)
Функция устанавливает ключ/переменную объекта как свойства во всех выбираемых элементах.

attr(key, value)
Функция устанавливает единственное свойство переменной для для всех подходящих элементов.

attr(key, fn)
Установить единственное свойство подсчитанного значения на все выбранные элементы.

removeAttr(name)
Удаление атрибута из каждого из выбранных элементов.


jQuery after(content)

[Функция] after(content)
Раздел "Manipulation"

Функция добавляет содержимое после каждого подходящего элемента.
Сигнатура
after(content) → jQuery
Параметры
after(content)
1.0
content: содержимое, вставляемое после каждого объекта.
after(function)
1.4
after(function): Функция, возвращающая HTML строку для вставки её после каждого из подходящих элементов.
Примеры:

Пример:

Вставить код HTML после всех параграфов.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>I would like to say: </p>

</body>
</html>

Пример:

Вставить DOM элемент после всех параграфов.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").after( document.createTextNode("Hello") );

  });
  </script>

<b>Hello</b>
<p>I would like to say: </p>

</body>
</html>

Пример:

$("p").after( $("b") );

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>I would like to say: </p>

</body>
</html>

Пример:

$("p").after( $("b") );

<!DOCTYPE html>
<html>
<head>
<style>
  p { border: 2px solid blue; }
  newelement { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$('p').after(function() {
  return '<div class="newelement" >Новый элемент</div>';
});

  });
  </script>

<p>I would like to say: </p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/after/


jQuery append(content)

[Функция] append(content)
Раздел "Manipulation"

Функция добавляет код внутрь каждого подходящего элемента.
Сигнатура
append(content) → jQuery
Параметры
append(content)
1.2
content: содержимое добавляемое к объекту.
append(function(index,html))
1.4
function(index, html): Функция возвращающая HTML строку для вставки её к окончанию каждого из подходящих элементов в наборе. Дополнительно к этому функция получает позицию индекса элемента в набор и предыдущее значение HTML элемента как аргументы.
Description

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

Примеры:

Пример:

Добавить HTML код ко всем параграфам.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>I would like to say: </p>

</body>
</html>

Пример:

Добавить элемент ко всем параграфам.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").append(document.createTextNode("Hello"));

  });
  </script>

<p>I would like to say: </p>

</body>
</html>

Пример:

Добавить jQuery объект (аналогично массиву DOM элементов) ко всем параграфам.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").append( $("strong") );

  });
  </script>

<strong>Hello</strong><p>I would like to say: </p>

</body>
</html>

Пример:

Присоединение элемента с id hello к каждому из элементов с id inner, с отображением индекса каждого элемента находящегося в наборе.

<!DOCTYPE html>
<html>
<head>
<style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$('.inner').append(function(i,html) {
  return '<div class="'+html+'" >Новый элемент с новым классом!</div>';
});

  });
  </script>

  <div class="inner">Hello</div>
  <div class="inner">Hello</div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/append/


jQuery appendTo(selector)

[Функция] appendTo(selector)
Раздел "Manipulation"

Функция присоединяет ко всем подходящим элементам ещё один, обозначенный комплект элементов.
Сигнатура
appendTo(selector) → jQuery
Параметры
appendTo(selector)
1.0
selector: объект который будет присоединён.
Description

Эта функция, по существу, противоположность примеру $(A).append(B), в данной функции вместо присоединения B к A ($(A).append(B)), вы присоединяете A к B ($(A).appendTo(B)).

Примеры:

Пример:

Присоединить все элементы span к элементу с ID "foo"

<!DOCTYPE html>
<html>
<head>
<style>
#foo { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("span").appendTo("#foo"); // сравните с append()

  });
  </script>

<span>I have nothing more to say... </span>
<div id="foo">FOO! </div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/appendTo


jQuery attr(key, fn)

[Селектор] attr(key, fn)
Раздел "Manipulation"

Установить единственное свойство подсчитанного значения на все выбранные элементы.
Сигнатура
attr(key, fn) → jQuery
Параметры
attr(key, fn)
1.0
key: имя устанавливаемых данных(переменной).
fn: Функция возвращающая значение для установки. Пределы знычений функции: текущий элемент, аргумент: Индекс текущего элемента, возвращаемый функцией callback (indexArray) { // indexArray == позиция jQuery объекта; // dom element }
Description

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

Примеры:

Пример:

Установить атрибут id для всех элементов div, основанном на их позиции на странице.

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").attr("id", function (arr) {
          return "div-id" + arr;
        })
        .each(function () {
          $("span", this).html("(ID = '" + this.id + "')");
        });

  });
  </script>

<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>

</body>
</html>

Пример:

Установить src атрибут из title атрибута для всех элементов img. Изображения находятся в /images/.

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("img").attr("src", function() {
          return "/images/" + this.title;
        });

  });
  </script>

<img title="hat.gif"/>
  <img title="hat-old.gif"/>
  <img title="hat2-old.gif"/>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/attr/


jQuery attr(key, value)

[Селектор] attr(key, value)
Раздел "Manipulation"

Функция устанавливает единственное свойство переменной для для всех подходящих элементов.
Сигнатура
attr(key, value) → jQuery
Параметры
attr(key, value)
1.0
key: имя устанавливаемого свойства.
value: значение, устанавливаемого свойства.
Description

Данная функция предназначена в качестве оптимального пути установления несколько свойств во всех выбранных элементах. Однако вы должны использовать 'className' как ключ, если желаете установить класс элементу. Или используйте функции .addClass(class) или .removeClass(class). Учтите attr( key, value ) или attr ( key, fn ) действуют рекурсивно, поэтому, если одна из переменных передана функции, функция будет исполняться без сохранения атрибута.

Примеры:

Пример:

Сделать неактивными кнопки, начиная со второй и больше.

<!DOCTYPE html>
<html>
<head>
<style>
button { margin:10px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("button:gt(1)").attr("disabled","disabled");

  });
  </script>

<button>0th Button</button>
<button>1st Button</button>
<button>2nd Button</button>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/attr/


jQuery attr(name)

[Селектор] attr(name)
Раздел "Manipulation"

Метод обеспечивает доступ к свойству первого найденного элемента. Метод позволяет легко извлечь значение свойства из первого выбранного элемента. Если элемент не имеет атрибута с таким именем, будет возвращено undefined. Поддерживаемые атрибуты title, alt, src, href, width, style, и т.д.
Сигнатура
attr(name) → Object
Параметры
attr(name)
1.0
name: Имя свойства к которому осуществляется доступ.
Примеры:

Пример:

Найти атрибут title первого элемента <em> на странице.

<!DOCTYPE html>
<html>
<head>
<style>
em { color:blue; font-weight;bold; }
div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var title = $("em").attr("title");
    $("div").text(title);

  });
  </script>

<p>
    Once there was a <em title="huge, gigantic">large</em> dinosaur...
  </p>
  The title of the emphasis is:<div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/attr/


jQuery attr(properties)

[Селектор] attr(properties)
Раздел "Manipulation"

Функция устанавливает ключ/переменную объекта как свойства во всех выбираемых элементах.
Сигнатура
attr(properties) → Object
Параметры
attr(properties)
1.0
properties: пара ключ/значение устанавливаемые в качетсве объекта свойств.
Description

Данная функция предназначена в качестве оптимального пути установления нескольких свойств во всех выбранных элементах. Однако вы должны использовать 'className' как ключ, если желаете установить класс элементу. Или используйте функцию .addClass(class) или .removeClass(class). Учтите attr( key, value ) или attr ( key, fn ) действуют рекурсивно, поэтому, если одна из переменных передана функции, функция будет исполняться без сохранения атрибута.

Примеры:

Пример:

Установить атрибуты для всех элементов img на странице.

<!DOCTYPE html>
<html>
<head>
<style>
img { padding:10px; }
div { color:red; font-size:24px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("img").attr({
          src: "/images/hat.gif",
          title: "jQuery",
          alt: "jQuery Logo"
        });
$("div").text($("img").attr("alt"));

  });
  </script>

<img />
<img />
<img />
<div><B>Attribute of Ajax</B></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/attr/


jQuery before(content)

[Функция] before(content)
Раздел "Manipulation"

Функция вставляет все подходящие элементы после других, обозначенных наборов элементов.
Сигнатура
before(content) → jQuery
Параметры
before(content)
1.0
content: объект после которого добавляются указанные вами элементы.
Description

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

Примеры:

Пример:

Вставить все параграфы после элемента c id "foo". Так же как $("#foo").after("p")

<!DOCTYPE html>
<html>
<head>
<style>
#foo { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").insertAfter("#foo"); // проверьте after() к примеру

  });
  </script>

<p> is what I said... </p><div id="foo">FOO!</div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/insertAfter/


jQuery clone()

[Функция] clone()
Раздел "Manipulation"

Функция копирует выбранный DOM элемент, затем выбирает копию элемента.
Сигнатура
clone() → jQuery
Параметры
Description

Функция полезна для перемещения копий элементов по DOM структуре.

Примеры:

Пример:

Копировать все элементы b (и выбрать все скопированные элементы), затем прибавить их ко всем параграфам.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<b>Hello</b><p>, how are you?</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/clone/


jQuery clone(true)

[Функция] clone(true)
Раздел "Manipulation"

Функция копирует выбранные DOM элементы и все связанные с ними события, после чего выбирает копии данных элементов.
Сигнатура
clone(true) → jQuery
Параметры
clone(true)
1.0
true: для копирования обработчиков событий установите true.
Description

Функция полезна для перемещения копий элементов, и их событий в другое место в DOM структуре.

Примеры:

Пример:

Создать кнопку, способную копировать саму себя и копии данной кнопки, так же способные к коопированию самих себя.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<button>Clone Me!</button>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/clone/


jQuery detach(selector)

[Функция] detach(selector)
Раздел "Manipulation"

Метод удаляет набор подходящих элементов из структуры DOM.
Сигнатура
detach(selector) → jQuery
Параметры
detach(selector)
1.0
selector: выражение, содержащее селектор, которое фильтрует набор подходящих элементов для последующего удаления.
Description

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

Примеры:

Пример:

Данный пример демонстрирует удаление элементов и последующее их возвращение в структуру Dom, с помощью метода detach().

<!DOCTYPE html>
<html>
<head>
<style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("p").click(function(){
      $(this).toggleClass("off");
    });
    var p;
    $("button").click(function(){
      if ( p ) {
        p.appendTo("body");
        p = null;
      } else {
        p = $("p").detach();
      }
    });

  });
  </script>

  <p>Hello</p>
  how are
  <p>you?</p>
  <button>Attach/detach paragraphs</button>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/detach/


jQuery empty

[Селектор] empty
Раздел "Selectors"

Выбрать все элементы, которые не имеют дочерних элементов ( текста).
Сигнатура
empty → Array
Параметры
empty
1.1.4
text: искомая строка текста. Содержимое чувствительно к падежу.
Пример
:empty
Примеры:

Пример:

Найти все пустые элементы – которые не содержат вложенных элементов или текста.

<!DOCTYPE html>
<html>
<head>
<style>td { text-align:center; }</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');

  });
  </script>

<table border="1">
    <tr><td>TD #0</td><td></td></tr>
    <tr><td>TD #2</td><td></td></tr>
    <tr><td></td><td>TD#5</td></tr>
</table>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/empty/


jQuery html(val)

[Функция] html(val)
Раздел "Manipulation"

Добавить html код для каждого выбранного элемента. Данная функция недоступна для XML документов (хотя доступна в XHTML документах).
Сигнатура
html(val) → String
Параметры
html(val)
1.0
val: установить html код в качестве значения.
Примеры:

Пример:

Создать код html для каждого элемента div.

<!DOCTYPE html>
<html>
<head>
<style>
.red { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").html("<span class='red'>Hello <b>Again</b></span>");

  });
  </script>

<span>Hello</span>
<div></div>
<div></div>
<div></div>

</body>
</html>

Пример:

Создать код html для каждого элемента div, затем немедленно произвести дальнейшие манипуляции со всатвленным html кодом.

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; font-size:18px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("div").html("<b>Wow!</b>  Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
              .css("color", "red");

  });
  </script>

<div></div>
  <div></div>
  <div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/html/


jQuery insertBefore(content)

[Функция] insertBefore(content)
Раздел "Manipulation"

Функция вставляет все подходящие элементы перед другими, определенными наборами элементов.
Сигнатура
insertBefore(content) → jQuery
Параметры
insertBefore(content)
1.0
content: содержимое, перед которого вставляется выбранный(е) элемент(ы).
Description

Функция, по существу, является противоположностью функции $(A).before(B), в замен добавления B перед A, функция добавляет A перед B.

Элементы должны быть уже вставлены в структуру документа (вы не можете добавить элемент после другого элемента, если последний отсутствует на странице).

Примеры:

Пример:

Добавить все параграфы перед элементом с id "foo". Так же как $("#foo").before("p")

<!DOCTYPE html>
<html>
<head>
<style>
#foo { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").insertBefore("#foo"); // сравните с before() к примеру

  });
  </script>

<div id="foo">FOO!</div><p>I would like to say: </p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/insertBefore/


jQuery prepend(content)

[Функция] prepend(content)
Раздел "Manipulation"

Функция добавляет код во внутрь каждого подходящего элемента.
Сигнатура
prepend(content) → jQuery
Параметры
prepend(content)
1.0
content: код присоединямый к объекту.
prepend(function(index, html))
1.4
function(index, html): Функция возвращающая HTML строку для вставки её к началу каждого из подходящих элементов в наборе. Дополнительно к этому функция получает позицию индекса элемента в набор и предыдущее значение HTML элемента как аргументы.
Description

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

Примеры:

Пример:

Присоединить HTML код ко всем параграфам.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").prepend("Hello ");

  });
  </script>

<p>there friend!</p>
<p>amigo!</p>

</body>
</html>

Пример:

Присоединить DOM элемент ко всем параграфам.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").prepend(document.createTextNode("Hello "));

  });
  </script>

<p>is what I'd say</p>
  <p>is what I said</p>

</body>
</html>

Пример:

Присоединить jQuery объект (аналогично массиву DOM элементов) ко всем параграфам.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").prepend( $("b") );

  });
  </script>

<p> is what was said.</p><b>Hello</b>

</body>
</html>

Пример:

Присоединение элемента с id hello к каждому из элементов с id inner, путём его вставки перед каждым из элементов id inner, с отображением индекса каждого элемента, находящегося в наборе.

<!DOCTYPE html>
<html>
<head>
<style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").prepend("<b>Hello</b>");

  });
  </script>

  <div class="inner">Hello</div>
  <div class="inner">Hello</div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/prepend/


jQuery prependTo(selector)

[Функция] prependTo(selector)
Раздел "Manipulation"

Функция добавляет ко всем выбранным элементам еще один обозначенный элемент, или комплект элементов.
Сигнатура
prependTo(selector) → jQuery
Параметры
prependTo(selector)
1.0
selector: объект, содержимое которого будет присоединено.
Description

Эта функция - противоположность функции $(A).prepend(B), в данной функции вместо присоединения B к A, вы присоединяете A к B.

Примеры:

Пример:

Присоединить все элементы span к элементам с ID "foo"

<!DOCTYPE html>
<html>
<head>
<style>
div { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("span").prependTo("#foo"); // проверьте prepend() к примеру

  });
  </script>

<div id="foo">FOO!</div>
  <span>I have something to say... </span>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/prependTo/


jQuery remove(expr)

[Функция] remove(expr)
Раздел "Manipulation"

Функция удаляет все подходящие элементы из DOM структуры.
Сигнатура
remove(expr) → jQuery
Параметры
remove(expr)
1.0
expr: jQuery выражение, фильтрующее элементы подлежащие удалению.
jQuery.proxy(scope, name)
1.4
scope: объект, находящийся в области видимости функции, значение которого подлежит установке.
name: объект, находящийся в области видимости функции, значение которого подлежит установке.
Description

Функция не удаляет элемент из jQuery объекта, что позволяет вам использовать элемент в дальнейшем. Данная функция, начиная с версии 1.2.2, так же удаляет все обработчики событий и внутренне кеширумые данные. Поэтому: выражение $("#foo").remove().appendTo("#bar"); должно быть записано как $("#foo").appendTo("#bar"); для того чтобы избежать потери обработчика событий. Так же функция поддерживает фильтрацию по необязательному выражению.

Примеры:

Пример:

Удалить все параграфы из DOM структуры.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; margin:6px 0; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello</p>
how are
<p>you?</p>
<button>Call remove() on paragraphs

</body>
</html>

Пример:

Удалить все параграфы содержащие "Hello" из DOM структуры.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; margin:6px 0; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("button").click(function () {
      $("p").remove(":contains('Hello')");
    });

  });
  </script>

<p class="hello">Hello</p>
how are
<p>you?</p>
<button>Call remove(":contains('Hello')") on paragraphs

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/remove/


jQuery replaceAll(selector)

[Функция] replaceAll(selector)
Раздел "Manipulation"

Функция заменяет элементы, подобранные по заданному селектору соответствующими элементами.
Сигнатура
replaceAll(selector) → jQuery
Параметры
replaceAll(selector)
1.2
selector: искомый и заменяемый элемент, подходящими элементами.
Description

Функция дополняет метод replaceWith() и выполняет ту же задачу с перевернутыми параметрами.

Примеры:

Пример:

Заменить все параграфы элементом <b>>.

<!DOCTYPE html>
<html>
<head>
<style>
button { display:block; margin:3px; color:red; width:200px; }
div { color:red; border:2px solid blue; width:200px;
margin:3px; text-align:center; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("<b>Paragraph. </b>").replaceAll("p"); // сравните с replaceWith()

  });
  </script>

<p>Hello</p>
<p>cruel</p>
<p>World</p>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/replaceAll/


jQuery replaceWith(content)

[Функция] replaceWith(content)
Раздел "Manipulation"

Функция заменяет все подходящие элементы заданным HTML кодом или DOM элементами. Функция так же возвращает JQuery элемент, который был только что заменён, который удалён из DOM структуры.
Сигнатура
replaceWith(content) → jQuery
Параметры
replaceWith(content)
1.2
content: код, заменяющий походящие элементы элементы.
replaceWith(function)
1.4
function: функция, возвращающая HTML строку, которая заменяет набор подходящих элементов.
Примеры:

Пример:

По клику заменить кнопку на элемент div, содержащий текст кнопки.

<!DOCTYPE html>
<html>
<head>
<style>
button { display:block; margin:3px; color:red; width:200px; }
div { color:red; border:2px solid blue; width:200px;
margin:3px; text-align:center; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<button>First</button>
<button>Second</button>
<button>Third</button>

</body>
</html>

Пример:

Заменить все параграфы на элемент b.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").replaceWith("<b>Paragraph. </b>");

  });
  </script>

<p>Hello</p>
<p>cruel</p>
<p>World</p>

</body>
</html>

Пример:

Заменить все параграфы на пустой элемент div.

<!DOCTYPE html>
<html>
<head>
<style>  div { border:2px solid blue; margin:3px; }</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

</body>
</html>

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div { border:2px solid blue; color:red; margin:3px; }
p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("p").click(function () {
      $(this).replaceWith($("div"));
    });

  });
  </script>

<p>Hello</p>
<p>cruel</p>
<p>World</p>
<div>Replaced!</div>

</body>
</html>

Пример:

По событию click заменить объектом jQuery, содержащим элемент div, параграфы на странице. Данный элемент не копируется, а только перемещается в структуре DOM и заменят параграф.

<!DOCTYPE html>
<html>
<head>
<style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("p").click(function () {
      $(this).replaceWith($("div"));
    });

  });
  </script>

<p>First</p>
<p>Second</p>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/replaceWith/


jQuery text

[Селектор] text
Раздел "Selectors"

Выбрать все текстовые элементы input.
Сигнатура
text → Array
Параметры
Пример
:text
Примеры:

Пример:

Найти все элементы input тип которых text.

<!DOCTYPE html>
<html>
<head>
<style>
  textarea { height:45px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var input = $("form :text").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/text/


jQuery unwrap()

[Функция] unwrap()
Раздел "Manipulation"

Удаление родительских элементов для набора выбираемых элементов из структуры DOM.
Сигнатура
unwrap() → jQuery
Параметры
unwrap()
1.0
str: строка, которая будет обрабатана.
Description

Метод unwrap() удаляет родительские элементы. По сути данный метод является противоположность метода wrap(). Данный метод сменяет прежние родительские элементы новыми родительскими элементами.

Примеры:

Пример:

Сперва мы создаём вокруг параграфов элементы div с помощью метода wrap(), а затем элементы div удаляем, но используя метод unwrap():

<!DOCTYPE html>
<html>
<head>
<style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("button").toggle(function(){
  $("p").wrap("<div></div>");
}, function(){
  $("p").unwrap();
});

  });
  </script>

<button>wrap/unwrap</button>
<p>Hello</p>
<p>cruel</p>
<p>World</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/unwrap/


jQuery wrapAll(elem)

[Функция] wrapAll(elem)
Раздел "Manipulation"

Функция помещает все подходящие элементы в одиночный элемент.
Сигнатура
wrapAll(elem) → jQuery
Параметры
wrapAll(elem)
1.0
elem: DOM элемент, в который будет помещен объект.
Description

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

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello</p>
<p>cruel</p>
<p>World</p>

</body>
</html>

Пример:

Создать jQuery объект - двойной элемент div вокруг всех параграфов. Учтите функция не перемещает объект, но копирует его в структуру создаваемую функцией.

<!DOCTYPE html>
<html>
<head>
<style>
  div { border: 2px solid blue; margin:2px; padding:2px; }
  .doublediv { border-color:red; }
  p { background:yellow; margin:4px; font-size:14px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").wrapAll($(".doublediv"));

  });
  </script>

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div class="doublediv"><div></div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/wrapAll/


jQuery wrapAll(html)

[Функция] wrapAll(html)
Раздел "Manipulation"

Создать вокруг всех подобранных элементов единственный обарачивающий элемент.
Сигнатура
wrapAll(html) → jQuery
Параметры
wrapAll(html)
1.2
html: Строка HTML кода, который будт создан на "лету" и обернёт объект .
Description

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

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello</p>
<p>cruel</p>
<p>World</p>

</body>
</html>

Пример:

Создать заново структуру объектов вокруг объекта span. Учтите всё, что находтися между элементами span не войдёт в структуру, например элемент strong. Пробел так же не войдёт в структру.

<!DOCTYPE html>
<html>
<head>
<style>
  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  strong { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<span>Span Text</span>
<strong>What about me?</strong>
<span>Another One</span>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/wrapAll/


jQuery wrap(elem)

[Функция] wrap(elem)
Раздел "Manipulation"

Функция создаёт вокруг каждого подходящего элемента определенный элемент.
Сигнатура
wrap(elem) → jQuery
Параметры
wrap(elem)
1.0
elem: DOM элемент, который будет устанавливлен вокруг каждого объекта.
wrap(wrappingFunction)
1.4
scope: Вторая версия данного метода - wrap(wrappingFunction) позволяет определить функцию обратного вызова. Данная функция будет вызвана для каждого подходящего элемента единожды. Данная функция должна возвращать элемент структуры DOM, jQuery объект, отрезок HTML в который оборачивается ссылающийся элемент.
Примеры:

Пример:

Установить вокруг всех параграфов элемент div.

<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

</body>
</html>

Пример:

Установить jQuery объект - двойной элемент div вокруг всех параграфов. Учтите функция не перемещает объект, функция копирует объект, который создаёт структуру вокруг другого объекта.

<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; margin:2px; padding:2px; }
.doublediv { border-color:red; }
p { background:yellow; margin:4px; font-size:14px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").wrap($(".doublediv"));

  });
  </script>

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div class="doublediv"><div></div></div>

</body>
</html>

Пример:

Установить вокруг всех параграфов элемент div.

<!DOCTYPE html>
<html>
<head>
<style>
  .Hello { border: 2px solid blue; }
  .Goodbye { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

  });
  </script>

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/wrap/


jQuery wrap(html)

[Функция] wrap(html)
Раздел "Manipulation"

Функция устанавливает вокруг каждого подходящего элемента определенный HTML код.
Сигнатура
wrap(html) → jQuery
Параметры
wrap(html)
1.0
html: строка HTML, которая бедет создана на «лету» вокруг каждого объекта.
Description

Данная функция наиболее полезна для добавления дополнительной структуры в документ, без разрушения изначальной семантики документа. Функция начинает создавать структуру с первого установленного элемента (который создаётся на лету, через подготовленный HTML код) и находит самый последний элемент потомок в структуре – это обеспечивает предотвращение охвата других элементов.

Примеры:

Пример:

Создать новый элемент div вокруг каждого параграфа

<!DOCTYPE html>
<html>
<head>
<style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello</p>
<p>cruel</p>
<p>World</p>

</body>
</html>

Пример:

Создать структуру объектов вокруг всех элементов span. Учтите всё остальное между двумя элементами span будет отображено с использование тэга <strong> (красный текст). Даже пробел будет выведен из структуры. Для того чтобы просмотреть оригинальный html смотрите исходный код документа.

<!DOCTYPE html>
<html>
<head>
<style>
div { border:2px blue solid; margin:2px; padding:2px; }
p { background:yellow; margin:2px; padding:2px; }
strong { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<span>Span Text</span>
<strong>What about me?</strong>
<span>Another One</span>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/wrap/


jQuery wrapInner(elem)

[Функция] wrapInner(elem)
Раздел "Manipulation"

Функция создаёт DOM элемент вокруг содержимого каждого подходящего элемента (включающего текстовой узел).
Сигнатура
wrapInner(elem) → jQuery
Параметры
wrapInner(elem)
1.2
elem: DOM элемент, который будет создан вокруг объекта.
wrapInner( wrappingFunction )
1.4
wrappingFunction: функция обратного вызова генерирующая структуру, с помощью которой оборачивается содержимое элемента.
Description

Вторая версия данного метода - .wrapInner( wrappingFunction ) позволяет определить функцию обратного вызова. Данная функция будет вызвана для каждого подходящего элемента единожды. Данная функция должна возвращать элемент структуры DOM, jQuery объект, отрезок HTML в который оборачивается содержимое ссылающегося элемента.

Примеры:

Пример:

Выбрать содержание всех параграфов и поместить его в тэг < b>.

<!DOCTYPE html>
<html>
<head>
<style>
  Hello { border: 2px solid blue; }
  Goodbye { background:yellow; margin:4px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$('.inner').wrapInner(function() {
  return '<div class="' + this.nodeValue + '" />';
});

  });
  </script>

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

</body>
</html>

Пример:

Выбрать содержание всех параграфов и поместить его в тэг < b>.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:#9f9; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello</p>
<p>cruel</p>
<p>World</p>

</body>
</html>

Пример:

Выбрать содержание всех параграфов и поместить его в jQuery объект.

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:#9f9; }
  .red { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").wrapInner($("<span class='red'></span>"));

  });
  </script>

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/wrapInner/


jQuery wrapInner(html)

[Функция] wrapInner(html)
Раздел "Manipulation"

Функция создаёт HTML структуру вокруг внутреннего содержимого каждого подходящего элемента(включающего текстовый узел).
Сигнатура
wrapInner(html) → jQuery
Параметры
wrapInner(html)
1.2
html: код HTML, который бедет создан на "лету" вокруг объекта.
Description

Данная функция наиболее полезна для добавления дополнительной структуры в документ, без разрушения изначальной семантики документа. Функция начинает создавать структуру с первого установленного элемента (который создаётся на лету, через подготовленный HTML код) и находит самый последний элемент потомок в структуре – тот элемент, который присоединяется к остальному HTML.

Примеры:

Пример:

Выбрать все параграфы и поместить текстовое содержания каждого из них в тэг <b> вокруг.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:#bbf; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello</p>
<p>cruel</p>
<p>World</p>

</body>
</html>

Пример:

Создать новую структуру объектов вокруг внутреннего содержания элемента body.

<!DOCTYPE html>
<html>
<head>
<style>
  div { border:2px green solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div class="doublediv"><div></div></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/wrapInner/


jQuery

Методы для элементов DOM:
jQuery.each(object, callback)
Создать повторяющую функцию, которая может бть использована беспрерывного повторения как объектов, так массивов.

each(callback)
Выполняет функцию в контексте каждого найденного элемента.

get()
Доступ ко всем выбранным элементам.

index(subject)
Функция осущетсвляет поиск каждого выбранного элемента для объекта и возвращает его индекс, если элемент найден индекс начинается с 0. Если jQuery объект не содержит искомого элемента, то только первый элемент отмечается.

toArray()
Возвращает все элементы jquery как массив.

size()
Функция возвращает количество элементов в jQuery объекте


jQuery

jQuery Slyweb.ru
Смешанные методы парсинга элементов:
add(expr)
Функция добавляет дополнительные элементы, соответсвующие заданному выражению, к набору выбранных элементов.

andSelf()
Функция добавляет предшествующий выбранный элемент к текущему выбранному элементу.

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

end()
Функция возвращает к последней 'рузрушительной' операции, т.е. производит изменение набора соответствующих элементов к их первоначальному состоянию (состоянию до разрушительной опреации).


jQuery get()

[Function] get()
Раздел "Miscellaneous"

Доступ ко всем выбранным элементам.
Сигнатура
get() → Array
Параметры
Description

Функция применяется как обратно - совместимый путь для получения всех выбранных элементов (в отличие от jQuery объекта, который в действительности, является массивом элементов). Функция полезна, если вы нуждаетесь в работе с элементами структуры DOM взамен использования встроенных jQuery функций.

Примеры:

Пример:

Выбрать все элементы div, вернуть DOM элементы как массив, затем использовать встроенный метод переворота(reverse-method) этого массива.

<!DOCTYPE html>
<html>
<head>
<style>
span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

function disp(divs) {
      var a = [];
      for (var i = 0; i < divs.length; i++) {
        a.push(divs[i].innerHTML);
      }
      $("span").text(a.join(" "));
    }
disp( $("div").get().reverse() );

  });
  </script>
<div>One</div>
  <div>Two</div>
  <div>Three</div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/get/


jQuery index(subject)

[Function] index(subject)
Раздел "Miscellaneous"

Функция осущетсвляет поиск каждого выбранного элемента для объекта и возвращает его индекс, если элемент найден индекс начинается с 0. Если jQuery объект не содержит искомого элемента, то только первый элемент отмечается.
Сигнатура
index(subject) → Number
Параметры
index(subject)
1.0
subject: объект, который ищет функция.
index()
1.4
contained: поиск элемента среди набора элементов по его индексу.
index( selector )
1.4
selector: сеелктор представляющий коллекцию jQuery, в которой будет осуществляться поиск.
index( element )
1.4
element: элемент структуры DOM внутри объекта jQuery, в котором будет осуществляться поиск.
Description

Возвращает - 1 если объект не был найден.

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

Если метод был вызван с передачей дополнительного параметра, определющего jQUery коллекцию, то будт возвращен индекс эелмента расположенного в данной jUQewry коллекции.

Если метод был вызван с передачей селектора, в качестве параметра, то будет возвращен индекс элемента соответсвующего селектору. Если элемент не был найден метод вернёт -1.

Примеры:

Пример:

Поиск индекса элемента в неупорядоченном списке:

<!DOCTYPE html>
<html>
<head>
<style>
  .div1{background: #cadceb;}
  .div2{background: #fef;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var listItem = document.getElementById('bar');
alert('Index: ' + $('li').index(listItem));

  });
  </script>

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

</body>
</html>

Пример:

Подобно вышеуказанному примеру, но если, мы укажем jQuery объект, содержащий один из элементов списка, то метод index() позволит получить индекс данного эелмента.

<!DOCTYPE html>
<html>
<head>
<style>
  .div1{background: #cadceb;}
  .div2{background: #fef;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var listItem = $('#bar');
alert('Index: ' + $('li').index(listItem));

  });
  </script>

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

</body>
</html>

Пример:

Если jQUery коллекция используемая методом index() в качетсве параметра содержит более одного эелмента, то будет возвращен только индекс первого элемента в коллекции.

<!DOCTYPE html>
<html>
<head>
<style>
  .div1{background: #cadceb;}
  .div2{background: #fef;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var listItems = $('li:gt(0)');
alert('Index: ' + $('li').index(listItems));

  });
  </script>

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

</body>
</html>

Пример:

Если мы применяем метод index() без аргументов, то будет возвращен индекс первого подходящего элемента, расположенного внутри набора элементов соотносящихся друг к другу как "брат и сестра".

<!DOCTYPE html>
<html>
<head>
<style>
  .div1{background: #cadceb;}
  .div2{background: #fef;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

alert('Index: ' + $('#bar').index();

  });
  </script>

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

</body>
</html>

Пример:

По щелчку, вернуть индекс (начинающийся с 0) элемента div на данной странице.

<!DOCTYPE html>
<html>
<head>
<style>
div { background:yellow; margin:5px; }
span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").click(function () {
      // this is the dom element clicked
      var index = $("div").index(this);
      $("span").text("That was div index #" + index);
    });

  });
  </script>

<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>

</body>
</html>

Пример:

Вернуть индекс элемента с идентификатором (id) foobar.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("*").index( $('#foobar')[0] )

  });
  </script>

<div id="foobar"><b></b><span id="foo"></span></div>

</body>
</html>

Пример:

Вернуть индекс элемента с id foo, который находится в другом элементе.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("*").index( $('#foo') )

  });
  </script>

<div id="foobar"><b></b><span id="foo"></span></div>

</body>
</html>

Пример:

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

$(document).ready(function(){

var mainNavLinks = $('ul#mainNav li a');
mainNavLinks.click(function(){alert(mainNavLinks.index(this));});

  });

Пример:

Возвращает - 1, так как здесь нет элементов с ID bar.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("*").index( $('#bar')[0] )

  });
  </script>

<div id="foobar"><b></b><span id="foo"></span></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/index/


jQuery size()

[Function] size()
Раздел "Miscellaneous"

Функция возвращает количество элементов в jQuery объекте
Сигнатура
size() → Number
Параметры
Description

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

Примеры:

Пример:

Подсчитать элементы div. Чтобы повторить нажмите ещё раз.

<!DOCTYPE html>
<html>
<head>
<style>  body { cursor:pointer; }
     div { width:50px; height:30px; margin:5px; float:left;
     background:blue; }
     span { color:red; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
     $(document.body).click(function () {
     $(document.body).append($("<div>>"));
     var n = $("div").size();
     $("span").text("There are " + n + " divs." +
     "Click to add more.");
     }).click(); // trigger the click to start

  });
  </script>
<span></span>	 	 <div></div>
</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/size/


jQuery toArray()

[Function] toArray()
Раздел "Miscellaneous"

Возвращает все элементы jquery как массив.
Сигнатура
toArray() → Array
Параметры
Description

Возвращает все элементы jquery как массив.

alert($('li').toArray());
Все найденные узлы представлены как простой массив:
[<li id="foo">, <li id="bar">]

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; margin:6px 0; } p.off { background: black; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

function disp(divs) {
      var a = [];
      for (var i = 0; i < divs.length; i++) {
        a.push(divs[i].innerHTML);
      }
      $("span").text(a.join(" "));
    }

disp( $("div").toArray().reverse() );

  });
  </script>

  Reversed - <span></span>

  <div>One</div>
  <div>Two</div>
  <div>Three</div>

</body>
</html>

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/toArray/


jQuery

Область видимости jQuery:
jQuery.noConflict()
Функция предоставляет контроль над $ переменной, возвращая назад к какокй угодно библиотеке, первоначально используемой.

jQuery.noConflict(extreme)
Возвращает контроль над $ и jQuery переменными к их действительному владельцу. Использовать с осторожностью.


jQuery

Методы для работы с коллекциями элементов:
jQuery.each(object, callback)
Создать повторяющую функцию, которая может бть использована беспрерывного повторения как объектов, так массивов.

each(callback)
Выполняет функцию в контексте каждого найденного элемента.

jQuery.param(obj)
Метод создаёт объединенное представление массива или объекта, пригодное для использования в URL при отправке данных методом Ajax.


jQuery each(callback)

[Function] each(callback)
Раздел "Miscellaneous"

Выполняет функцию в контексте каждого найденного элемента.
Сигнатура
each(callback) → jQuery
Параметры
each(callback)
1.0
callback: Функция выполняется для каждого выбранного элемента. function callback (index, domElement) { this; // this == domElement }.
Description

Это значит, что переданная функция выполняется каждый раз для определенного элемента стуркутуры DOM (один раз для каждого выбранного элемента), на который указывает слово «this». Дополнительно, после выполнения, функция передаёт один аргумент, указывающий позицию элемента в выбранном наборе (в виде целого числа, основанного на нулевом индексе). Функция возвращает 'false' изнутри каждой функции, полностью заверщей соединенную последовательнось всех элементов(подобно использованию «break» при нормальном выполнении функции). Возвращает 'true' с каждым переходом к следующей итерации (подобно использованию 'continue' для нормального выполнения функции).

Примеры:

Пример:

Повторение одной и той же функции для каждого элемента div, устанавливающей цвет.

<!DOCTYPE html>
<html>
<head>
<style>  div { color:red; text-align:center; cursor:pointer;
        font-weight:bolder; width:300px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
    $(document.body).click(function () {
      $("div").each(function (i) {
        if (this.style.color != "blue") {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });

  });
  </script>

<div>Нажмите</div>
<div>чтобы повторить</div>
  <div>функцию</div>

</body>
</html>

Пример:

Если вам необходимо использовать jQuery объект взамен обычного элемента DOM, используйте функцию $(this):

<!DOCTYPE html>
<html>
<head>
<style>    ul { font-size:18px; margin:0; }
  span { color:blue; text-decoration:underline; cursor:pointer; }
  .example { font-style:italic; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
      });
    });

  });
  </script>

<ul>
    <li>Eat</li>
    <li>Sleep</li>
    <li>Be merry</li>
</ul>

</body>
</html>

Пример:

Вы можете использовать 'return' для прекращения цикла.

<!DOCTYPE html>
<html>
<head>
<style>
div { width:40px; height:40px; margin:5px; float:left;
border:2px blue solid; text-align:center; }
span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function () {
      $("div").each(function (index, domEle) {
        // domEle == this
        $(domEle).css("backgroundColor", "yellow");
        if ($(this).is("#stop")) {
          $("span").text("Остановлено на элементе div, индес которого равен" + index);
          return false;
        }
      });
    });

  });
  </script>
 <button>Изменить цвет</button>
  <span></span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="stop">Stop here</div>
  <div></div>
  <div></div>
  <div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/each/


jQuery

Установка данных:
data(name)
Функция возвращает значение определенных данных (data), сохранённых в элементе, установленных через функцию data(name, value).

$.data(elem)

$.data(elem, name)

$.data(elem, name, value)

removeData(name)
Удалить выбранные данные из элемента.


jQuery jQuery.each(object, callback)

[Функция] jQuery.each(object, callback)
Раздел "Miscellaneous"

Создать повторяющую функцию, которая может бть использована беспрерывного повторения как объектов, так массивов.
Сигнатура
jQuery.each(object, callback) → Object
Параметры
jQuery.each(object, callback)
1.0
object: повторяемый объект или массив.
callback:  функция, которая будет выполнена для каждого объекта. function callback(indexInArray, valueOfElement)
{ var booleanKeepGoing; this;
// == valueOfElement (casted to Object) return booleanKeepGoing;
// optional, unless false
// and want to stop looping }
Description

Данная функция не является аналогом функции $().each() - которая применяется, единственно, для jQuery объекта. Данная функция используется для повторения чего угодно. Параметр callback имеет два аргумента: первый - ключ (объектов) или индекс (массивов), второй - переменная. Если вы желаете прервать функцию each() вы можете вернуть false. Функция может возвратить true,что значит то же самое, что и продолжить (continue) исполнение функции в цикле, при чём функция переходит немедленно к следующей итерации.

Примеры:

Пример:

Повторять каждое число как слово и как цифру.

<!DOCTYPE html>
<html>
<head>
<style>

  div { color:blue; }
  div#five { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var arr = [ "one", "two", "three", "four", "five" ];
    var obj = { one:1, two:2, three:3, four:4, five:5 };

    jQuery.each(arr, function() {
      $("#" + this).text("My id is " + this + ".");
      return (this != "four"); // will stop running to skip "five"
    });

    jQuery.each(obj, function(i, val) {
      $("#" + i).append(document.createTextNode(" - " + val));
    });

  });
  </script>

<div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>

</body>
</html>

Пример:

Повторение элементов в массиве, с показом текущего элемента и его индекса.

$(document).ready(function(){

 $.each( [0,1,2], function(i, n){
   alert( "Item #" + i + ": " + n );
 });

  });

Пример:

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

$(document).ready(function(){

$.each( { name: "John", lang: "JS" }, function(i, n){
   alert( "Name: " + i + ", Value: " + n );
 });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.each/


jQuery offset()

[Функция] offset()
Раздел "Offset"

Функция предоставляет доступ к текущему смещению первого подходящего элемента относительно документа.
Сигнатура
offset() → Object{top,left}
Параметры
Description

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

Примеры:

Пример:

Получить смещение 2 параграфа:

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin-left:10px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello</p><p>2nd Paragraph</p>

</body>
</html>

Пример:

Нажмите, чтобы получить смещение.

<!DOCTYPE html>
<html>
<head>
<style>
 p { margin-left:10px; color:blue; width:200px;
      cursor:pointer; }
  span { color:red; cursor:pointer; }
  div.abs { width:50px; height:50px; position:absolute;
            left:220px; top:35px; background-color:green;
            cursor:pointer; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("*", document.body).click(function (e) {
      var offset = $(this).offset();
      e.stopPropagation();
      $("#result").text(this.tagName + " coords ( " + offset.left + ", " +
                                      offset.top + " )");
    });

  });
  </script>

<div id="result">Click an element.</div>
  <p>
    Это лучший способ <span>найти</span> смещение.
  </p>
  <div class="abs">
  </div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/offset/


jQuery

В разделе "Свойства jQuery" содержаться следующие методы:
length()
Функция возвращает количество элементов в jQuery объекте

context
Возвращает связанный DOM узел, исходно переданный jQuery, если ничего не было передано, то этим узлом будет document.

selector
данный метод должен использоваться в сочетании с контекстом для определения точности изначально получаемого селектора.


jQuery

Свойства jQuery объекта:
boxModel()

$.browser.version()

$.browser()

$.support()


jQuery boxModel()

[Функция] boxModel()
Раздел "Properties"

Проверка поддержки браузером блочной модели, согласно W3C CSS
Сигнатура
boxModel() → Boolean
Параметры
Description

В jQuery 1.3 вызывает противоречивое (смотрите jQuery.support). Указывает состояние, если текущая страница в браузере пользователя представлена в соответствие с [http://www.w3.org/TR/REC-CSS2/box.html W3C CSS Box Model].

Примеры:

Пример:

Вернуть блочную модель для iframe.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("p").html("The box model for this iframe is: <span>" +
                jQuery.boxModel + "</span>");

  });
  </script>

<div id="results"></div>

</body>
</html>

Пример:

Возвращает false, если страница находится в режиме работы QuirksMode в Internet Explorer.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$.boxModel

  });
  </script>

<div id="results"></div>

</body>
</html>

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/boxModel/


jQuery $.browser()

[Функция] $.browser()
Раздел "Properties"

Возвращает версию браузера
Сигнатура
$.browser() → Таблица
Параметры
Description

В jQuery 1.3 вызывает противоречивое (смотрите jQuery.support). Содержит название браузера, прочитанное из navigator.userAgent.

Примеры:

Пример:

Отобразить информацию о браузерах.

$(document).ready(function(){

    jQuery.each(jQuery.browser, function(i, val) {
      $("<div>" + i + " : <span>" + val + "</span>")
                .appendTo(document.body);
    });

  });

Пример:

Вернуть true если браузер является одной из версий браузеров Microsoft Internet Explorer.

$(document).ready(function(){

$.browser.msie

  });

Пример:

Отобразить сообщение только для браузера firefox 3.

$(document).ready(function(){

jQuery.each(jQuery.browser, function(i, val) {
   if(i=="mozilla" && jQuery.browser.version.substr(0,3)=="1.9")
      alert("Do stuff for firefox 3")
 });

  });

Пример:

Вывести диалоговое окно "this is safari!" только в браузере safari.

$(document).ready(function(){

if ($.browser.safari) {
    alert("this is safari!");
 }

  });

Пример:

Установить CSS свойство для определённого браузера.

$(document).ready(function(){

jQuery.each(jQuery.browser, function(i) {
   if($.browser.msie){
      $("#div ul li").css("display","inline");
   }else{
      $("#div ul li").css("display","inline-table");
   }
 });

  });

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/


jQuery $.browser.version()

[Функция] $.browser.version()
Раздел "Properties"

Возвращает версию браузера
Сигнатура
$.browser.version() → Строка
Параметры
Description

В jQuery 1.3 вызывает противоречивое (смотрите jQuery.support). Версия браузера интерпретирующая устройство браузера пользователя.

Description

Наиболее типичный результат:

• Internet Explorer: 6.0, 7.0

• Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3, 1.9

• Opera: 9.20

• Safari/Webkit: 312.8, 418.9

Примеры:

Пример:

Вернуть версию браузера.

$(document).ready(function(){

    $("p").html("The browser version is: <span>" +
                jQuery.browser.version + "</span>");

  });

Пример:

Указать в диалоговом окне версию IE

$(document).ready(function(){

if ( $.browser.msie )
alert( $.browser.version );

  });

Пример:

Часто вам необходимо знать целый номер версии браузера. Это может быть получено с использованием встроенной JavaScript функции parseInt():

$(document).ready(function(){

jQuery Code
if (jQuery.browser.msie) {
  alert(parseInt(jQuery.browser.version));
}

  });

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/


jQuery $.support()

[Функция] $.support()
Раздел "Properties"

Коллекция свойств для определения возможностей и ошибок всех браузеров
Сигнатура
$.support() → Object
Параметры
Description

Добавлено в jQuery 1.3. Коллекция свойств, которая представляет существующие возможности или ошибки различных браузерах.

Примеры:

Пример:

Вернуть блочную модель для элемента iframe.

$(document).ready(function(){

$("p").html("This frame uses the W3C box model: <span>" +
                jQuery.support.boxModel + "</span>");

  });

Пример:

Вернуть false, если страница находится в режиме QuirksMode для Internet Explorer.

$(document).ready(function(){

jQuery.support.boxModel

  });

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/jQuery.support/


jQuery

Свойства экзэмпляра jQuery объекта:
length()
Функция возвращает количество элементов в jQuery объекте

context
Возвращает связанный DOM узел, исходно переданный jQuery, если ничего не было передано, то этим узлом будет document.

selector
данный метод должен использоваться в сочетании с контекстом для определения точности изначально получаемого селектора.


jQuery context

[Функция] context
Раздел "Authoring"

Возвращает связанный DOM узел, исходно переданный jQuery, если ничего не было передано, то этим узлом будет document.
Сигнатура
context → jQuery
Параметры
context
1.4
elements: массив элементов помещаемых в объект jQuery.
Description

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

Если не был указан связанный с селектором элемент, то значение данного свойства обычно "document", так как по умолчанию для объекта jQuery контекстный элемент равен document. Связанный элемент может быть различным, в зависимости от того в каком документе вы используете данный метод, например объект может быть создан в документе XML или Iframe.

Примеры:

Пример:

Определить точный контекст для элемента, искомого с помощью селектора.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; margin:6px 0; } p.off { background: black; }
 </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("ul")
  .append("" + $("ul").context.nodeName + "")
  .append("" + $("ul", document.body).context.nodeName + "");

  });
  </script>

Context:<ul></ul>

</body>
</html>

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/context/


jQuery length()

[Function] length()
Раздел "Properties"

Функция возвращает количество элементов в jQuery объекте
Сигнатура
length() → Number
Параметры
Description

Данная функция возвращает количество элементов, подобно свойству size() jQuery объекта. Однако, данная функция работает несколько быстрее чем size(), поэтому length предпочтительнее использовать.

Примеры:

Пример:

Подсчитать элементы div. Чтобы повторить нажмите ещё раз.

<!DOCTYPE html>
<html>
<head>
<style>  body { cursor:pointer; }
     div { width:50px; height:30px; margin:5px; float:left;
     background:blue; }
     span { color:red; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
     $(document.body).click(function () {
     $(document.body).append($("<div>>"));
     var n = $("div").length;
     $("span").text("There are " + n + " divs." +
     "Click to add more.");
     }).click(); // trigger the click to start

  });
  </script>
<span></span>	 	 <div></div>
</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/length/


jQuery selector

[Функция] selector
Раздел "Authoring"

данный метод должен использоваться в сочетании с контекстом для определения точности изначально получаемого селектора.
Сигнатура
selector → jQuery
Параметры
Description

Метод .selector применяется в методе .live() для того, чтобы определить порядок поиска элементов. Методы, выполняющие аналогичную функцию, могут применять данный метод для тех же целей что и метод live(). Данное свойство содержит строку представляющую набор найденных элементов, однако, если к объекту был применён один из методов рассматриваемых в разделе Traversing данного руководства, тогда вы можете получить неправильное выражение содержащее селектор. Поэтому метод selector, как правило, лучше использовать указывая его немедленно после исходного объекта.

Примеры:

Пример:

Добавление массива элементов в стек jQuery и их удаление.

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; margin:6px 0; } p.off { background: black; }
 </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("ul")
  .append("<li>" + $("ul").selector + "</li>")
  .append("<li>" + $("ul li").selector + "</li>")
  .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");

  });
  </script>

Some selectors:<ul></ul>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/selector/


jQuery

В разделе "Внутренние функции в jQuery" содержаться следующие методы:
jQuery.removeData(elem)
Функция удаляет расширение атрибута, которое должно существовать в элементе.

jQuery.removeData(elem, name)
Функция удаляет данные, с определенным именем.


jQuery jQuery.removeData(elem)

[Функция] jQuery.removeData(elem)
Раздел "Internals"

Функция удаляет расширение атрибута, которое должно существовать в элементе.
Сигнатура
jQuery.removeData(elem) → jQuery
Параметры
jQuery.removeData(elem)
1.2
elem: удаляемый элемент из сохранённых данных.
Description

Данная функция валяется дополнением к функции jQuery.data(elem) и вызывается при необходимости использовании jQuery.data(elem, name, value).

Примеры:

Пример:

Установить данные, затем удалить их.

<!DOCTYPE html>
<html>
<head>
<style>
  div { margin:2px; color:blue; }
  span { color:red; }
 </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var adiv = $("div").get(0);
    $("span:eq(0)").text("" + jQuery.data(adiv, "test1"));
    jQuery.data(adiv, "test1", "VALUE-1");
    jQuery.data(adiv, "test2", "VALUE-2");
    $("span:eq(1)").text("" + jQuery.data(adiv, "test1"));
    jQuery.removeData(adiv);
    $("span:eq(2)").text("" + jQuery.data(adiv, "test1"));
    $("span:eq(3)").text("" + jQuery.data(adiv, "test2"));

  });
  </script>

<div>value1 before creation: <span></span></div>
  <div>value1 after creation: <span></span></div>
  <div>value1 after removal: <span></span></div>
  <div>value2 after removal: <span></span></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/jQuery.removeData/


jQuery jQuery.removeData(elem, name)

[Функция] jQuery.removeData(elem, name)
Раздел "Internals"

Функция удаляет данные, с определенным именем.
Сигнатура
jQuery.removeData(elem, name) → jQuery
Параметры
jQuery.removeData(elem, name)
1.2
elem: удаляемый элемент по определенному имени.
name: имя удаляемых данных.
Description

Функция дополнение к функции jQuery.data(elem, name, value).

Примеры:

Пример:

Установить сохраняемые данные, затем удалить их.

<!DOCTYPE html>
<html>
<head>
<style>
  div { margin:2px; color:blue; }
  span { color:red; }
 </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var adiv = $("div").get(0);
    $("span:eq(0)").text("" + jQuery.data(adiv, "test1"));
    jQuery.data(adiv, "test1", "VALUE-1");
    jQuery.data(adiv, "test2", "VALUE-2");
    $("span:eq(1)").text("" + jQuery.data(adiv, "test1"));
    jQuery.removeData(adiv, "test1");
    $("span:eq(2)").text("" + jQuery.data(adiv, "test1"));
    $("span:eq(3)").text("" + jQuery.data(adiv, "test2"));

  });
  </script>

<div>value1 before creation: <span></span></div>
  <div>value1 after creation: <span></span></div>
  <div>value1 after removal: <span></span></div>
  <div>value2 after removal: <span></span></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/jQuery.removeData/


jQuery

В разделе "Селекторы в jQuery" содержаться следующие методы:
attributeHas
Выбрать элементы, которые имеют определенный атрибут. Учтите помещение '@' перед именем атрибута приводило к конфликту в версии 1.2.

attributeEquals
Выбрать элементы, которые имеют определенный атрибут с заранее определенной переменной.

attributeNotEqual
Выбрать элементы, которые либо не имеют определенного атрибута либо имеют, но без определенной переменной.

attributeStartsWith
Выбрать элементы, имеющие определенный атрибут и начинающиеся с определенной переменной.

attributeEndsWith
Выбрать элементы, которые имеют определенный атрибут, оканчивающийся определенной переменной.

attributeContains
Выбрать элементы, имеющие определенный атрибут, который содержит определенную переменную.

attributeMultiple
Выбрать элементы, которые соответствуют всем заданным атрибутам фильтрам.

all
Выбрать все элементы.

class
Выбор всех элементов по определенному классу.

element
Подобрать все элементы с помощью их имени (названия тэга).

id
Данный метод позволяет выбрать единственный элемент по его id атрибуту.

multiple
Выбор совмещенных результатов всех обозначенных элементов.

animated
Выбор элементов, которые в текущий момент анимированы.

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

even
Выбор чётных элементов, начиная с нулевого индекса.

odd
Выбор нечётных элементов, индекс которых начинается с нуля.

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

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

header
Выбрать все заголовки, пример h1, h2, h3 и т.д.

last
Подобрать последний выбранный элемент.

first
Подобрать первый выбранный элемент.

not(selector)
Этот метод предназначен для отфилитровывания всех элементов с помощью заранее установленного селектора.

first-child
Выбрать все элементы, которые являются первыми элементами 'детьми' для их родительских элементов

lastChild
Выбрать все элементы, являющиеся последними элементами 'детьми' для их родительских элементов.

onlyChild
Метод выбирает только те элементы 'дети', которые являются единственными для их родительских элементов

nthChild
Выбрать все элементы, являющиеся энными ‘детьми’ для их родительских элементов или выбор чётных или нечётных элементов, являющихся ‘детьми’ для родитльских элементов.

contains
Выбор элементов, которые содержат заданный текст.

empty
Выбрать все элементы, которые не имеют дочерних элементов ( текста).

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

has(selector)
Уменьшение набора выбираемых элементов к тем элементам, которые имеют элементы потомки, соответсвующие селектору, указанному в параметре selector.

parent
Выбрать все родительские элементы - элементы, которые имеют элементы, обозначающиеся как 'дети', содержащие текст.

button
Выбрать все элементы - кнопки и элементы input c типом button.

checkbox
Выбор элементов input с типом checkbox.

checked
Выбрать все элементы, которые являются отмеченными.

disabled
Выбрать все элементы, которые являются неактивными.

enabled
Выбрать все элементы, которые являются активными.

:file
Выбрать все элементы input с типом file.

image
Выбрать все элементы input с типом image.

input
Выбрать элементы input, textarea, select и элементы кнопоки (button).

password
Выбрать все элементы input с типом password.

radio
Выбрать все элементы input с типом radio.

reset
Выбрать все элементы формы с типом reset.

selected
Подобрать все элементы, которые ранее были выбраны.

submit
Выбрать все элементы input с типом submit.

text
Выбрать все текстовые элементы input.

child(parent, child)
Выбрать все элементы являющиеся 'детьми' для элементов, определенных как 'родительские'.

descendant(ancestor, descendant)
Выбор всех потомков элементов, обозначенных как 'потомок' элементов, обозначеных как элемент 'предок'.

next
Выбрать все элементы обозначенные как 'последующие (next), которые немедленно следуют за элементами обозначенными как 'предшествующие (prev)'.

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

hidden
Выбрать все элементы, в отношении которых установлено css свойство hidden, в том числе и скрытые элементы input.

visible
Выбрать все элементы, в отношении которых установлено css свойство - visible.


jQuery

Атрибуты в jQuery:
attributeHas
Выбрать элементы, которые имеют определенный атрибут. Учтите помещение '@' перед именем атрибута приводило к конфликту в версии 1.2.

attributeEquals
Выбрать элементы, которые имеют определенный атрибут с заранее определенной переменной.

attributeNotEqual
Выбрать элементы, которые либо не имеют определенного атрибута либо имеют, но без определенной переменной.

attributeStartsWith
Выбрать элементы, имеющие определенный атрибут и начинающиеся с определенной переменной.

attributeEndsWith
Выбрать элементы, которые имеют определенный атрибут, оканчивающийся определенной переменной.

attributeContains
Выбрать элементы, имеющие определенный атрибут, который содержит определенную переменную.

attributeMultiple
Выбрать элементы, которые соответствуют всем заданным атрибутам фильтрам.

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


jQuery attributeContains

[Селектор] attributeContains
Раздел "Selectors"

Выбрать элементы, имеющие определенный атрибут, который содержит определенную переменную.
Сигнатура
attributeContains → Array
Параметры
attributeContains
1.0
attribute: имя атрибута.
value: Переменная атрибута. Кавычки не обязательны, но необходимы чтобы избежать конфликтов когда переменная содержит код "]". Переменные могут быть использованы с применением следующего синтаксиса: [name^='" +MyVar+ "']
Пример
[attribute*=value]
Примеры:

Пример:

Выбрать все элементы (input) с атрибутом name, содержащим 'man' и указать в переменной определенный текст.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("input[name*='man']").val("has man in it!");

  });
  </script>

<input name="newsletter" />
  <input name="milkman" />
  <input name="jobletter" />

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/attribute-contains-word-selector/


jQuery attributeEndsWith

[Селектор] attributeEndsWith
Раздел "Selectors"

Выбрать элементы, которые имеют определенный атрибут, оканчивающийся определенной переменной.
Сигнатура
attributeEndsWith → Array
Параметры
attributeEndsWith
1.0
attribute: имя атрибута.
value: Переменная атрибута. Кавычки не обязательны, но необходимы чтобы избежать конфликтов когда переменная содержит код "]". Переменные могут быть использованы с применением следующего синтаксиса: [name^='" +MyVar+ "']
Пример
[attribute$=value]
Примеры:

Пример:

Найти все элементы input с атрибутом name, которые оканчиваются на 'news' и добавить текст в эти элементы.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("input[name$='letter']").val("a letter");

  });
  </script>

<input name="newsletter" />
  <input name="milkman" />
  <input name="jobletter" />

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/


jQuery attributeEquals

[Селектор] attributeEquals
Раздел "Selectors"

Выбрать элементы, которые имеют определенный атрибут с заранее определенной переменной.
Сигнатура
attributeEquals → Array
Параметры
attributeEquals
1.0
attribute: имя атрибута.
value: значение атрибута. В большинстве случаев кавычки не обязательны, но необходимы для избежания конфликтов, когда переменная содержит "]".
Пример
[attribute=value]
Примеры:

Пример:

Найти все элементы input внутри которых содержится атрибут name и значение которого соответсвует 'newsletter', затем изменить текст в элементе span, следующим за элементом input.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("input[name='newsletter']").next().text(" is newsletter");

  });
  </script>

<div>
    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="newsletters" value="Cold Fusion" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="accept" value="Evil Plans" />
    <span>name?</span>
  </div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/attribute-equals-selector/


jQuery attributeHas

[Селектор] attributeHas
Раздел "Selectors"

Выбрать элементы, которые имеют определенный атрибут. Учтите помещение '@' перед именем атрибута приводило к конфликту в версии 1.2.
Сигнатура
attributeHas → Array
Параметры
attributeHas
1.0
attribute: имя атрибута.
Пример
[attribute]
Примеры:

Пример:

Связать щелчок мышки с добавлением текста, находящегося в id, внутрь элемента div.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("div[id]").one("click", function(){
      var idString = $(this).text() + " = " + $(this).attr("id");
      $(this).text(idString);
    });

  });
  </script>

<div>no id</div>
  <div id="hey">with id</div>
  <div id="there">has an id</div>
  <div>nope</div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/has-attribute-selector/


jQuery attributeMultiple

[Селектор] attributeMultiple
Раздел "Selectors"

Выбрать элементы, которые соответствуют всем заданным атрибутам фильтрам.
Сигнатура
attributeMultiple → Array
Параметры
attributeMultiple
1.0
attributeFilter1: атрибут фильтр.
attributeFilter2: дополнительный атрибут фильтр, уменьшающий выбор.
attributeFilterNtn: любое количество необходиых атрибутов фильтров.
Пример
[attributeFilter1][attributeFilter2][attributeFilterN]
Примеры:

Пример:

Выбрать все элементы input, имеющие id атрибут и атрибут name, оканчивающийся на man и установить переменную.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("input[id][name$='man']").val("only this one");

  });
  </script>

<input id="man-news" name="man-news" />
  <input name="milkman" />
  <input id="letterman" name="new-letterman" />
  <input name="newmilk" />

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/multiple-selector/


jQuery attributeNotEqual

[Селектор] attributeNotEqual
Раздел "Selectors"

Выбрать элементы, которые либо не имеют определенного атрибута либо имеют, но без определенной переменной.
Сигнатура
attributeNotEqual → Array
Параметры
attributeNotEqual
1.0
attribute: имя атрибута.
value: переменная атрибута.В большинстве случаев кавычки не обязательны, но необходимы чтобы избежать конфликтов, когда переменная содержит "]".
Пример
[attribute!=value]
Примеры:

Пример:

Выбрать все элементы input, которые не имеют имени 'newsletter' и изменить текст элемента span, следующим за элементом input.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("input[name!='newsletter']").next().text(" is not newsletter");

  });
  </script>

<div>
    <input type="radio" name="newsletter" value="Hot Fuzz" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" value="Cold Fusion" />
    <span>name?</span>
  </div>
  <div>
    <input type="radio" name="accept" value="Evil Plans" />
    <span>name?</span>
  </div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/attribute-not-equals-selector/


jQuery attributeStartsWith

[Селектор] attributeStartsWith
Раздел "Selectors"

Выбрать элементы, имеющие определенный атрибут и начинающиеся с определенной переменной.
Сигнатура
attributeStartsWith → Array
Параметры
attributeStartsWith
1.0
attribute: имя атрибута.
value: значение атрибута. Кавычки не обязательны, но необходимы чтобы избежать конфликтов, когда в переменной содержится код со знаками "]". Переменные могут быть использованы с применением следующего синтаксиса: [name^='" +MyVar+ "']
Пример
[attribute^=value]
Примеры:

Пример:

Найти все элементы input с атрибутом name, которые начинаются на 'news' и добавить текст в этот элемент.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("input[name^='news']").val("news here!");

  });
  </script>

<input name="newsletter" />
  <input name="milkman" />
  <input name="newsboy" />

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/attribute-starts-with-selector/


jQuery has

[Селектор] has
Раздел "Selectors"

Выбрать элементы, которые содержат, по крайней мере, один элемент, который соответсвует заданному селектору.
Сигнатура
has → Array
Параметры
has
1.1.4
selector: Фильтруемый селектор.
Пример
:has
Примеры:

Пример:

Добавить класс "test" ко всем элементам div, которые имеют вложенный параграф.

<!DOCTYPE html>
<html>
<head>
<style>  .test{ border: 3px inset red; }</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div:has(p)").addClass("test");

  });
  </script>

<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/has/


jQuery multiple

[Селектор] multiple
Раздел "Selectors"

Выбор совмещенных результатов всех обозначенных элементов.
Сигнатура
multiple → Array
Параметры
multiple
1.0
selector1: любой правильный css селектор.
selector2: другой правильный css селектор.
electorN: неограниченное количество css селекторов.
Description

Вы можете указать любое количество селекторов для объединения в один результат. Учтите, порядок элементов структуры dom и в jQuery объекте необязательно совпадают.

Пример
selector1, selector2, selectorN
Примеры:

Пример:

Выбрать все элементы, которые имеют одни из трёх селекторов – div, span, p.myClass.

<!DOCTYPE html>
<html>
<head>
<style>
  div,span,p {
    width: 130px;
    height: 60px;
    float:left;
    padding: 3px;
    margin: 2px;
    background-color: #EEEEEE;
    font-size:14px;
  }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div,span,p.myClass").css("border","3px solid red");

  });
  </script>

<div>div</div>
  <p class="myClass">p class="myClass"</p>
  <p class="notMyClass">p class="notMyClass"</p>
  <span>span</span>

</body>
</html>

Пример:

Указать порядок расположения элементов в jQuery объекте.

<!DOCTYPE html>
<html>
<head>
<style>
  b { color:red; font-size:16px; display:block; clear:left; }
  div,span,p { width: 40px; height: 40px; float:left;
               margin: 10px; background-color: blue;
               padding:3px; color:white; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("*", document.body).css("border","3px solid red");

  });
  </script>

<span>span</span>
  <p>p</p>
  <p>p</p>
  <div>div</div>
  <span>span</span>
  <p>p</p>
  <div>div</div>
  <b></b>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/multiple-selector/


jQuery

Иерархия элементов:
child(parent, child)
Выбрать все элементы являющиеся 'детьми' для элементов, определенных как 'родительские'.

descendant(ancestor, descendant)
Выбор всех потомков элементов, обозначенных как 'потомок' элементов, обозначеных как элемент 'предок'.

next
Выбрать все элементы обозначенные как 'последующие (next), которые немедленно следуют за элементами обозначенными как 'предшествующие (prev)'.

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


jQuery child(parent, child)

[Селектор] child(parent, child)
Раздел "Selectors"

Выбрать все элементы являющиеся 'детьми' для элементов, определенных как 'родительские'.
Сигнатура
child(parent, child) → Array
Параметры
child(parent, child)
1.0
parent: любой доступный селектор.
child: селектор подходящего элемента, который является элементом "ребёнком" первого селектора.
Пример
Родительский элемент > дочерний элемент
Примеры:

Пример:

Найти все элементы, являющиеся «детьми» элементов с id "main".

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-size:14px; }
  span#main { display:block; background:yellow; height:110px; }
  button { display:block; float:left; margin:2px;
           font-size:14px; }
  div { width:90px; height:90px; margin:5px; float:left;
        background:#bbf; font-weight:bold; }
  div.mini { width:30px; height:30px; background:green; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("#main > *").css("border", "3px double red");

  });
  </script>

<span id="main">
    <div></div>
    <button>Child</button>
    <div class="mini"></div>
    <div>
      <div class="mini"></div>
      <div class="mini"></div>
    </div>
    <div><button>Grand</button></div>
    <div><span>A Span <em>in</em> child</span></div>
    <span>A Span in main</span>
  </span>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/child/


jQuery descendant(ancestor, descendant)

[Селектор] descendant(ancestor, descendant)
Раздел "Selectors"

Выбор всех потомков элементов, обозначенных как 'потомок' элементов, обозначеных как элемент 'предок'.
Сигнатура
descendant(ancestor, descendant) → Array
Параметры
descendant(ancestor, descendant)
1.0
ancestor: любой допустимый css селектор.
descendant: CSS селектор искомого элемента, который является "потомком" первого селектора.
Пример
Предок потомок
Примеры:

Пример:

Найти все элементы "потомки" формы.

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-size:14px; }
  form { border:2px green solid; padding:2px; margin:0;
         background:#efe; }
  div { color:red; }
  fieldset { margin:1px; padding:3px; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("form input").css("border", "2px dotted blue");

  });
  </script>

<form>
    <div>Form is surrounded by the green outline</div>
    <label>Child:</label>
    <input name="name" />
    <fieldset>
      <label>Grandchild:</label>
      <input name="newsletter" />
    </fieldset>
  </form>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/descendant/


jQuery next

[Селектор] next
Раздел "Selectors"

Выбрать все элементы обозначенные как 'последующие (next), которые немедленно следуют за элементами обозначенными как 'предшествующие (prev)'.
Сигнатура
next → Array
Параметры
next
1.0
prev: любой доступный селектор.
next: селектор выбираемых элементов, которые следуют за предшествующим селектором.
Пример
prev + next
Примеры:

Пример:

Найти все элементы input формы, которые немедленно следуют за элементами label.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("label + input").css("color", "blue").val("Labeled!")

  });
  </script>

<form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
    </fieldset>
  </form>
  <input name="none" />

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/next/


jQuery siblings

[Селектор] siblings
Раздел "Selectors"

Выбор всех элементов (соотносящихся друг к другу как 'брат и сестра') после элемента обозначенного как 'prev', которые отфильтровываются с помощью 'siblings' селектора.
Сигнатура
siblings → Array
Параметры
siblings
1.0
prev: любой доступный селектор.
siblings: селекторы - фильтры, выбирающие элементы, которые являются селекторами, соотносимыми как "дети одних родителей" для первого селектора.
Пример
prev ~ siblings
Примеры:

Пример:

Поиск всех элементов div, которые соотносятся как "дети одних родителей" и следуют за элементом с id prev. Учтите, что span не был выбран, так как этот элемент не является элементом div и элемент с id "niece" не выбирается так как он не является элементом соответсвующим соотношению "дети одних родителей".

<!DOCTYPE html>
<html>
<head>
<style>
  div,span {
    display:block;
    width:80px;
    height:80px;
    margin:5px;
    background:#bbffaa;
    float:left;
    font-size:14px;
  }
  div#small {
    width:60px;
    height:25px;
    font-size:12px;
    background:#fab;
  }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("#prev ~ div").css("border", "3px groove blue");

  });
  </script>

<div>div (doesn't match since before #prev)</div>
  <div id="prev">div#prev</div>
  <div>div sibling</div>
  <div>div sibling <div id="niece">div neice</div></div>
  <span>span sibling (not div)</span>
  <div>div sibling</div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/siblings/


jQuery

Методы для работы с формами:
button
Выбрать все элементы - кнопки и элементы input c типом button.

checkbox
Выбор элементов input с типом checkbox.

checked
Выбрать все элементы, которые являются отмеченными.

disabled
Выбрать все элементы, которые являются неактивными.

enabled
Выбрать все элементы, которые являются активными.

:file
Выбрать все элементы input с типом file.

image
Выбрать все элементы input с типом image.

input
Выбрать элементы input, textarea, select и элементы кнопоки (button).

password
Выбрать все элементы input с типом password.

radio
Выбрать все элементы input с типом radio.

reset
Выбрать все элементы формы с типом reset.

selected
Подобрать все элементы, которые ранее были выбраны.

submit
Выбрать все элементы input с типом submit.

text
Выбрать все текстовые элементы input.


jQuery button

[Селектор] button
Раздел "Selectors"

Выбрать все элементы - кнопки и элементы input c типом button.
Сигнатура
button → Array
Параметры
Пример
:button
Примеры:

Пример:

Найти все элементы формы, тип которых button.

<!DOCTYPE html>
<html>
<head>
<style>
  textarea { height:25px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var input = $(":button").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // нам не надо чтобы форма отправлялась

  });
  </script>

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/button/


jQuery checkbox

[Селектор] checkbox
Раздел "Selectors"

Выбор элементов input с типом checkbox.
Сигнатура
checkbox → Array
Параметры
Description

Использование псевдо-селектора $(':checkbox') эквивалентно $('*:checkbox') ,однако последний селектор медленнее. Поэтому рекомендуется использовать $('input:checkbox').

Пример
:checkbox
Примеры:

Пример:

Выбрать все элементы checkbox.

<!DOCTYPE html>
<html>
<head>
<style>
  textarea { height:25px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var input = $("form :checkbox").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // нам не надо чтобы форма отправлялась

  });
  </script>

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/checkbox/


jQuery checked

[Селектор] checked
Раздел "Selectors"

Выбрать все элементы, которые являются отмеченными.
Сигнатура
checked → Array
Параметры
Пример
:checked
Примеры:

Пример:

Выбрать все отмеченные элементы формы.

<!DOCTYPE html>
<html>
<head>
<style>  div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    function countChecked() {
      var n = $("input:checked").length;
      $("div").text(n + (n == 1 ? " is" : " are") + " checked!");
    }
    countChecked();
    $(":checkbox").click(countChecked);

  });
  </script>

<form>
    <input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
    <input type="checkbox" name="newsletter" value="Daily" />
    <input type="checkbox" name="newsletter" value="Weekly" />
    <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
    <input type="checkbox" name="newsletter" value="Yearly" />
  </form>
  <div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/checked/


jQuery disabled

[Селектор] disabled
Раздел "Selectors"

Выбрать все элементы, которые являются неактивными.
Сигнатура
disabled → Array
Параметры
Пример
:disabled
Примеры:

Пример:

Найти все отключенные элементы формы.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("input:disabled").val("this is it");

  });
  </script>

<form>
    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/disabled/


jQuery enabled

[Селектор] enabled
Раздел "Selectors"

Выбрать все элементы, которые являются активными.
Сигнатура
enabled → Array
Параметры
Пример
:enabled
Примеры:

Пример:

Выбрать все активированные элементы input.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("input:enabled").val("this is it");

  });
  </script>

<form>
    <input name="email" disabled="disabled" />
    <input name="id" />
</form>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/enabled/


jQuery image

[Селектор] image
Раздел "Selectors"

Выбрать все элементы input с типом image.
Сигнатура
image → Array
Параметры
Пример
:image
Примеры:

Пример:

Найти все элементы формы тип которых image.

<!DOCTYPE html>
<html>
<head>
<style>
  textarea { height:25px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var input = $(":image").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // нам не надо чтобы форма отправлялась

  });
  </script>

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/image/


jQuery input

[Селектор] input
Раздел "Selectors"

Выбрать элементы input, textarea, select и элементы кнопоки (button).
Сигнатура
input → Array
Параметры
Пример
:input
Примеры:

Пример:

Найти все элементы input.

<!DOCTYPE html>
<html>
<head>
<style>
  textarea { height:25px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var allInputs = $(":input");
    var formChildren = $("form > *");
    $("#messages").text("Found " + allInputs.length + " inputs and the form has " +
                             formChildren.length + " children.");

    // для предотвращения отправки формы
    $("form").submit(function () { return false; });

  });
  </script>

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div id="messages">

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/input/


jQuery password

[Селектор] password
Раздел "Selectors"

Выбрать все элементы input с типом password.
Сигнатура
password → Array
Параметры
Пример
:password
Примеры:

Пример:

Выбрать все поля формы с типом password.

<!DOCTYPE html>
<html>
<head>
<style>
  textarea { height:45px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var input = $(":password").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // so it won't submit

  });
  </script>

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/password/


jQuery radio

[Селектор] radio
Раздел "Selectors"

Выбрать все элементы input с типом radio.
Сигнатура
radio → Array
Параметры
Description

Использование псевдо-селектора $(':radio') эквивалентно $('*:radio'), однако последний медленнее. Поэтому рекомендуется использовать $('input:radio').

Пример
:radio
Примеры:

Пример:

Выбрать все элементы input с типом radio.

<!DOCTYPE html>
<html>
<head>
<style>
  textarea { height:25px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var input = $("form :radio").wrap('').parent().css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // нам не надо

  });
  </script>

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/radio/


jQuery reset

[Селектор] reset
Раздел "Selectors"

Выбрать все элементы формы с типом reset.
Сигнатура
reset → Array
Параметры
Пример
:reset
Примеры:

Пример:

Выбрать все элементы формы тип которых reset.

<!DOCTYPE html>
<html>
<head>
<style>
textarea{ height:25px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var input = $(":reset").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // нам не надо чтобы форма отправлялась

  });
  </script>

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/reset/


jQuery selected

[Селектор] selected
Раздел "Selectors"

Подобрать все элементы, которые ранее были выбраны.
Сигнатура
selected → Array
Параметры
Пример
:selected
Примеры:

Пример:

Связать событие change с выбором текста в каждой опции поля select и его передачей в элемент div. Функция первоначально выполняется при помощи функции trigger().

<!DOCTYPE html>
<html>
<head>
<style>    div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<select name="garden" multiple="multiple">
    <option>Flowers</option>
    <option selected="selected">Shrubs</option>
    <option>Trees</option>
    <option selected="selected">Bushes</option>
    <option>Grass</option>
    <option>Dirt</option>
  </select>
  <div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/selected/


jQuery

Основные селекторы:
animated
Выбор элементов, которые в текущий момент анимированы.

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

even
Выбор чётных элементов, начиная с нулевого индекса.

odd
Выбор нечётных элементов, индекс которых начинается с нуля.

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

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

header
Выбрать все заголовки, пример h1, h2, h3 и т.д.

last
Подобрать последний выбранный элемент.

first
Подобрать первый выбранный элемент.


jQuery all

[Селектор] all
Раздел "Selectors"

Выбрать все элементы.
Сигнатура
all → Array
Параметры
Description

Наиболее полезно при объединении с контекстом поиска.

Пример
*
Примеры:

Пример:

Выбрать каждый элемент (head, body, и т.д.).

<!DOCTYPE html>
<html>
<head>
<style>
div,span,p {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("*").css("border","3px solid red");

  });
  </script>

<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>

</body>
</html>

Пример:

Простой пример выбора всех элементов в контексте к document.body, поэтому элементы подобно head, script, и т.п. останутся не выбранными.

$(document).ready(function(){

$("*", document.body).css("border","3px solid red");

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/all-selector/


jQuery class

[Селектор] class
Раздел "Selectors"

Выбор всех элементов по определенному классу.
Сигнатура
class → Array
Параметры
Пример
class
Примеры:

Пример:

Найти элементы с классом "myClass".

<!DOCTYPE html>
<html>
<head>
<style>
  div,span {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$(".myClass").css("border","3px solid red");

  });
  </script>

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

</body>
</html>

Пример:

Найти элементы с классами "myClass", "myClass1".

<!DOCTYPE html>
<html>
<head>
<style>
  div,span {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$(".myClass, .myClass1").css("border","3px solid red");

  });
  </script>

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass1">span class="myClass1"</span>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/class-selector/


jQuery element

[Селектор] element
Раздел "Selectors"

Подобрать все элементы с помощью их имени (названия тэга).
Сигнатура
element → Array
Параметры
element
1.0
element: искомый элемент. Возвращает ссылку на имя элемента (тэга) структуры DOM.
Пример
element
Примеры:

Пример:

Найти все div элементы.

<!DOCTYPE html>
<html>
<head>
<style>
div,span {
    width: 60px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").css("border","3px solid red");

  });
  </script>

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/element-selector/


jQuery id

[Function] id
Раздел "Selectors"

Данный метод позволяет выбрать единственный элемент по его id атрибуту.
Сигнатура
id → Array
Параметры
id
1.0
id: искомый ID, определённый через обозначение id атрибута элемента.
Description

Если id содержит точки или двоеточия, вы должны экранировать данные знаки через двойной обратный слеш. Изучите: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_that_has_weird_characters_in_its_ID.3F.

Пример
#id
Примеры:

Пример:

Найти элемент с id "myDiv".

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 90px;
    height: 90px;
    float:left;
    padding: 5px;
    margin: 5px;
    background-color: #EEEEEE;
}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("#myDiv").css("border","3px solid red");

  });
  </script>

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

</body>
</html>

Пример:

Найти элемент с id "myID.entry[1]". Пример показывает как должны быть экранированы специальные символы обратными слешами.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    float:left;
    padding: 2px;
    margin: 3px;
    background-color: #EEEEEE;
}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("#myID\\.entry\\[1\\]").css("border","3px solid red");

  });
  </script>

<div id="myID.entry[0]">id="myID.entry[0]"</div>
<div id="myID.entry[1]">id="myID.entry[1]"</div>
<div id="myID.entry[2]">id="myID.entry[2]"</div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/id-selector/


jQuery animated

[Селектор] animated
Раздел "Selectors"

Выбор элементов, которые в текущий момент анимированы.
Сигнатура
animated → Array
Параметры
Пример
:header
Примеры:

Пример:

Изменить цвет любых div элементов для которых была установлена анимация.

<!DOCTYPE html>
<html>
<head>
<style>
  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }
  div.colored { background:green; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();

  });
  </script>

<button id="run">Run</button>
  <div></div>
  <div id="mover"></div>
  <div></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/animated/


jQuery eq

[Селектор] eq
Раздел "Selectors"

Выбрать единственный элемент по его индексу.
Сигнатура
eq → Array
Параметры
eq
1.0
index: основанный на нуле индекс выбираемого элемента.
Пример
:eq(index)
Примеры:

Пример:

Выбрать третий столбец.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("td:eq(2)").css("color", "red");

  });
  </script>

<table border="1">
    <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
    <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/eq/


jQuery even

[Селектор] even
Раздел "Selectors"

Выбор чётных элементов, начиная с нулевого индекса.
Сигнатура
even → Array
Параметры
Пример
:even
Примеры:

Пример:

Вырать чётные строки таблицы - первую, третью и так далее (индекс 0, 2, 4 и т.д.).

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("tr:even").css("background-color", "#bbbbff");

  });
  </script>

<table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>
    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/even/


jQuery first

[Селектор] first
Раздел "Selectors"

Подобрать первый выбранный элемент.
Сигнатура
first → Array
Параметры
Description

Пример
:first
Примеры:

Пример:

Выбрать первую строку таблицы.

<!DOCTYPE html>
<html>
<head>
<style>
  td { color:blue; font-weight:bold; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("tr:first").css("font-style", "italic");

  });
  </script>

<table>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
  </table>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/first/


jQuery gt

[Селектор] gt
Раздел "Selectors"

Выбор всех элементов в порядке возрастания.
Сигнатура
gt → Array
Параметры
gt
1.0
index: индекс начинается с нуля
Пример
:gt(index)
Примеры:

Пример:

Выбрать столбцы начиная с 5 и выше. Напоминание: индекс начинается с 0.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("td:gt(4)").css("text-decoration", "line-through");

  });
  </script>

<table border="1">
    <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
    <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/gt/


jQuery header

[Селектор] header
Раздел "Selectors"

Выбрать все заголовки, пример h1, h2, h3 и т.д.
Сигнатура
header → Array
Параметры
header
1.2
index: индекс начинается с нуля
Пример
:header
Примеры:

Пример:

Добавить цвет фона и цвет текста ко всем заголовкам на странице.

<!DOCTYPE html>
<html>
<head>
<style>
body { font-size: 10px; font-family: Arial; }
h1, h2 { margin: 3px 0; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$(":header").css({ background:'#CCC', color:'blue' });

  });
  </script>

<h1>Header 1</h1>
  <p>Contents 1</p>
  <h2>Header 2</h2>
  <p>Contents 2</p>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/header/


jQuery last

[Селектор] last
Раздел "Selectors"

Подобрать последний выбранный элемент.
Сигнатура
last → Array
Параметры
Пример
:last
Примеры:

Пример:

Выбрать последнюю строку таблицы.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

  });
  </script>

<table>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
  </table>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/last/


jQuery lt

[Селектор] lt
Раздел "Selectors"

Выбор всех элементов в порядке убывания.
Сигнатура
lt → Array
Параметры
lt
1.0
index: индекс начинается с нуля
Пример
:lt(index)
Примеры:

Пример:

Выбрать столбцы, индекс которых меньше 4.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("td:lt(4)").css("color", "red");

  });
  </script>

<table border="1">
    <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
    <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/lt/


jQuery odd

[Селектор] odd
Раздел "Selectors"

Выбор нечётных элементов, индекс которых начинается с нуля.
Сигнатура
odd → Array
Параметры
Пример
:odd
Примеры:

Пример:

Выбрать нечётные строки таблицы, соответсвующие второй, четвёртой и так далее (индекс 1, 3, 5 и т.д.).

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    background:#f3f7f5;
  }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("tr:odd").css("background-color", "#bbbbff");

  });
  </script>

<table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>
    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/odd/


jQuery

Фильтры видимости:
hidden
Выбрать все элементы, в отношении которых установлено css свойство hidden, в том числе и скрытые элементы input.

visible
Выбрать все элементы, в отношении которых установлено css свойство - visible.


jQuery hidden

[Селектор] hidden
Раздел "Selectors"

Выбрать все элементы, в отношении которых установлено css свойство hidden, в том числе и скрытые элементы input.
Сигнатура
hidden → Array
Параметры
Пример
:hidden
Примеры:

Пример:

Вывод всех скрытых элементов div и скрытых полей (input), и их подсчет.

<!DOCTYPE html>
<html>
<head>
<style>
div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
span { display:block; clear:left; color:red; }
.starthidden { display:none; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("span:first").text("Found " + $(":hidden", document.body).length +
                         " hidden elements total.");
    $("div:hidden").show(3000);
    $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

  });
  </script>

    // так как в неокторых браузерах :hidden включает head, title, script, и т.д... поэтому необходимо ограничивать выбор скрытых элементов указанием на document.body
<span></span>
  <div></div>
  <div style="display:none;">Hider!</div>
  <div></div>
  <div class="starthidden">Hider!</div>
  <div></div>
  <form>
    <input type="hidden" />
    <input type="hidden" />
    <input type="hidden" />
  </form>
  <span>
  </span>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/hidden/


jQuery visible

[Селектор] visible
Раздел "Selectors"

Выбрать все элементы, в отношении которых установлено css свойство - visible.
Сигнатура
visible → Array
Параметры
Description

Свойство :visible было изменено в jQuery 1.3.2. Об изменениях см. http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled

Пример
:visible
Примеры:

Пример:

По щелчку мыши изменить цвет всех элементов div на жёлтый, в отношении которых установлено css свойство visible.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
  .starthidden { display:none; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("div:visible").click(function () {
      $(this).css("background", "yellow");
    });
    $("button").click(function () {
      $("div:hidden").show("fast");
    });

  });
  </script>

<button>Show hidden to see they don't change</button>
  <div></div>
  <div class="starthidden"></div>
  <div></div>
  <div></div>
  <div style="display:none;"></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/visible/


jQuery

jQuery Slyweb.ru
Фильтры содержания:
contains
Выбор элементов, которые содержат заданный текст.

empty
Выбрать все элементы, которые не имеют дочерних элементов ( текста).

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

has(selector)
Уменьшение набора выбираемых элементов к тем элементам, которые имеют элементы потомки, соответсвующие селектору, указанному в параметре selector.

parent
Выбрать все родительские элементы - элементы, которые имеют элементы, обозначающиеся как 'дети', содержащие текст.

not(selector)
Этот метод предназначен для отфилитровывания всех элементов с помощью заранее установленного селектора.


jQuery contains

[Селектор] contains
Раздел "Selectors"

Выбор элементов, которые содержат заданный текст.
Сигнатура
contains → Array
Параметры
contains
1.1.4
text: строка текста, по которой происходит поиск. Строка чувствительна к регистру.
Пример
:contains
Примеры:

Пример:

Выбрать все элементы div, содержащие текст "John", затем подчеркнуть их.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div:contains('John')").css("text-decoration", "underline");

  });
  </script>

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/contains/


jQuery has(selector)

[Селектор] has(selector)
Раздел "Selectors"

Уменьшение набора выбираемых элементов к тем элементам, которые имеют элементы потомки, соответсвующие селектору, указанному в параметре selector.
Сигнатура
has(selector) → Array
Параметры
has(selector)
1.4
selector: селектор, с помощью которого происходит фильтрация элементов.
has(contained)
1.4
contained: элемент структуры DOM, по которому происходит уменьшение набора элементов.
Description

jQuery объект представлен как набор элементов. Метод .has() выбирает из этого набора более узкий набор элементов, создавая новый объект jQuery, из подмножетсва элементов. Селектор указанный в параметре selector проверяет имеет ли в наличии выбранный элемент элементы потомки, если имеет, то результат будет сожержать указнные элементы.

Пример
has(selector)
Примеры:

Пример:

Добавить класс "test" ко всем элементам div, которые имеют вложенный параграф.

<!DOCTYPE html>
<html>
<head>
<style>  .test{ border: 3px inset red; }</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div:has(p)").addClass("test");

  });
  </script>

<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>

</body>
</html>

Пример:

Ниже указан пример проверки наичия одного элемеента в нутри другого.

<!DOCTYPE html>
<html>
<head>
<style>
  .div1{background: #cadceb;}
  .div2{background: #fef;}
  </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").css("border", "2px solid red")
        .addClass(function(){
        return "div"+$(this).index;});

  });
  </script>

<div class="div1"><p>Первый div</p></div>
<div class="div2"><p>Второйdiv</p></div>

</body>
</html>

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/has/


jQuery not(selector)

[Селектор] not(selector)
Раздел "Selectors"

Этот метод предназначен для отфилитровывания всех элементов с помощью заранее установленного селектора.
Сигнатура
not(selector) → Array
Параметры
not(selector)
1.1.4
selector: Селектор с помощью которого происходит фильтрация.
Description

Начиная с jQuery 1.3 метод :not() так же поддерживает селекторы, разделенные запятыми и комплекс селекторов, пример: :not(div a) и :not(div,a).

Пример
:not(selector)
Примеры:

Пример:

Найти все элементы input формы, которые не отмечены (checked) и применить css свойство к последующему элементу span. Учтите, что здесь не происходит изменений, при нажатии на переключателях, поскольку нет связанных событий click.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("input:not(:checked) + span").css("background-color", "yellow");
    $("input").attr("disabled", "disabled");

  });
  </script>

<div>
    <input type="checkbox" name="a" />
    <span>Mary</span>
  </div>
  <div>
    <input type="checkbox" name="b" />
    <span>lcm</span>
  </div>
  <div>
    <input type="checkbox" name="c" checked="checked" />
    <span>Peter</span>
  </div>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/not/


jQuery parent

[Селектор] parent
Раздел "Selectors"

Выбрать все родительские элементы - элементы, которые имеют элементы, обозначающиеся как 'дети', содержащие текст.
Сигнатура
parent → Array
Параметры
Пример
:parent
Примеры:

Пример:

Найти все столбцы, содержащие элементы, обозначенные как элементы "дети", включающие текст.

<!DOCTYPE html>
<html>
<head>
<style>td { width:40px; background:green; }</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("td:parent").fadeTo(1500, 0.3);

  });
  </script>

<table border="1">
    <tr><td>Value 1</td><td></td></tr>
    <tr><td>Value 2</td><td></td></tr>
  </table>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/parent/


jQuery

jQuery Slyweb.ru
Фильтры элементов детей:
first-child
Выбрать все элементы, которые являются первыми элементами 'детьми' для их родительских элементов

lastChild
Выбрать все элементы, являющиеся последними элементами 'детьми' для их родительских элементов.

onlyChild
Метод выбирает только те элементы 'дети', которые являются единственными для их родительских элементов

nthChild
Выбрать все элементы, являющиеся энными ‘детьми’ для их родительских элементов или выбор чётных или нечётных элементов, являющихся ‘детьми’ для родитльских элементов.


jQuery first-child

[Селектор] first-child
Раздел "Selectors"

Выбрать все элементы, которые являются первыми элементами 'детьми' для их родительских элементов
Сигнатура
first-child → Array
Параметры
Description

В то время как метод :first выбирает только один элемент, данный метод выбирает несколько элементов: Один для каждого родителя.

Пример
:first-child
Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
  span { color:#008; }
  span.sogreen { color:green; font-weight: bolder; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("div span:first-child")
        .css("text-decoration", "underline")
        .hover(function () {
              $(this).addClass("sogreen");
            }, function () {
              $(this).removeClass("sogreen");
            });

  });
  </script>

<div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>
  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>
  </div>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/firstChild/


jQuery lastChild

[Селектор] lastChild
Раздел "Selectors"

Выбрать все элементы, являющиеся последними элементами 'детьми' для их родительских элементов.
Сигнатура
lastChild → Array
Параметры
Description

В то время как метод :last выбирает только один элемент, данный метод выбирает более чем один элемент: один для каждого родительского элемента.

Пример
:last-child
Примеры:

Пример:

Найти последний элемент span в каждом из выбранных элементов div и добавить к нему css класс, плюс сделать его активным.

<!DOCTYPE html>
<html>
<head>
<style>
  span.solast { text-decoration:line-through; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("div span:last-child")
        .css({color:"red", fontSize:"80%"})
        .hover(function () {
              $(this).addClass("solast");
            }, function () {
              $(this).removeClass("solast");
            });

  });
  </script>

<div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon,</span>
    <span>Sam</span>
  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph,</span>
    <span>David</span>
  </div>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/lastChild/


jQuery nthChild

[Селектор] nthChild
Раздел "Selectors"

Выбрать все элементы, являющиеся энными ‘детьми’ для их родительских элементов или выбор чётных или нечётных элементов, являющихся ‘детьми’ для родитльских элементов.
Сигнатура
nthChild → Array
Параметры
nthChild
1.0
index: Индекс каждого выбираемого элемента "ребёнка", начинающийся с 1 или со строк even, odd, или равенства определенному значению ( т.е. :nth-child(even), :nth-child(4n) ),
Description

В то время как метод :eq(index) выбирает только один элемент, здесь выборка происходит больше чем по одному элементу: Один для каждого родительского элемента. Множество для каждого родительского элемента как четных так и нечётных элементов, или элементов равных определенному значению. Индекс определен как единица, в отличие от индекса :eq(), который начинается с нуля.

Пример
:nth-child(index/even/odd/equation)
Примеры:

Пример:

Выбрать второй элемент li в каждом найденном списке (ul) и указать на него.

<!DOCTYPE html>
<html>
<head>
<style>
div { float:left; }
span { color:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

  });
  </script>

<div><ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul></div>
  <div><ul>
    <li>Sam</li>
  </ul></div>
  <div><ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul></div>

</body>
</html>

Пример:

Пример показывает, как селектор работает с различными строками. Учтите что метод отличается от :even и :odd, которые не имеют отношения к родительским элементам и фильтруются самостоятельно. В методе :nth-child, тем не менее, подсчёт индекса элементов "детей" начинается с их родительского элемента. В каждом из блоков это легко объясняется...

<!DOCTYPE html>
<html>
<head>
<style>
  button { display:block; font-size:12px; width:100px; }
  div { float:left; margin:10px; font-size:10px;
        border:1px solid black; }
  span { color:blue; font-size:18px; }
  #inner { color:red; }
  td { width:50px; text-align:center; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("button").click(function () {
      var str = $(this).text();
      $("tr").css("background", "white");
      $("tr" + str).css("background", "#ff0000");
      $("#inner").text(str);
    });

  });
  </script>

<div>
    <button>:nth-child(even)</button>
    <button>:nth-child(odd)</button>
    <button>:nth-child(3n)</button>
    <button>:nth-child(2)</button>
  </div>
  <div>
    <button>:nth-child(3n+1)</button>
    <button>:nth-child(3n+2)</button>
    <button>:even</button>
    <button>:odd</button>
  </div>
  <div><table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table></div>
  <div><table>
    <tr><td>Sam</td></tr>
  </table></div>
  <div><table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table></div>
  <span>
    tr<span id="inner"></span>
  </span>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/nthChil/


jQuery onlyChild

[Селектор] onlyChild
Раздел "Selectors"

Метод выбирает только те элементы 'дети', которые являются единственными для их родительских элементов
Сигнатура
onlyChild → Array
Параметры
Description

Если в родительском элементе есть другой элемент 'ребёнок', ничего не выбирается.

Пример
:onlyChild
Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:100px; height:80px; margin:5px; float:left; background:#b9e }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div button:only-child").text("Alone").css("border", "2px blue solid");

  });
  </script>

<div>
    <button>Sibling!</button>
    <button>Sibling!</button>
  </div>
  <div>
    <button>Sibling!</button>
  </div>
  <div>
    None
  </div>
  <div>
    <button>Sibling!</button>
    <button>Sibling!</button>
    <button>Sibling!</button>
  </div>
  <div>
    <button>Sibling!</button>
  </div>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/only-child/


jQuery :file

[Селектор] :file
Раздел "Selectors"

Выбрать все элементы input с типом file.
Сигнатура
:file → Array
Параметры
Пример
:file
Примеры:

Пример:

Найти все элементы формы, тип которых file.

<!DOCTYPE html>
<html>
<head>
<style>
  textarea { height:25px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var input = $(":file").css({background:"yellow", border:"3px red solid"});
    $("div").text("For this type jQuery found " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; }); // чтоб форма не отправлялась

  });
  </script>

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option<option/></select>
    <textarea></textarea>
    <button>Button</button>
  </form>
  <div>
  </div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/file/


jQuery

В разделе "Обход элементов в jQuery" содержаться следующие методы:
eq(index)
Сокращает набор выбранных элементов к одиночному элементу.

filter(expr)
Функция удаляет все элементы из набора выбранных элементов, если они не соответсвуют обозначенному выражению(ям).

filter(fn)
Удалить все элементы из набора выбранных элементов, котрые не соответсвуют определенной функции.

is(expr)
Функция проверяет текущий выбор по отношению к выражению и возвращает true, если по крайней мерее один из элементов соответсвует установленному выражению.

map(callback)
Фунцкия трансформирует набор элементов jQuery объекта в другой набор переменных jQuery массива (который содержит или не содердит элементы).

slice(start, end)
Функция осущуствляет выбор подмножества подобранных элементов.

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

andSelf()
Функция добавляет предшествующий выбранный элемент к текущему выбранному элементу.

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

end()
Функция возвращает к последней 'рузрушительной' операции, т.е. производит изменение набора соответствующих элементов к их первоначальному состоянию (состоянию до разрушительной опреации).

children(expr)
Функция предоставляет доступ к набору элементов, содержащих все нетождественные элементы ‘дети’ для каждого подходящего набора элементов.

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

find(expr)
Поиск всех элементов, которые соответсвуют заданному выражению. Данный метод полезен для поиска дополнительных потомков элементов, с которых начинается определенный процесс

next(expr)
Функция предоставляет доступ к набору элементов, содержащих уникальные, немедленно следующие элементы, обозначаемые ка 'дети одних родителей'.

nextAll(expr)
Функция предоставляет доступ ко всем элементам, обозначаемым 'как дети одних родителей', после текущего элемента.

offsetParent()
Функция возвращает jQuery коллекцию с позиции родительского элемента для первого подходящего элемента.

parent(expr)
Функция предоставляет доступ к набору элементов, содержащих уникальные родительские элементы для выбранных наборов элементов.

parents(expr)
Получить доступ ко всем элементам, содержащим уникальные элементы - 'предки' из выбранного комплекта элементов (за исключением корневого элемента). Подходящие элементы могут быть отфильтрованы по необязательному выражению.

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

prevAll(expr)
Найти все элементы, соотносящиеся с другими элементами 'как брат и сестра', предшествующие текущему элементу.

siblings(expr)
Получить набор элеменов, содержащих все уникальные элементы, соотносимые с другими элементами как 'барт и сестра', для каждого из выбранных наборов элементов. Элементы могут буть отфильтрованы по необязательному выражению

not(expr)
Функция удаляет элементы, подходящие заданному выражению из набора выбранных элементов.

hasClass
Функция проверяет текущий выбор элементов на наличие определенного класса и возвращает true, если, поменьшей мере, имеется одни элемент с искомым классом.


jQuery

Методы обхода структуры DOM:
children(expr)
Функция предоставляет доступ к набору элементов, содержащих все нетождественные элементы ‘дети’ для каждого подходящего набора элементов.

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

find(expr)
Поиск всех элементов, которые соответсвуют заданному выражению. Данный метод полезен для поиска дополнительных потомков элементов, с которых начинается определенный процесс

next(expr)
Функция предоставляет доступ к набору элементов, содержащих уникальные, немедленно следующие элементы, обозначаемые ка 'дети одних родителей'.

nextAll(expr)
Функция предоставляет доступ ко всем элементам, обозначаемым 'как дети одних родителей', после текущего элемента.

offsetParent()
Функция возвращает jQuery коллекцию с позиции родительского элемента для первого подходящего элемента.

parent(expr)
Функция предоставляет доступ к набору элементов, содержащих уникальные родительские элементы для выбранных наборов элементов.

parents(expr)
Получить доступ ко всем элементам, содержащим уникальные элементы - 'предки' из выбранного комплекта элементов (за исключением корневого элемента). Подходящие элементы могут быть отфильтрованы по необязательному выражению.

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

prevAll(expr)
Найти все элементы, соотносящиеся с другими элементами 'как брат и сестра', предшествующие текущему элементу.

siblings(expr)
Получить набор элеменов, содержащих все уникальные элементы, соотносимые с другими элементами как 'барт и сестра', для каждого из выбранных наборов элементов. Элементы могут буть отфильтрованы по необязательному выражению


jQuery children(expr)

[Функция] children(expr)
Раздел "Traversing"

Функция предоставляет доступ к набору элементов, содержащих все нетождественные элементы ‘дети’ для каждого подходящего набора элементов.
Сигнатура
children(expr) → jQuery
Параметры
children(expr)
1.2
expr: Выражение фильтрующее элементы 'дети'.
Description

Выбираемые элементы могут фильтроваться по необязательному выражению в результате чего выбираются все элементы ‘дети’ соответсвующие селектору. Примечание: в то время как метод parents() будет искать все родительские элементы, метод children() будет рассматривать ближайшие элементы "дети".

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-size:16px; font-weight:bolder; }
  div { width:130px; height:82px; margin:10px; float:left;
        border:1px solid blue; padding:4px; }
  #container { width:auto; height:105px; margin:0; float:none;
        border:none; }
  .hilite { border-color:red; }
  #results { display:block; color:red; }
  p { margin:10px; border:1px solid transparent; }
  span { color:blue; border:1px solid transparent; }
  input { width:100px; }
  em { border:1px solid transparent; }
  a { border:1px solid transparent; }
  b { border:1px solid transparent; }
  button { border:1px solid transparent; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("#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;
    });

  });
  </script>

div id="container">
    <div>
      <p>This <span>is the <em>way</em> we</span>
      write <em>the</em> demo,</p>
    </div>
    <div>
      <b>w</b>rit<b>e</b> the <span>demo,</span> <button>write
      the</button> demo,
    </div>
    <div>
      This <span>the way we <em>write</em> the <em>demo</em> so</span>
      <input type="text" value="early" /> in
    </div>
    <p>
      <span>t</span>he <span>m</span>orning.
      <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
    </p>
  </div>

</body>
</html>

Пример:

Найти все элементы "дети" в каждом из элементов div.

$(document).ready(function(){

$("p").not( $("#selected")[0] )

  });

Пример:

Найти все дочерние элементы в каждом из элементов div.

<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:16px; font-weight:bolder; }
span { color:blue; }
p { margin:5px 0; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").children().css("border-bottom", "3px double red");

  });
  </script>
<p>Hello (this is a paragraph)</p>
  <div><span>Hello Again (this span is a child of the a div)</span></div>
  <p>And <span>Again</span> (in another paragraph)</p>
  <div>And One Last <span>Time</span> (most text directly in a div)</div>

</body>
</html>

Пример:

Найти все элементы "дети" с классом "selected" для каждого элемента div.

<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:16px; font-weight:bolder; }
p { margin:5px 0; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").children(".selected").css("color", "blue");

  });
  </script>

<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
<p>And One Last Time</p>
</div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/children/


jQuery closest(selector)

[Функция] closest(selector)
Раздел "Traversing"

данный метод позволяет получить первый элемент, соответствующий селектору, поиск начинается с текущего элемента и передвигается по структуре DOM вверх.
Сигнатура
closest(selector) → jQuery
Параметры
closest(selector)
1.3
selector: строка, содержащая выражение с селектором, по которому вновь происходит поиск элемента.
closest(selector,[context])
1.4
selector: строка, содержащая выражение с селектором, по которому вновь происходит поиск элемента
context : элемент внутри которого может быть найлен элемент, указанный в пераметре selector.Если данный параметр не был указан, то будет использоваться контекст jQuery.
Description

Данная функция работает при первой проверке текущего элемента, если он подходит утсановленному выражению, в таком случае функция вернёт сам элемент. Если не подходит, фукнция будет продолжать проходить вверх по документу, от родителя к родителю, пока элемент не будет найден элемент соответсвующий обозначенному выражению. Если нет подходящих элементов будет возвращено none. Функция особенно полезна при передаче события.

Примеры:

Пример:

Поиск первого подходящего элемента, соответствующего селектору, указанному в выражении, путём передвижениея вверх по структуре DOM.

<!DOCTYPE html>
<html>
<head>
<style>
  .yetparent { width:300px; height:300px; margin: 3px; padding: 3px; background: blue; }
  .parent{ width:200px; height:200px; margin: 3px; padding: 3px; background: #EEEEEE; }
  .first {  width:100px; height:100px;background: yellow; }
  .last {  width:50px; height:50px;background: green; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$('.first').closest('.yetparent')
  .css('background-color', 'red');

  });
  </script>

<div class="yetparent">
    <div class="parent">
        <div class="first">
                <div class="last">
                </div>
        </div>
    </div>
</div>

</body>
</html>

Пример:

Поиск первого подходящего элемента соответствующего селектору, указанному в выражении, путём передвижением вверх по структуре DOM.

<!DOCTYPE html>
<html>
<head>
<style>
  .yetparent { width:300px; height:300px; margin: 3px; padding: 3px; background: blue; }
  .parent{ width:200px; height:200px; margin: 3px; padding: 3px; background: #EEEEEE; }
  .first {  width:100px; height:100px;background: yellow; }
  .last {  width:50px; height:50px;background: green; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var close = $("li:first").closest(["ul", "body"]);
$.each(close, function(i){
  $("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});

  });
  </script>

<div class="yetparent">
    <div class="parent">
        <div class="first">
                <div class="last">
                </div>
        </div>
    </div>
</div>

</body>
</html>

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/closest/


jQuery find(expr)

[Функция] find(expr)
Раздел "Traversing"

Поиск всех элементов, которые соответсвуют заданному выражению. Данный метод полезен для поиска дополнительных потомков элементов, с которых начинается определенный процесс
Сигнатура
find(expr) → jQuery
Параметры
find(expr)
1.0
expr: искомое выражение.
Description

Для поиска используйте jQuery expression Выражение может быть написано с использованием CSS 1-3 Selector синтаксиса.

Примеры:

Пример:

Метод начинает выполняться со всех параграфов и ищет потомок элемента span, данное выражение подобие выражения $("p span").

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p><span>Hello</span>, how are you?</p>
  <p>Me? I'm <span>good</span>.</p>

</body>
</html>

Пример:

Добавить элемент span вокруг каждого слова, затем сделать слова активными и выделить курсивом букву t.

<!DOCTYPE html>
<html>
<head>
<style>
  p { font-size:20px; width:200px; cursor:default;
      color:blue; font-weight:bold; margin:0 10px; }
  .hilite { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var newText = $("p").text().split(" ").join("</span> <span>");
    newText = "<span>" + newText + "</span>";

    $("p").html(newText)
          .find("span")
            .hover(function () { $(this).addClass("hilite"); },
                   function () { $(this).removeClass("hilite"); })
          .end()
          .find(":contains('t')")
            .css({"font-style":"italic", "font-weight":"bolder"});

  });
  </script>

<p>
    When the day is short
    find that which matters to you
    or stop believing
  </p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/find/


jQuery hasClass

[Функция] hasClass
Раздел "Traversing"

Функция проверяет текущий выбор элементов на наличие определенного класса и возвращает true, если, поменьшей мере, имеется одни элемент с искомым классом.
Сигнатура
hasClass → Boolean
Параметры
hasClass
1.2
class: искомый класс.
Description

Данная функция является альтернативой для ("." + class).

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div { width: 80px; height: 80px; background: #abc;
        position: relative; border: 2px solid black;
        margin: 20px 0px; float: left; left:0 }
  div.protected { border-color: red; }
  span { display:block; float:left; width:20px;
         height:20px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("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);
    });

  });
  </script>

<span></span><div class="protected"></div>
  <span></span><div></div>
  <span></span><div></div>
  <span></span><div class="protected"></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/hasClass/


jQuery nextAll(expr)

[Функция] nextAll(expr)
Раздел "Traversing"

Функция предоставляет доступ ко всем элементам, обозначаемым 'как дети одних родителей', после текущего элемента.
Сигнатура
nextAll(expr) → jQuery
Параметры
nextAll(expr)
1.2
expr: выражение фильтрующее следующие элементы.
Description

Используйте необязателное выражение для фильтрования соответствующего набора.

Примеры:

Пример:

Указать местоположение всех элементов div, следующих после первого элемента div и установить класс для каждого из них.

<!DOCTYPE html>
<html>
<head>
<style>
div { width: 80px; height: 80px; background: #abc;
        border: 2px solid black; margin: 10px; float: left; }
  div.after { border-color: red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div>first</div>
<div>sibling<div>child</div></div>
<div>sibling</div>
<div>sibling</div>

</body>
</html>

Пример:

Указат все параграфы следующие за 2 элементом "ребёнком" и установить для них класс.

<!DOCTYPE html>
<html>
<head>
<style>
div, p { width: 60px; height: 60px; background: #abc;
           border: 2px solid black; margin: 10px; float: left; }
.after { border-color: red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$(":nth-child(1)").nextAll("p").addClass("after");

  });
  </script>

<p>p</p>
  <div>div</div>
  <p>p</p>
  <p>p</p>
  <div>div</div>
  <p>p</p>
  <div>div</div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/nextAll/


jQuery next(expr)

[Функция] next(expr)
Раздел "Traversing"

Функция предоставляет доступ к набору элементов, содержащих уникальные, немедленно следующие элементы, обозначаемые ка 'дети одних родителей'.
Сигнатура
next(expr) → jQuery
Параметры
next(expr)
1.0
expr: выражение фильтрующее возвращённый результат.
Description

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

Примеры:

Пример:

Выбрать немедленно следующий элемент, обозначаемый как "дети одних родителей" каждой отключенной кнопки и изменить в нём текст на следующий "this button is disabled".

<!DOCTYPE html>
<html>
<head>
<style>
span { color:blue; font-weight:bold; }
button { width:100px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div><button disabled="disabled">First</button> - <span></span></div>
<div><button>Second</button> - <span></span></div>
<div><button disabled="disabled">Third</button> - <span></span></div>

</body>
</html>

Пример:

Найти немедленно следующий дочерний элемент обозначаемый как "дети одних родителей" каждого параграфа, который имеет класс "selected".

<!DOCTYPE html>
<html>
<head>
<style>
  p { font-size:20px; width:200px; cursor:default;
      color:blue; font-weight:bold; margin:0 10px; }
  .hilite { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").next(".selected").css("background", "yellow");

  });
  </script>

<p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/next/


jQuery offsetParent()

[Функция] offsetParent()
Раздел "Traversing"

Функция возвращает jQuery коллекцию с позиции родительского элемента для первого подходящего элемента.
Сигнатура
offsetParent() → jQuery
Параметры
Description

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

Примеры:
Метод добавлен в jQuery 1.26
Официальная страница метода - http://api.jquery.com/offsetParent/


jQuery parent(expr)

[Функция] parent(expr)
Раздел "Traversing"

Функция предоставляет доступ к набору элементов, содержащих уникальные родительские элементы для выбранных наборов элементов.
Сигнатура
parent(expr) → jQuery
Параметры
parent(expr)
1.0
expr: выражение фильтрующее родительские элементы.
Description

Вы можете использовать необязательное выражения для фильтрации родительских элементов. Если нет родительских элементов возвращается jQuery объект со значением 0.

Примеры:

Пример:

Указать родительские элементы каждого элемента (parent > child).

<!DOCTYPE html>
<html>
<head>
<style>
  div,p { margin:10px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div>div,
    <span>span, </span>
    <b>b </b>
  </div>
  <p>p,
    <span>span,
      <em>em </em>
    </span>
  </p>
  <div>div,
    <strong>strong,
      <span>span, </span>
      <em>em,
        <b>b, </b>
      </em>
    </strong>
    <b>b </b>
  </div>

</body>
</html>

Пример:

Найти родителские элементы с классом "selected" для каждого параграфа.

<!DOCTYPE html>
<html>
<head>
<style>
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").parent(".selected").css("background", "yellow");

  });
  </script>

<p>p</p>
  <div>div</div>
  <p>p</p>
  <p>p</p>
  <div>div</div>
  <p>p</p>
  <div>div</div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/parent/


jQuery parents(expr)

[Функция] parents(expr)
Раздел "Traversing"

Функция предоставляет доступ к набору элементов, содержащих уникальных предшествующих элементов, обзначаемых как 'дети одних родителей', для каждого выбранного набора элементов.
Сигнатура
parents(expr) → jQuery
Параметры
parents(expr)
1.0
expr: выражение фильтрующее предшествующие элементы.
Description

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

Примеры:

Пример:

Найти немедленно предшествующий элемент, соответсвующий понятию "брат и сестра", для каждого элемента div.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:40px; height:40px; margin:10px;
        float:left; border:2px blue solid;
        padding:2px; }
  span { font-size:14px; }
  p { clear:left; margin:10px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div></div>
  <div></div>
  <div><span>здесь есть дочерний элемент</span></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="start"></div>
  <div></div>
  <p><button>К предыдущему родительскому элементу</button></p>

</body>
</html>

Пример:

Найти немедленно предшествующий элемент с классом "selected", соотносящийся с другими элементами как "брат и сестра", для каждого параграфа.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").prev(".selected").css("background", "yellow");

  });
  </script>

<div><span>Hello</span></div>
  <p class="selected">Hello Again</p>
  <p>And Again</p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/prev/


jQuery prevAll(expr)

[Функция] prevAll(expr)
Раздел "Traversing"

Найти все элементы, соотносящиеся с другими элементами 'как брат и сестра', предшествующие текущему элементу.
Сигнатура
prevAll(expr) → jQuery
Параметры
prevAll(expr)
1.2
expr: выражение фильтрующее предшествующие элементы, соотносящиеся с другими элементами 'как брат и сестра'.
Description

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

Примеры:

Пример:

Определить все элементы div перед последним div и установить для них css свойтсво.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:70px; height:70px; background:#abc;
        border:2px solid black; margin:10px; float:left; }
  div.before { border-color: red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div></div>
  <div></div>
  <div></div>
  <div></div>

</body>
</html>

Пример:

Найти немедленно следующий предшествующий элемент потомок каждого параграфа с классом "selected".

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").prev(".selected").css("background", "yellow");

  });
  </script>

<div><span>Hello</span></div>
  <p class="selected">Hello Again</p>
  <p>And Again</p>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/prevAll/


jQuery siblings(expr)

[Функция] siblings(expr)
Раздел "Traversing"

Получить набор элеменов, содержащих все уникальные элементы, соотносимые с другими элементами как 'барт и сестра', для каждого из выбранных наборов элементов. Элементы могут буть отфильтрованы по необязательному выражению
Сигнатура
siblings(expr) → jQuery
Параметры
siblings(expr)
1.2
expr: выражение фильтрующее элементы, соотносящиеся с другими элементами как "брат и сестра".
Примеры:

Пример:

Найти все уникальные элементы, соотносимые с другими элементами как "брат и сестра", для элемента li с классом hilite, в 3 списках (включающих другие li элементы с классом hilite, если соответсвующие имеются).

<!DOCTYPE html>
<html>
<head>
<style>
  ul { float:left; margin:5px; font-size:16px; font-weight:bold; }
  p { color:blue; margin:10px 20px; font-size:16px; padding:5px;
      font-weight:bolder; }
  .hilite { background:yellow; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<ul>
    <li>One</li>
    <li>Two</li>
    <li class="hilite">Three</li>
    <li>Four</li>
  </ul>
  <ul>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
  </ul>
  <ul>
    <li>Eight</li>
    <li class="hilite">Nine</li>
    <li>Ten</li>
    <li class="hilite">Eleven</li>
  </ul>
  <p>Unique siblings: <b></b></p>

</body>
</html>

Пример:

Найти все элементы с классом "selected", соотносимые с другими элементами как "брат и сестра", для каждого div элемента.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").siblings(".selected").css("background", "yellow");

  });
  </script>

<div><span>Hello</span></div>
  <p class="selected">Hello Again</p>
  <p>And Again</p>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/siblings/


jQuery add(expr)

[Функция] add(expr)
Раздел "Traversing"

Функция добавляет дополнительные элементы, соответсвующие заданному выражению, к набору выбранных элементов.
Сигнатура
add(expr) → jQuery
Параметры
add(expr)
1.2
expr: cоответсвующее выражение, с помощью которго происходит добавление элемента, либо строка HTML кода, добавляемая к DOMElement, либо одни или множество элементов, присоединямых к массиву.
add(selector,context)
1.4
selector: выражение, по котрому происходит поиск элементов
context: корневой элемент внутри которого будет осущетсвляться поиск элементов, указанных в параметре selector
Description

Метод позволяет создать новый jQuery объект, содержащий предыдущие элементы и вновь приоединяемый с помощью данного метода новый элемент. В качвестве первого параметра данного метода могут содержаться элементы структуры DOM или текст HTML.

Примеры:

Пример:

Найти все элементы div и установить css свойстов border. Затем добавить все параграфы к jQuery объекту и установить для них css свойство background.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:10px; float:left; }
  p { clear:left; font-weight:bold; font-size:16px;
      color:blue; margin:0 10px; padding:2px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Added this... (notice no border)</p>

</body>
</html>

Пример:

Добавить элементы, соответсвующие установленному выражению, к комплекту выбранных элементов.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").add("span").css("background", "yellow");

  });
  </script>

<p>Hello</p><span>Hello Again</span>

</body>
</html>

Пример:

Добавить элементы, созданные на лету, к комплекту выбранных элементов.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").clone().add("<span>Again</span>").appendTo(document.body);

  });
  </script>

<p>Hello</p>

</body>
</html>

Пример:

Добавить один или несколько элементов к комплекту выбранных элементов.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").add(document.getElementById("a")).css("background", "yellow");

  });
  </script>

<p>Hello</p><span id="a">Hello Again</span>

</body>
</html>

Пример:

Демонстрация как добавить (или поместить) элементы в существующую коллекцию.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var collection = $("p");
// захват коллекции
collection = collection.add(document.getElementById("a"));
collection.css("background", "yellow");

  });
  </script>

<p>Hello</p><span id="a">Hello Again</span>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/add/


jQuery andSelf()

[Функция] andSelf()
Раздел "Traversing"

Функция добавляет предшествующий выбранный элемент к текущему выбранному элементу.
Сигнатура
andSelf() → jQuery
Параметры
Description

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

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
  p, div { margin:5px; padding:5px; }
  .border { border: 2px solid red; }
  .background { background:yellow; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/andSelf/


jQuery contents()

[Функция] contents()
Раздел "Traversing"

Выбрать все примечания, являющиеся элементами 'детьми' внутрии выбранных элементов (включающие текстовые узлы), или содержание документа, если элемент является элементом iframe.
Сигнатура
contents() → jQuery
Параметры
Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>Hello John, how are you doing?</p>

</body>
</html>

Пример:

Добавить новое содержание в пустой iframe.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("iframe").contents().find("body").append("I'm in an iframe!");

  });
  </script>

<iframe src="/index-blank.html" width="300" height="100"></iframe></before>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/contents/


jQuery end()

[Функция] end()
Раздел "Traversing"

Функция возвращает к последней 'рузрушительной' операции, т.е. производит изменение набора соответствующих элементов к их первоначальному состоянию (состоянию до разрушительной опреации).
Сигнатура
end() → jQuery
Параметры
end()
1.2
expr: выражение по котрому происходит фильтрация.
Description

Если не было разрушительных операций, функция возвращает пустое множество. 'Разрушительная' операция это любая операция, которая изменяет набор соответствующих jQuery элементов, с использованием любой Traversing функции, которая возвращает jQuery объект, - например:

add, andSelf, children, filter, find, map, next, nextAll, not, parent, parents, prev, prevAll, siblings и slice - плюс clone function (from Manipulation).

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
  p, div { margin:1px; padding:1px; font-weight:bold;
           font-size:16px; }
  div { color:blue; }
  b { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    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");

  });
  </script>

<p>
    Привет здесь есть span<span>как</span> ты <span>поживаешь</span>?
  </p>
  <p>
    Этот <span>span</span>один из несокльких <span>span</span> в этом
    <span>предложении</span>.
  </p>
  <div>
    Тэги в jQuery объекте изначально: <b></b>
  </div>
  <div>
    Тэги в jQuery объекте перед найденным: <b></b>
  </div>
  <div>
    Тэги в jQuery объекте после найденного: <b></b>
  </div>

</body>
</html>

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
p { margin:10px; padding:10px; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").find("span").end().css("border", "2px red solid");

  });
  </script>

<p><span>Hello</span>, how are you?</p>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/end/


jQuery

jQuery Slyweb.ru
Фильтрация:
eq(index)
Сокращает набор выбранных элементов к одиночному элементу.

filter(expr)
Функция удаляет все элементы из набора выбранных элементов, если они не соответсвуют обозначенному выражению(ям).

filter(fn)
Удалить все элементы из набора выбранных элементов, котрые не соответсвуют определенной функции.

is(expr)
Функция проверяет текущий выбор по отношению к выражению и возвращает true, если по крайней мерее один из элементов соответсвует установленному выражению.

map(callback)
Фунцкия трансформирует набор элементов jQuery объекта в другой набор переменных jQuery массива (который содержит или не содердит элементы).

slice(start, end)
Функция осущуствляет выбор подмножества подобранных элементов.


jQuery eq(index)

[Функция] eq(index)
Раздел "Traversing"

Сокращает набор выбранных элементов к одиночному элементу.
Сигнатура
eq(index) → jQuery
Параметры
eq(index)
1.1.2
index: индекс элемента в jQuery объекте.
Description

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

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:10px; float:left;
        border:2px solid blue; }
  .blue { background:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</body>
</html>

Метод добавлен в jQuery 1.1.2
Официальная страница метода - http://api.jquery.com/eq/


jQuery filter(expr)

[Функция] filter(expr)
Раздел "Traversing"

Функция удаляет все элементы из набора выбранных элементов, если они не соответсвуют обозначенному выражению(ям).
Сигнатура
filter(expr) → Boolean
Параметры
filter(expr)
1.2
expr: выражение являющееся фильтром.
Description

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

Примеры:

Пример:

Изменить цвет всех элементов div, затем установить рамку вокруг элементов div с классом middle.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:5px; float:left;
        border:2px white solid;}
  </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div></div>

</body>
</html>

Пример:

Выбрать все параграфы и удалить те, которые не имеют класса "selected".

$(document).ready(function(){

$("p").filter(".selected")

  });

Пример:

Выбрать все элементы div за исключением тех, которые не содержат класса "selected" или не явялются первыми из всех элементов.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:10px; float:left;
        border:2px solid blue; }
  .blue { background:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").filter(".selected,:first").addClass("blue");

  });
  </script>

<div class="selected"></div>
  <div class="selected"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/filter/


jQuery filter(fn)

[Функция] filter(fn)
Раздел "Traversing"

Удалить все элементы из набора выбранных элементов, котрые не соответсвуют определенной функции.
Сигнатура
filter(fn) → Boolean
Параметры
filter(fn)
1.2
fn: функция переходящая в фильтр. function callback(indexInJQueryObject) { var keepItBoolean = true; this; // dom element return keepItBoolean; }
Description

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

Примеры:

Пример:

Изменить цвет всех элементов div, затем установить рамку для элементов div индекс которых соответсвует 1 или id является fourth.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:5px; float:left;
        border:3px white solid; }
  </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
  <div id="fourth"></div>
  <div id="fifth"></div>
  <div id="sixth"></div>

</body>
</html>

Пример:

Удалить элементы, которые имеют в качетсве потомка ol элемент.

$(document).ready(function(){

$("p").filter(function(index) {
   return $("ol", this).length == 0;
 });

  });

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/filter/


jQuery is(expr)

[Функция] is(expr)
Раздел "Traversing"

Функция проверяет текущий выбор по отношению к выражению и возвращает true, если по крайней мерее один из элементов соответсвует установленному выражению.
Сигнатура
is(expr) → Boolean
Параметры
is(expr)
1.0
fn: функция с которой происходит фильтрация. function callback(indexInJQueryObject) { var keepItBoolean = true; this; // dom element return keepItBoolean; }
Description

Если нет подходящих элементов, или выражение является неправильным, будет возвращено 'false'. Примечание: jQuery 1.3 поддерживает любые выражения. Предшествующие сложные выражения, содержащие селекторы иерархии (вроде +, ~, и >), всегда возвращают 'true'. Методы filter используются в данной функции внутренне, поэтому все правила которые используются в filter используются здесь в равной мере.

Примеры:

Пример:

Способы применения функции is(), которые могут быть использованы внутри обработчика.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:5px; float:left;
        border:4px outset; background:green; text-align:center;
        font-weight:bolder; cursor:pointer; }
  .blue { background:blue; }
  .red { background:red; }
  span { color:white; font-size:16px; }
  p { color:red; font-weight:bolder; background:yellow;
      margin:3px; clear:left; display:none; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("div").one('click', function () {
      if ($(this).is(":first-child")) {
        $("p").text("It's the first div.");
      } else if ($(this).is(".blue,.red")) {
        $("p").text("It's a blue or red div.");
      } else if ($(this).is(":contains('Peter')")) {
        $("p").text("It's Peter!");
      } else {
        $("p").html("It's nothing <em>;special</em>.");
      }
      $("p").hide().slideDown("slow");
      $(this).css({"border-style": "inset", cursor:"default"});
    });

  });
  </script>

<div></div>
  <div class="blue"></div>
  <div></div>
  <div class="red"></div>
  <div><br/><span>Peter</span></div>
  <div class="blue"></div>
  <p></p>

</body>
</html>

Пример:

Возвращает true, так как родитель поля input является формой. <form><input type="checkbox" /></form> <div></div>

$(document).ready(function(){

    var isFormParent = $("input[type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);    $("div").text("isFormParent = " + isFormParent);

  });

Пример:

Возвращает false, так как родитель поля input не является формой. <form><input type="checkbox" /></form> <div></div>

$(document).ready(function(){

       var isFormParent = $("input[type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);    $("div").text("isFormParent = " + isFormParent);

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/is/


jQuery map(callback)

[Функция] map(callback)
Раздел "Traversing"

Фунцкия трансформирует набор элементов jQuery объекта в другой набор переменных jQuery массива (который содержит или не содердит элементы).
Сигнатура
map(callback) → jQuery
Параметры
map(callback)
1.2
callback:  функция применяется для любого элемента.
function callback(index, domElement) {
  var replacement;

  this; // also dom element

  // replacement == null : delete spot
  // replacement == array : insert the elements of the array
  // else replace the spot with replacement
  return replacement;
}
Description

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

Примеры:

Пример:

Создать список всех переменных, находящихся внутри формы.

<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

  <form>
    <input type="text" name="name" value="John"/>
    <input type="text" name="password" value="password"/>
    <input type="text" name="url" value="http://ejohn.org/"/>
  </form>

</body>
</html>

Пример:

Пример показывает функциональность. <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> </ul> <ul id="results"> </ul>

$(document).ready(function(){

       var mappedItems = $("li").map(function (index) {
      var replacement = $("<li>").text($(this).text()).get(0);
      if (index == 0) {
        // make the first item all caps
        $(replacement).text($(replacement).text().toUpperCase());
      } else if (index == 1 || index == 3) {
        // delete the second and fourth items
        replacement = null;
      } else if (index == 2) {
        // make two of the third item and add some text
        replacement = [replacement,$("<li>").get(0)];
        $(replacement[0]).append("<b> - A</b>");
        $(replacement[1]).append("Extra <b> - B</b>");
      }

      // replacment will be an dom element, null,
      // or an array of dom elements
      return replacement;
    });
    $("#results").append(mappedItems);

  });

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/map/


jQuery not(expr)

[Функция] not(expr)
Раздел "Traversing"

Функция удаляет элементы, подходящие заданному выражению из набора выбранных элементов.
Сигнатура
not(expr) → jQuery
Параметры
not(expr)
1.2
expr: Выражение в соответсвие с которым удаляются выбранные элементы, элемент для удаления из набора элементов или набор элементов для удаления из jQuery набора выбранных элементов.
Примеры:

Пример:

Добавить границу к элементам div, класс которых не являются green и id не bluone.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:10px; float:left;
        background:yellow; border:2px solid white; }
  .green { background:#8f8; }
  .gray { background:#ccc; }
  #blueone { background:#99f; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div></div>
  <div id="blueone"></div>
  <div></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="gray"></div>
  <div></div>

</body>
</html>

Пример:

Удалиь элемент с ID "selected" из набора всех параграфов.

$(document).ready(function(){

$("p").not( $("#selected")[0] )

  });

Пример:

Удалиь элемент с ID "selected" из набора всех параграфов.

$(document).ready(function(){

$("p").not("#selected")

  });

Пример:

Удалить все элементы котрые соответсвуют выражению "div p.selected" из всего набора параграфов.

$(document).ready(function(){

$("p").not($("div p.selected"))

  });

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/not/


jQuery slice(start, end)

[Функция] slice(start, end)
Раздел "Traversing"

Функция осущуствляет выбор подмножества подобранных элементов.
Сигнатура
slice(start, end) → jQuery
Параметры
slice(start, end)
1.1.4
start: начало «среза» в виде целое числа указывает на начало подмножества элементов. Первый элемент находится на нулевой позиции. Значение может быть отрицательно при выборке с окончания элементов.
end: окончание «среза» в виде целого числа указывает на окончание подмножества (последний элемент не включается в подмножество). Если не определено, то завершается в окончании набора.
Description

Функция исполняется подобно встроенному массиву с помощью метода «среза».

Примеры:

Пример:

Создание случайного «среза» элементов div.

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:40px; height:40px; margin:10px; float:left;
        border:2px solid blue; }
  span { color:red; font-weight:bold; }
  button { margin:5px; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    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);

  });
  </script>

<button>Turn slice yellow</button>
  <span>Click the button!</span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</body>
</html>

Пример:

Выбор всех элементов div, затем сделать «срез», чтобы использовать только первый div элемент.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").slice(0, 1).wrapInner("<b></b>");

  });
  </script>

<div>test</div>
<div>test</div>
<div>test</div>

</body>
</html>

Пример:

Выбор всех элементов div, затем сделать «срез», чтобы использовать только элементы div с 1 по 2 .

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").slice(0, 2).wrapInner("<b></b>");

  });
  </script>

<div>test</div>
<div>test</div>
<div>test</div>

</body>
</html>

Пример:

Выбор всех элементов div, затем сделать «срез», чтобы использовать только 2 div элемент.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").slice(1, 2).wrapInner("<b></b>");

  });
  </script>

<div>test</div>
<div>test</div>
<div>test</div>

</body>
</html>

Пример:

Выбор всех элементов div, затем сделать «срез», чтобы использовать только 2 и 3 div элементы.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("div").slice(1).wrapInner("<b></b>");

  });
  </script>

<div>test</div>
<div>test</div>
<div>test</div>

</body>
</html>

Пример:

Выбор всех элементов div, затем сделать «срез», чтобы использовать только 3 div элемент.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<div>test</div>
<div>test</div>
<div>test</div>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/slice/


jQuery

В разделе "Утилиты в jQuery" содержаться следующие методы:
jQuery.contains(container, contained)
проверка наличия узла DOM внутри другого элемента структуры DOM.

jQuery.extend(object)
Функция предназначена для расширения jQuery объекта.

jQuery.extend(deep, target, object1, objectN)
Расширить объект одним или несколькими объектами, возвращая исходный, модифицированный объект.

jQuery.fn.extend(object)
Функция позволяет расширить jQuery элемент, что обеспечивает создание новых методов (используется для создания jQuery плагинов).

jQuery.globalEval(code)
Глобальное выполнение javascript кода.

jQuery.grep(array, callback, invert)
Функция производит фильтрацию элементов массива с использованием функции - фильтра.

jQuery.inArray(value, array)
Функция определеяет индекс первого параметра в массиве (-1 если нет такой переменной).

jQuery.isArray(obj)
Функция добавлена в jQuery 1.3 и определяет, является ли параметр массивом.

jQuery.isEmptyObject(object)
Проверка объекта на наличие свойств.

jQuery.isFunction()
Проверка объекта - является ли он объектом функцией.

jQuery.isPlainObject(object)
Проверка параметра является ли он явным объектом (то есть созданным с использование фигурных скобок или с помощью new Object).

jQuery.isXMLDoc()
Возвращает true, если узел DOM находится внутри документа XML или сам является документом XML.

jQuery.makeArray(obj)
Функция помещает что-нибудь в массив.

jQuery.map(array, callback)
Функция переводит все элементы одного массива в элементы другого массива.

jQuery.merge(first, second)
Функция объединяет два массива вместе.

jQuery.noop
метод является пустой функцией.

jQuery.trim(str)
Функция удаления пробелов из начала и конца строки.

jQuery.unique(array)
Функция удаляет все повторяющиеся элементы массива элементов. Учтите функция работает только с массивом DOM элементов, не со строкой или числами.


jQuery jQuery.contains(container, contained)

[Функция] jQuery.contains(container, contained)
Раздел "Utilities"

Проверка наличия узла DOM внутри другого элемента структуры DOM.
Сигнатура
jQuery.contains(container, contained) → Boolean
Параметры
jQuery.contains(container, contained)
1.4
container: элемент структуры DOM, который может содержать другой элемент.
contained: узел структуры DOM, который может содержаться в другом элементе.
Description

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

Примеры:

Пример:

Проверка наличия элемента внутри другого элемента. В случае успешности метод вернет true.

$(document).ready(function(){

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

  });

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/jQuery.contains/


jQuery jQuery.extend(deep, target, object1, objectN)

[Функция] jQuery.extend(deep, target, object1, objectN)
Раздел "Utilities"

Расширить объект одним или несколькими объектами, возвращая исходный, но модифицированный объект.
Сигнатура
jQuery.extend(deep, target, object1, objectN) → Object
Параметры
jQuery.extend(deep, target, object1, objectN)
1.0
deep: если указано, соединение становиться рекурсивным (т.е. происходит расширенное копирование).
target: расширяемый объект.
object1: объект который будет объединён с первым объектом.
objectN: дополнительные объекты объединяемые с первым объектом.
Description

Если нет заданного объекта, JQuery расширение происходит согласно пространству имён. Функция полезна для разработки авторских плагинов с добавлением нового метода в JQuery. Если логическое true указано в качестве первого параметра, JQuery делает расширенную копию, рекурсивно копируя любые найденные объекты. Иначе происходит копирование части структуры исходного(ых) объекта(ов). Неопределенные данные не копируются. Однако, данные унаследованные от объекта(ов) прототипов будут скопированы сверху.

Примеры:

Пример:

Объединить settings и options, изменяя settings.

$(document).ready(function(){

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

  });

Пример:

Объединить defaults и options, без изменения первых.

$(document).ready(function(){

var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.extend/


jQuery jQuery.extend(object)

[Function] jQuery.extend(object)
Раздел "Utilities"

Функция предназначена для расширения jQuery объекта.
Сигнатура
jQuery.extend(object) → jQuery
Параметры
jQuery.extend(object)
1.0
object: объект, который будет объединён с jQuery объектом.
Description

Функция может быть использована для добавления функций к пространству имён jQuery. Изучите jQuery.fn.extend для получения дополнительной информации об использовании данного метода, при добавлении плагинов Plugins.

Примеры:

Пример:

Добавить две функции к пространству имён jQuery.

$(document).ready(function(){

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.extend/


jQuery jQuery.fn.extend(object)

[Function] jQuery.fn.extend(object)
Раздел "Utilities"

Функция позволяет расширить jQuery элемент, что обеспечивает создание новых методов (используется для создания jQuery плагинов).
Сигнатура
jQuery.fn.extend(object) → jQuery
Параметры
jQuery.fn.extend(object)
1.0
object: объект, который будет объединён с jQuery объектом.
Description

Функция может быть использована для добавления функций, plugin methods (plugins) используемых в качестве плагинов.

Примеры:

Пример:

В примере добавлены два новых метода.

$(document).ready(function(){

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.fn.extend/


jQuery jQuery.globalEval(code)

[Функция] jQuery.globalEval(code)
Раздел "Utilities"

Глобальное выполнение javascript кода.
Сигнатура
jQuery.globalEval(code) → Boolean
Параметры
Description

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

Примеры:

Пример:

Выполнение скрипта в глобальном контексте.

$(document).ready(function(){

function test(){
    jQuery.globalEval("var newVar = true;")
}
test();

  });

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/jQuery.globalEval/


jQuery jQuery.grep(array, callback, invert)

[Функция] jQuery.grep(array, callback, invert)
Раздел "Utilities"

Функция производит фильтрацию элементов массива с использованием функции - фильтра.
Сигнатура
jQuery.grep(array, callback, invert) → Array
Параметры
jQuery.grep(array, callback, invert)
1.0
array: массив выбранных элементов.
callback: функция, обрабатывающая каждый элемент. Первый аргумент функции это список элементов, второй аргумент – список индексов. Функция должна вернуть логическую переменную. Функция "lambda-form" была удалена в jQuery 1.2.3 для обеспечения совместимости с другими фреймовиками. function callback(elementOfArray, indexInArray) { var shouldKeepIt; this; // == window return shouldKeepIt; }
invert: если параметр "invert" указан как false, либо вообще не указан, функция вернет массив состоящий из всех элементов для которых функция "callback" вернула true. Если "invert" указана как true, функция вернёт массив состоящий из всех элементов для которых функция "callback" вернула false.
Description

Фильтрующей функции будут переданы два аргумента: текущий массив элементов и их индекс. Функция фильтрации должна вернуть 'true' при сохранении элементов в массиве.

Примеры:

Пример:

Фильтрация исходного массива чисел, оставляющая числа не равные 5 и индекс которых больше чем 3. Затем все числа равные 9 удаляются.

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; }
  p { color:green; margin:0; }
  span { color:red; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
    $("div").text(arr.join(", "));

    arr = jQuery.grep(arr, function(n, i){
      return (n != 5 && i > 4);
    });
    $("p").text(arr.join(", "));

    arr = jQuery.grep(arr, function (a) { return a != 9; });
    $("span").text(arr.join(", "));

  });
  </script>

<div></div>
<p></p>
<span></span>

</body>
</html>

Пример:

Функция фильтрует массив чисел, и возвращает числа, которые больше чем 0.

$(document).ready(function(){

$.grep( [0,1,2], function(n,i){
   return n > 0;
 });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.grep/


jQuery jQuery.inArray(value, array)

[Функция] jQuery.inArray(value, array)
Раздел "Utilities"

Функция определеяет индекс первого параметра в массиве (-1 если нет такой переменной).
Сигнатура
jQuery.inArray(value, array) → Number
Параметры
jQuery.inArray(value, array)
1.2
value: искомая переменная, если она существует в массиве.
array: массив в котором осуществляется поиск переменной.
Примеры:

Пример:

Функция ищет значения переменных массива в тексте элементов div.

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; }
  span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var arr = [ 4, "Pete", 8, "John" ];

    $("span:eq(0)").text(jQuery.inArray("John", arr));
    $("span:eq(1)").text(jQuery.inArray(4, arr));
    $("span:eq(2)").text(jQuery.inArray("David", arr));

  });
  </script>

<div>"John" found at <span></span></div>
  <div>4 found at <span></span></div>
  <div>"David" found at <span></span></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/jQuery.inArray/


jQuery jQuery.isArray(obj)

[Функция] jQuery.isArray(obj)
Раздел "Utilities"

Функция добавлена в jQuery 1.3 и определяет, является ли параметр массивом.
Сигнатура
jQuery.isArray(obj) → boolean
Параметры
jQuery.isArray(obj)
1.3
obj: Объект, определямый является или нет он массивом.
Примеры:

Пример:

Указать, если параметр представляет массив.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("b").append( "" + $.isArray([]) );

  });
  </script>

Is [] an Array? <b></b>

</body>
</html>

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/jQuery.isArray/


jQuery jQuery.isEmptyObject(object)

[Функция] jQuery.isEmptyObject(object)
Раздел "Utilities"

Проверка объекта на наличие свойств.
Сигнатура
jQuery.isEmptyObject(object) → Boolean
Параметры
jQuery.isEmptyObject(object)
1.4
object: объект для проверки на отсутствие свойств.
Description

Начиная с jQuery 1.4 данный метод проверяет не только свойства внутри самого объекта но и свойства унаследованные от прототипа.

Примеры:

Пример:

Проверка наличия элемента внутри другого элемента.

$(document).ready(function(){

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

  });

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/jQuery.isEmptyObject/


jQuery jQuery.isFunction()

[Функция] jQuery.isFunction()
Раздел "Utilities"

Проверка объекта - является ли он объектом функцией.
Сигнатура
jQuery.isFunction() → Boolean
Параметры
jQuery.isFunction()
1.0.4
object: объект для проверки на отсутствие свойств.
Примеры:

Пример:

Проверка элементов объекта на предмет являются ли они функциями?

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    function stub() {
    }
    var objs = [
          function () {},
          { x:15, y:20 },
          null,
          stub,
          "function"
        ];

    jQuery.each(objs, function (i) {
      var isFunc = jQuery.isFunction(objs[i]);
      $("span").eq(i).text(isFunc);
    });

  });
  </script>

  <div>jQuery.isFunction(objs[0]) = <span></span></div>

  <div>jQuery.isFunction(objs[1]) = <span></span></div>
  <div>jQuery.isFunction(objs[2]) = <span></span></div>
  <div>jQuery.isFunction(objs[3]) = <span></span></div>

  <div>jQuery.isFunction(objs[4]) = <span></span></div>

</body>
</html>

Пример:

Возвращает true, если параметр является функцией.

$(document).ready(function(){

$.isFunction(function(){});

  });

Метод добавлен в jQuery 1.0.4
Официальная страница метода - http://api.jquery.com/jQuery.isFunction/


jQuery jQuery.isPlainObject(object)

[Функция] jQuery.isPlainObject(object)
Раздел "Utilities"

Проверка параметра является ли он явным объектом (то есть созданным с использование фигурных скобок или с помощью new Object).
Сигнатура
jQuery.isPlainObject(object) → Boolean
Параметры
jQuery.isPlainObject(object)
1.4
object: объект, который будет проверен.
Примеры:

Пример:

Проверка элементов объекта на предмет являются ли они функциями?

$(document).ready(function(){

jQuery.isPlainObject({}) // true
jQuery.isPlainObject("test") // false

  });

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/jQuery.isPlainObject/


jQuery jQuery.isXMLDoc()

[Функция] jQuery.isXMLDoc()
Раздел "Utilities"

Возвращает true, если узел DOM находится внутри документа XML или сам является документом XML.
Сигнатура
jQuery.isXMLDoc() → Boolean
Параметры
jQuery.isXMLDoc()
1.4
node: узел DOM, который проверяется для определения является ли он XML документом.
Примеры:

Пример:

Проверка элементов объекта на предмет являются ли он XML документом?

$(document).ready(function(){

jQuery.isXMLDoc(document) // false
jQuery.isXMLDoc(document.body) // false

  });

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/jQuery.isXMLDoc/


jQuery jQuery.makeArray(obj)

[Функция] jQuery.makeArray(obj)
Раздел "Utilities"

Функция помещает что-нибудь в массив.
Сигнатура
jQuery.makeArray(obj) → Array
Параметры
jQuery.makeArray(obj)
1.2
obj: все-что угодно, помещаемое в существующий массив.
Description

Обычно нет надобности в использовании данной функции, при использовании jQuery эта функция внедрена внутрь.

Примеры:

Пример:

Поместить набор HTMLElements элементов в массив.

<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // перевернуть список dom элементов
$(arr).appendTo(document.body);

  });
  </script>

<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/jQuery.makeArray/


jQuery jQuery.map(array, callback)

[Функция] jQuery.map(array, callback)
Раздел "Utilities"

Функция переводит все элементы одного массива в элементы другого массива.
Сигнатура
jQuery.map(array, callback) → Array
Параметры
jQuery.map(array, callback)
1.0
array: транслируемый массив.
callback: функция исполняемая для каждого элемента. Аргумент функции представляет список элементов. Функция может вернуть любую переменную. Функция "lambda-form" больше не работает. Функция была удалена в версии 1.2.3 для увеличения совместимости с Adobe AIR. function callback(indexInArray, elementOfArray) { var replacementValue; this; // unmapped return replacementValue; }
Description

Транслирующая функция, которая обеспечивает данный метод вызывается для каждого элемента в массиве и передаёт два аргумента: индекс массива, и элементы, подлежащие трансляции. Функция затем может вернуть транслируемую переменную, 'null' (удалить элемент), или массив переменных - которые распределяются по всему массиву. Функция может так же полностью повторятся через объект.

Примеры:

Пример:

Пара примеров использования функции map()

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var arr = [ "a", "b", "c", "d", "e" ]
    $("div").text(arr.join(", "));

    arr = jQuery.map(arr, function(n, i){
      return (n.toUpperCase() + i);
    });
    $("p").text(arr.join(", "));

    arr = jQuery.map(arr, function (a) { return a + a; });
    $("span").text(arr.join(", "));

  });
  </script>

<div></div>
  <p></p>
  <span></span>

</body>
</html>

Пример:

Отобразить исходный массив в новом массиве и добавить 4 к каждому значению массива.

$(document).ready(function(){

$.map( [0,1,2], function(n){
   return n + 4;
 });

  });

Пример:

Отобразить исходный массив в новом массиве и добавить 1 к каждому значению массива, если значение массива больше чем ноль, остальные значения удалить.

$(document).ready(function(){

$.map( [0,1,2], function(n){
   return n > 0 ? n + 1 : null;
 });

  });

Пример:

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

$(document).ready(function(){

$.map( [0,1,2], function(n){
   return [ n, n + 1 ];
 });

  });

Пример:

Отобразить исходный массив в новом массиве, каждый элемент возвести в квадрат.

$(document).ready(function(){

$.map( [0,1,2,3], function (a) { return a * a; } );

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.map/


jQuery jQuery.merge(first, second)

[Функция] jQuery.merge(first, second)
Раздел "Utilities"

Функция объединяет два массива вместе.
Сигнатура
jQuery.merge(first, second) → Array
Параметры
jQuery.merge(first, second)
1.0
first: первый массив, для объединения со вторым.
second: второй массив объединяемый с первым, данный массив не изменятеся.
Description

Результатом является изменение первого аргумента функции, в результате чего к первому массиву добавляется второй массив. Для удаления повторяющихся элементов массива используйте $.unique().

Примеры:

Пример:

Объединить два массива, изменяется первый аргумент функции. $.merge( [0,1,2], [2,3,4] )

$(document).ready(function(){

$.merge( [0,1,2], [2,3,4] )

  });

Пример:

Объединить два массива, изменяется первый аргумент функции.

$(document).ready(function(){

$.merge( [0,1,2], [2,3,4] )

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.merge/


jQuery jQuery.noop

[Функция] jQuery.noop
Раздел "Utilities"

Метод является пустой функцией.
Сигнатура
jQuery.noop → Boolean
Параметры
Description

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

Примеры:

Пример:

Проверка элементов объекта на предмет являются ли они функциями?

$(document).ready(function(){

alert(jQuery.noop)

  });

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/jQuery.noop/


jQuery jQuery.trim(str)

[Функция] jQuery.trim(str)
Раздел "Utilities"

Функция удаления пробелов из начала и конца строки.
Сигнатура
jQuery.trim(str) → String
Параметры
jQuery.trim(str)
1.0
str: строка, которая будет обрабатана.
Description

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

Примеры:

Пример:

Удалить пробелы из начала и конца строки.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("button").click(function () {
      var str = "     lots of spaces before and after     ";
      alert("'" + str + "'");

      str = jQuery.trim(str);
      alert("'" + str + "' - no longer");
    });

  });
  </script>

<button>Show Trim Example</button>

</body>
</html>

Пример:

Удалить пробелы из начала и конца строки.

$(document).ready(function(){

 $.trim("  hello, how are you?  ");

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.trim/


jQuery jQuery.unique(array)

[Функция] jQuery.unique(array)
Раздел "Utilities"

Функция удаляет все повторяющиеся элементы массива элементов. Учтите функция работает только с массивом DOM элементов, не со строкой или числами.
Сигнатура
jQuery.unique(array) → Array
Параметры
jQuery.unique(array)
1.1.3
array: массив элементов.
Примеры:

Пример:

Удалить любые повторяющиеся элементы из массива, состоящего из элементов div.

<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    var divs = $("div").get();

    // добавлено три элемента с классами dup too (здесь три div)
    divs = divs.concat($(".dup").get());
    $("div:eq(1)").text("Pre-unique there are " + divs.length + " elements.");

    divs = jQuery.unique(divs);
    $("div:eq(2)").text("Post-unique there are " + divs.length + " elements.")
                  .css("color", "red");

  });
  </script>

<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>

</body>
</html>

Пример:

Удалить любые повторяющиеся элементы из массива, состоящего из элементов div.

$(document).ready(function(){

$.unique(document.getElementsByTagName("div"));

  });

Метод добавлен в jQuery 1.1.3
Официальная страница метода - http://api.jquery.com/jQuery.unique/


jQuery

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

jQuery.pushStack()
метод позволяет добавить набор элементов структуры DOM к стеку jQuery.

selector
данный метод должен использоваться в сочетании с контекстом для определения точности изначально получаемого селектора.


jQuery

jQuery Slyweb.ru
События форм:
blur()
Запустить событие blur для каждого подходящего элемента.

blur(fn)
Связать функцию с событием blur для каждого подходящего элемента.

change()
Запустить событие change для каждого подходящего элемента.

change(fn)
Связать функцию с событием change для каждого подходящего элемента.

focus()
Запустиь событие focus для каждого подходящего элемента.

focus(fn)
Связать функцию с событием focus для каждого подходящего элемента.

select()
Функция запускает событие select для каждого подходящего элемента.

select(fn)
Связать функцию с событим select для каждого подходящего элемента.

submit()
Функция запускает событие submit для каждого выбранного элемента.

submit(fn)
Связать функцию с событием submit для каждого подходящего элемента.


jQuery

В разделе "Внутренние функции в jQuery" содержаться следующие методы:


jQuery $.data()

[Function] $.data()
Раздел "Data"

Доступ ко всем данным, сохранённым в элементе
Сигнатура
$.data() → Number
Параметры
$.data()
1.2.3
elem: элемент структуры DOM.
Description

С помощью данного метода в jQuery реализован доступ ко всем значениям, сохраннным в элементt с помощью метода $.data(name,value).

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

Примеры:

Пример:

Сохранить данные с именами foo bar, после чего получить к ним доступ

$(document).ready(function(){

    $('body').data('foo', 52);
    $('body').data('bar', 'test');

    $('body').data('foo'); // 52
    $('body').data(); // {foo: 52, bar: test}

  });

Пример:

Получить сохранённый id элемента.

$(document).ready(function(){

    $(document.body).click(function(e) {
      var id = jQuery.data(e.target);
      $("span").text(id);
    });

  });

Метод добавлен в jQuery 1.2.3
Официальная страница метода - http://api.jquery.com/data/


jQuery jQuery.pushStack()

[Функция] jQuery.pushStack()
Раздел "Authoring"

метод позволяет добавить набор элементов структуры DOM к стеку jQuery.
Сигнатура
jQuery.pushStack() → jQuery
Параметры
jQuery.pushStack()
1.0
elements: массив элементов помещаемых в объект jQuery.
jQuery.pushStack( elements, name, arguments )
elements: массив элементов помещаемых в объект jQuery.
name: название jQuery метода создающего массив элементов.
arguments: аргументы, которые были переданы в jQuery метод (для объединения).
Примеры:

Пример:

Определить точный контекст для элемента, искомого с помощью селектора.

<!DOCTYPE html>
<html>
<head>
<style>
div { background:yellow; margin:6px 0; } p.off { background: black; }
 </style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

jQuery([])
    .pushStack( document.getElementsByTagName("div") )
        .remove()
    .end();
    alert($('div').length)

  });
  </script>

<div></div>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.pushStack/


jQuery

Методы для элементов DOM:
get()
Доступ ко всем выбранным элементам.

index(subject)
Функция осущетсвляет поиск каждого выбранного элемента для объекта и возвращает его индекс, если элемент найден индекс начинается с 0. Если jQuery объект не содержит искомого элемента, то только первый элемент отмечается.

toArray()
Возвращает все элементы jquery как массив.

size()
Функция возвращает количество элементов в jQuery объекте


jQuery

В разделе "Методы получения смещения элементов" содержаться следующие методы:
offset()
Функция предоставляет доступ к текущему смещению первого подходящего элемента относительно документа.

position()
Получить позицию верхнего и левого отступа элемента относительно смещения его родителя.

scrollTop()
Функция предоставляет доступ к значению свойства scroll для первого подходящего элемента.

scrollTop(val)
Когда переменная будет указана, свойство scroll установит данное значение для смещения относительно верха документа, для всех подходящих элементов.

scrollLeft()
Получить значение свойства scroll левого смещения для первого подходящего элемента.

scrollLeft(val)
Когда переменная будет указана, свойство scroll установит данное значение для смещения относительно левого края документа для всех подходящих элементов.


jQuery jQuery.param(obj)

[Функция] jQuery.param(obj)
Раздел "Ajax"

Метод создаёт объединенное представление массива или объекта, пригодное для использования в URL при отправке данных методом Ajax.
Сигнатура
jQuery.param(obj) → String
Параметры
jQuery.param(obj)
1.2
obj: массив или jQuery объект состоящий из объединяемых пар имя/переменных. Объект, объединяемый через ключ/значение
jQuery.param(obj,traditional)
1.4
obj: массив или объект для сериализцаии
traditional: булев индикатор, определяющий способ сериализации
Description

Данный метод используется внутренне для конвертации значения элемента в объединённое строковое представление. (подробнее об этом смотрите в описании метода .serialize())

Начиная с jQuery 1.3 возвращаемое значение функции используется вместо функции как строки. Начиная с jQuery 1.4 метод $.param() рекурсивно добирается до объектов, снабжая их дополнительными данными в соответствие с популярными языками PHP и Ruby on Rails. Для отключения данной функциональности установите: jQuery.ajaxSettings.traditional = true;.

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

Примеры:

Пример:

Мы можем отобразить строковое представление объекта и его раздекодированное значение с помощью метода decodeURIComponent. Занчения перменных recursiveEncoded и recursiveDecoded отобразятся следующим образом: a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3 a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&amp;b[]=3

<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var myObject = {
  a: {
    one: 1,
    two: 2,
    three: 3
  },
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);

  });
  </script>

<div id="results"></div>

</body>
</html>

Пример:

Мы можем отобразить строковое представление объекта и его раздекодированное значение с помощью метода decodeURIComponent. значения переменных recursiveEncoded и recursiveDecoded отобразятся следующим образом: a=%5Bobject+Object%5D&b=1&b=2&b=3 a=[object+Object]&b=1&b=2&b=3

<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var myObject = {
  a: {
    one: 1,
    two: 2,
    three: 3
  },
  b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);
alert(shallowDecoded);

  });
  </script>

<div id="results"></div>

</body>
</html>

Пример:

Приоритетным поведением метода $.param() для Jquery 1.4 является установка аргумента traditional как true

<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

var myObject = {
  a: {
    one: 1,
    two: 2,
    three: 3
  },
  b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);
alert(shallowDecoded);

  });
  </script>

<div id="results"></div>

</body>
</html>

Метод добавлен в jQuery 1.2
Официальная страница метода - http://api.jquery.com/jQuery.param


jQuery ajaxSend(callback)

[] ajaxSend(callback)
Раздел "Ajax"

Добавить функцию, выполянемую перед отправлением AJAX запроса. Функция представляет Ajax событие.
Сигнатура
ajaxSend(callback) → jQuery
Параметры
ajaxSend(callback)
1.0
callback:  выполняемая функция.
function (event, XMLHttpRequest, ajaxOptions, thrownError)
 {
 // thrownError передаётся если произошла ошибка;
 // dom element listening
 }
Description

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

Примеры:

Пример:

Выводит сообщение, когда AJAX запрос заканчивается неудачей.

$(document).ready(function(){

 $("#msg").ajaxError(function(event, request, settings){
   $(this).append("<li>Error requesting page " + settings.url + "</li>");
 });

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/ajaxSend/


jQuery boxModel()

[Функция] boxModel()
Раздел "Properties"

Сигнатура
boxModel() → Boolean
Параметры
Description

В jQuery 1.3 вызывает противоречивое (смотрите jQuery.support). Указывает состояние, если текущая страница в браузере пользователя представлена в соответствие с [http://www.w3.org/TR/REC-CSS2/box.html W3C CSS Box Model].

Примеры:

Пример:

Вернуть блочную модель для iframe.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("p").html("The box model for this iframe is: <span>" +
                jQuery.boxModel + "</span>");

  });
  </script>

<div id="results"></div>

</body>
</html>

Пример:

Возвращает false, если страница находится в режиме работы QuirksMode в Internet Explorer.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$.boxModel

  });
  </script>

<div id="results"></div>

</body>
</html>

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/boxModel/


jQuery $.browser()

[Функция] $.browser()
Раздел "Properties"

Сигнатура
$.browser() → Таблица
Параметры
Description

В jQuery 1.3 вызывает противоречивое (смотрите jQuery.support). Содержит название браузера, прочитанное из navigator.userAgent.

Примеры:

Пример:

Отобразить информацию о браузерах.

$(document).ready(function(){

    jQuery.each(jQuery.browser, function(i, val) {
      $("<div>" + i + " : <span>" + val + "</span>")
                .appendTo(document.body);
    });

  });

Пример:

Вернуть true если браузер является одной из версий браузеров Microsoft Internet Explorer.

$(document).ready(function(){

$.browser.msie

  });

Пример:

Вывести диалоговое окно "this is safari!" только в браузере safari.

$(document).ready(function(){

if ($.browser.safari) {
    alert("this is safari!");
 }

  });

Пример:

Установить CSS свойство для определённого браузера.

$(document).ready(function(){

jQuery.each(jQuery.browser, function(i) {
   if($.browser.msie){
      $("#div ul li").css("display","inline");
   }else{
      $("#div ul li").css("display","inline-table");
   }
 });

  });

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/


jQuery $.browser.version()

[Функция] $.browser.version()
Раздел "Properties"

Сигнатура
$.browser.version() → Строка
Параметры
Description

В jQuery 1.3 вызывает противоречивое (смотрите jQuery.support). Версия браузера интерпретирующая устройство браузера пользователя.

Description

Наиболее типичный результат:

• Internet Explorer: 6.0, 7.0

• Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3, 1.9

• Opera: 9.20

• Safari/Webkit: 312.8, 418.9

Примеры:

Пример:

Вернуть версию браузера.

$(document).ready(function(){

    $("p").html("The browser version is: <span>" +
                jQuery.browser.version + "</span>");

  });

Пример:

Указать в диалоговом окне версию IE

$(document).ready(function(){

if ( $.browser.msie )
alert( $.browser.version );

  });

Пример:

Часто вам необходимо знать целый номер версии браузера. Это может быть получено с использованием встроенной JavaScript функции parseInt():

$(document).ready(function(){

jQuery Code
if (jQuery.browser.msie) {
  alert(parseInt(jQuery.browser.version));
}

  });

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/


jQuery $.support()

[Функция] $.support()
Раздел "Properties"

Сигнатура
$.support() → Object
Параметры
Description

Добавлено в jQuery 1.3. Коллекция свойств, которая представляет существующие возможности или ошибки различных браузерах.

Примеры:

Пример:

Вернуть блочную модель для элемента iframe.

$(document).ready(function(){

$("p").html("This frame uses the W3C box model: <span>" +
                jQuery.support.boxModel + "</span>");

  });

Пример:

Вернуть false, если страница находится в режиме QuirksMode для Internet Explorer.

$(document).ready(function(){

jQuery.support.boxModel

  });

Метод добавлен в jQuery 1.3
Официальная страница метода - http://api.jquery.com/jQuery.support/


jQuery html()

[Функция] html()
Раздел "Attributes"

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

Пример:

При нажатии по параграфу, html конвертируется в текст.

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin:8px; font-size:20px; color:blue;
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }

</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>
    <b>Click</b> to change the <span id="tag">html</span>
  </p>
  <p>
    to a <span id="text">text</span> node.
  </p>
  <p>
    This <button name="nada">button</button> does nothing.
  </p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/html/


jQuery removeAttr(name)

[Селектор] removeAttr(name)
Раздел "Attributes"

Удаление атрибута из каждого из выбранных элементов.
Сигнатура
removeAttr(name) → jQuery
Параметры
removeAttr(name)
1.0
name: имя удаляемого свойства.
Description

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

Примеры:

Пример:

Нажмите кнопку для переключения свойства «disabled» поля формы input, следующего за кнопкой.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

    $("button").click(function () {
      $(this).next().removeAttr("disabled")
             .focus()
             .val("editable now");
    });

  });
  </script>

<button>Enable</button>
  <input type="text" disabled="disabled" value="can't edit this" />

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/removeAttr/


jQuery data(name)

[Function] data(name)
Раздел "Data"

Функция возвращает значение определенных данных (data), сохранённых в элементе, установленных через функцию data(name,value).
Сигнатура
data(name) → Any
Параметры
data(name)
1.2.3
name: имя сохранённых данных.
Description

Если jQuery коллекция ссылается на многочисленные элементы, значение вернёт ссылку на первый элемент. Данная функция используется для того чтобы получить сохранённые данные элемента без риска циклической передачи. Функция использует jQuery.data, что введено в jQuery 1.2.3. Функция может быть использована по многим причинам, в jQuery UI можно обнаружить многочисленные примеры данной функции.

Примеры:

Пример:

Получить данные названные как "blah," сохранённые в элемент.

<!DOCTYPE html>
<html>
<head>
<style>
  div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

       $("button").click(function(e) {
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = $("div").data("blah");
          break;
        case 1 :
          $("div").data("blah", "hello1");
          value = "Stored!";
          break;
        case 2 :
          $("div").data("blah", 86);
          value = "Stored!";
          break;
        case 3 :
          $("div").removeData("blah");
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

  });
  </script>

<div>A div  <button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button></div>
<p>The "blah" value of this div is <span>?</span></p>

</body>
</html>

Метод добавлен в jQuery 1.2.3
Официальная страница метода - http://api.jquery.com/data/


jQuery $.data(elem, name)

[Function] $.data(elem, name)
Раздел "Data"

Доступ к сохранённым ранее данным
Сигнатура
$.data(elem, name) → Any
Параметры
$.data(elem, name)
1.2.3
elem: элемент структуры DOM.
name: название сохраяемых данных.
Description

Возвращает значение определенных данных, сохранённых в элемент.

Примеры:

Пример:

Получить данные "blah" сохранённые в элементе.

$(document).ready(function(){

$("button").click(function(e) {
      var adiv = $("div").get(0);
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = jQuery.data(adiv, "blah");
          break;
        case 1 :
          jQuery.data(adiv, "blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          jQuery.data(adiv, "blah", 86);
          value = "Stored!";
          break;
        case 3 :
          jQuery.removeData(adiv);
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

  });

Метод добавлен в jQuery 1.2.3
Официальная страница метода - http://api.jquery.com/data/


jQuery $.data(elem, name, value)

[Function] $.data(elem, name, value)
Раздел "Data"

Сохранение данных в атрибутах элементов
Сигнатура
$.data(elem, name, value) → Any
Параметры
$.data(elem, name, value)
1.2.3
elem: элемент структуры DOM.
name: название сохраяемых данных.
value: значение данных.
Description

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

var obj = jQuery.data($("#target").get(0), "pluginname", {}); obj[...] = ...

Примеры:

Пример:

Сохранить и извлечь значение данных из элемента div.

$(document).ready(function(){

    var adiv = $("div").get(0);
    jQuery.data(adiv, "test", { first: 16, last: "pizza!" });
    $("span:first").text(jQuery.data(adiv, "test").first);
    $("span:last").text(jQuery.data(adiv, "test").last);

  });

Метод добавлен в jQuery 1.2.3
Официальная страница метода - http://api.jquery.com/data/


jQuery empty()

[Функция] empty()
Раздел "Manipulation"

Функция удаляет все дочерние узлы из набора подходящих элементов.
Сигнатура
empty() → jQuery
Параметры
Description

Учтите, что данная функция начиная с 1.2.2 так же удаляет все обработчики событий и внутренне кэшируемые данные.

Примеры:

Пример:

Удалить все дочерние узлы (включающие текстовые узлы) из всех параграфов.

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p>
    Hello, <span>Person</span> and person
  </p>
  <button>Call empty() on above paragraph</button>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/empty/


jQuery text()

[Функция] text()
Раздел "Manipulation"

Получить объединённое текстовое содержание всех выбранных элементов.
Сигнатура
text() → String
Параметры
Description

Результат в виде строки объединённого текстового содержания всех выбранных элементах. Данный метод поддерживается как в HTML так и в XML документах. Однако не используется для элементов input. Для полей формы используйте метод val attribute.

Примеры:

Пример:

Найти текст в первом параграфе (код html удаляется), затем данный текст установить в качестве html кода в последнем параграфе, чтобы показать собранный текст (при этом CSS свойства исчезнут).

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:blue; margin:8px; }
  b { color:red; }
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

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

  });
  </script>

<p><b>Test</b> Paragraph.</p>
  <p></p>

</body>
</html>

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/text/


jQuery event.stopImmediatePropagation()

[Функция] event.stopImmediatePropagation()
Раздел "Events"

Отключить выполнение других обработчиков данного события за исключением существующего.
Сигнатура
event.stopImmediatePropagation() → Number
Параметры
Description

Данный метод так же косвенным образом отключает действие метода event.stopPropagation(). Используйте метод event.isImmediatePropagationStopped() для того, чтобы определить был ли вызван метод event.stopImmediatePropagation() для объекта события.

Примеры:

Пример:

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

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:100px; height:100px;
    background:green; float:left;color:white;}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){

$("p").click(function(event){
  event.stopImmediatePropagation();
});
$("p").click(function(event){
  // данная функция не будет ваполнена
  $(this).css("background-color", "#f00");
});
$("div").click(function(event) {
  // данныая функция будет выполнена
    $(this).css("background-color", "#f00");
});

  });
  </script>

<p>paragraph</p>
<div>division</div>

</body>
</html>

Метод добавлен в jQuery 1.1.4
Официальная страница метода - http://api.jquery.com/event.stopImmediatePropagation/


jQuery jQuery.contains(container, contained)

[Функция] jQuery.contains(container, contained)
Раздел "Utilities"

проверка наличия узла DOM внутри другого элемента структуры DOM.
Сигнатура
jQuery.contains(container, contained) → Boolean
Параметры
jQuery.contains(container, contained)
1.4
container: элемент структуры DOM, который может содержать другой элемент.
contained: узел структуры DOM, который может содержаться в другом элементе.
Description

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

Примеры:

Пример:

Проверка наличия элемента внутри другого элемента. В случае успешности метод вернет true.

$(document).ready(function(){

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

  });

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/jQuery.contains/


jQuery jQuery.extend(deep, target, object1, objectN)

[Функция] jQuery.extend(deep, target, object1, objectN)
Раздел "Utilities"

Расширить объект одним или несколькими объектами, возвращая исходный, модифицированный объект.
Сигнатура
jQuery.extend(deep, target, object1, objectN) → Object
Параметры
jQuery.extend(deep, target, object1, objectN)
1.0
deep: если указано, соединение становиться рекурсивным (т.е. происходит расширенное копирование).
target: расширяемый объект.
object1: объект который будет объединён с первым объектом.
objectN: дополнительные объекты объединяемые с первым объектом.
Description

Если нет заданного объекта, JQuery расширение происходит согласно пространству имён. Функция полезна для разработки авторских плагинов с добавлением нового метода в JQuery. Если логическое true указано в качестве первого параметра, JQuery делает расширенную копию, рекурсивно копируя любые найденные объекты. Иначе происходит копирование части структуры исходного(ых) объекта(ов). Неопределенные данные не копируются. Однако, данные унаследованные от объекта(ов) прототипов будут скопированы сверху.

Примеры:

Пример:

Объединить settings и options, изменяя settings.

$(document).ready(function(){

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

  });

Пример:

Объединить defaults и options, без изменения первых.

$(document).ready(function(){

var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);

  });

Метод добавлен в jQuery 1.0
Официальная страница метода - http://api.jquery.com/jQuery.extend/


jQuery jQuery.globalEval(code)

[Функция] jQuery.globalEval(code)
Раздел "Utilities"

глобальное выполнение javascript кода.
Сигнатура
jQuery.globalEval(code) → Boolean
Параметры
Description

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

Примеры:

Пример:

Выполнение скрипта в глобальном контексте.

$(document).ready(function(){

function test(){
    jQuery.globalEval("var newVar = true;")
}
test();

  });

Метод добавлен в jQuery 1.4
Официальная страница метода - http://api.jquery.com/jQuery.globalEval/