Функция jQuery() или $()

172

посл. ред. 23.03.2018

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

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

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

$()

Возвращает пустой jQuery-объект.

$(DOM-элемент)

Возвращает jQuery-объект, представляющий переданный DOM-элемент. Можно передавать список элементов.

$(document) // jQuery-объект, представляющий объект document
$(document.images) // jQuery-объект, представляющий все картинки на странице

$(jQuery-объект)

Возвращает клон переданного jQuery-объекта.

var jq_doc = $(document); // jQuery-объект
var jq_doc_clone = $(jq_doc); // клон jQuery-объекта

$(селектор[, область_поиска])

Возвращает jQuery-объект, представляющий элемент (группу элементов), который удовлетворяет указанному селектору в заданной области.

Селектор представляется в виде строки.
Область поиска может быть представлена в виде DOM-элемента, объекта документа или jQuery-объекта. Если область не указана, тогда поиск идёт по всему документу.

var jq_block = $('#block') // jQuery-объект элемента с id="block"
var jq_block_div = $('div', jq_block) // jQuery-объект, представляющий все div-элементы внутри jq_block

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

$(HTML-код[, атрибуты])

Создаёт элемент из переданного HTML-кода и возвращает jQuery-объект, представляющий этот элемент. HTML-код передаётся в виде строки.

var elem = $('<div>Блок.<p>Параграф.</p></div>'); // элемент DIV создан сразу с содержимым

Если создаётся пустой элемент (например, $('<p></p>')), то для него можно указать атрибуты. Значения атрибутов передаются вторым параметром функции в виде JavaScript-объекта.

var elem = $('<h1></h1>', {
  'title': 'Заголовок',
  'style': 'color: red'
});

$(функция)

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

<html>
<head>
  <title>jQuery</title>
  <script src="js/jquery.js"></script>
  <script>
    $(function readyDOM() {
      alert('DOM построена');
    });
  </script>
</head>
<body>
  <script>
      alert('Идёт построение DOM');
  </script>
  <p>Конец документа</p>
</body>
</html>

Функция readyDOM() запустится после полного отображения документа.

В ранних версиях jQuery для запуска функций после полного построения DOM-дерева использовался метод ready(). Если написать так: $(document).ready(функция), тогда переданная функция запустится по завершению построения DOM.

В последних версиях jQuery метод ready() считается устаревшим и не рекомендуется для использования.