Форматы функции $()

Основную функциональность библиотеки jQuery выполняет функция jQuery(), которая имеет псевдоним $(). Это единственные идентификаторы, которые доступны в глобальной области видимости. Все остальные функции находятся в области имен библиотеки jQuery. Функция $() поддерживает несколько форматов:

$(<Функция>);
$(<Элемент объектной модели документа>);
$(<HTML-текст>[, <Документ>]);
$(<Селектор>[, <Контекст>]);
$(<HTML-элемент>, <Свойства>);
$(<Объект>);
$(<Массив DOM-элементов>);
$(<Коллекция элементов jQuery>);
$().

Если в качестве параметра указать ссылку на функцию или передать анонимную функцию, то она будет выполнена сразу после формирования структуры документа:

$(function() {
   window.alert('Документ доступен для выполнения скриптов');
});

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

$(function() {
   $(document.body).css('background-color', 'silver');
});

Третий формат функции позволяет создавать новые элементы, которые затем можно вставить в определенное место в HTML-документе. Рассмотрим это на примере (листинг 1.3).

Листинг 1.3. HTML-текст в качестве параметра функции $()

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>HTML-текст в качестве параметра функции $()</title>
</head>
<body>
   <div id="div1">Строка 1</div>
   <div id="div2">Строка 2</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('<div>Вставленный текст</div>').insertAfter('#div1');
});
</script>
</body>
</html>

Обратите внимание на следующую инструкцию:

$('<div>Вставленный текст</div>').insertAfter('#div1');

Здесь мы в функции $() формируем HTML-текст, а затем с помощью метода insertAfter() вставляем его после элемента, имеющего идентификатор div1 (id="div1"). При выполнении получим в окне Web-браузера следующий результат:

Строка 1
Вставленный текст
Строка 2

Структура HTML-документа после вставки:

<div id="div1">Строка 1</div><div>Вставленный текст</div>
<div id="div2">Строка 2</div>

Четвертый формат функции $() является наиболее часто используемым. Он позволяет получить ссылку на элемент или коллекцию элементов по указанному селектору. В качестве этого параметра указываются селекторы, которые являются частью стандарта CSS 3, а также некоторые специальные селекторы. Вторым параметром функции $() может быть указан контекст. Например, ссылка на XML-документ, полученный с сервера в результате AJAX-запроса. Если параметр не указан, то контекстом является текущий документ.

Пятый формат функции $() позволяет создать HTML-элемент. Во втором параметре указывается объект со свойствами элемента и их значениями. Создадим элемент DIV и добавим к нему параметры id и class, а затем вставим его после элемента, имеющего идентификатор div2 (id="div2"):

$('<div></div>', {
   id      : 'div3',
   'class' : 'myClass',
   text    : 'Это новый элемент DIV'
}).insertAfter('#div2');

Результат:

<div id="div3" class="myClass">Это новый элемент DIV</div>

Шестой формат функции $() позволяет указать обычный объект. Получить или изменить значение свойства объекта можно с помощью метода prop():

var car = {
   model: 'ВАЗ-2109',
   year: 2007
};
var $car = $(car);
console.log( $car.prop('model') ); // ВАЗ-2109
console.log( $car.prop('year') );  // 2007
$car.prop('year', 2009);
console.log( $car.prop('year') );  // 2009
console.log(car);
// Object { model: "ВАЗ-2109", year: 2009 }

Кроме того, можно воспользоваться методами data(), on(), off(), trigger() и triggerHandler(). Пример использования метода data():

var car = {
   model: 'ВАЗ-2109',
   year: 2007
};
var $car = $(car);
$car.data('key1', 'data1');
console.log( $car.data('key1') ); // data1
console.log(car);
// Object { model: "ВАЗ-2109", year: 2007, 
// jQuery34108492182465578762: { key1: "data1" } }

Седьмой формат функции $() позволяет указать массив DOM-элементов. Сохраним ссылки на элементы DIV из листинга 1.3 в массиве, передадим этот массив функции $(), а затем сделаем цвет текста элементов красным:

var arr = [
   document.getElementById("div1"),
   document.getElementById("div2")
];
$(arr).css('color', 'red');

Восьмой формат функции $() предназначен для создания копии коллекции элементов jQuery:

var obj = $('div');
var obj2 = $(obj);
obj2.css('color', 'red');

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

console.log($().length); // 0

Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов