Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Форматы функции $()
Основную функциональность библиотеки 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
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов