Функция $() — создание коллекции jQuery

Определение и применение

Функция $() — короткое имя jQuery() и основной вход в библиотеку. Она находит узлы, оборачивает уже известные объекты, создаёт элементы из HTML или регистрирует обработчик готовности документа. Выбранная форма зависит от типа аргумента.

Синтаксис

JavaScript

$(selector, context);
$(element);
$([firstElement, secondElement]);
$(existingCollection);
$(plainObject);
$("<p>", { text: "Сообщение", class: "notice" });
$(html, ownerDocument);
$(handler);
$();

Параметры и возвращаемое значение

Строка-селектор ищет элементы документа; необязательный context ограничивает поиск указанной областью. Переданный DOM-узел или массив узлов помещается в коллекцию. Передача существующей коллекции создаёт другую оболочку над теми же узлами. Вызов без аргумента даёт пустую коллекцию.

HTML-строка создаёт узлы в памяти. Они появятся на странице только после вставки, например методом .append(). Для одиночного тега вторым аргументом можно передать объект атрибутов и имён методов; text задаёт текстовое содержимое.

Функция-обработчик выполняется после готовности DOM. Подробнее об этом варианте — в статье .ready(). Обычный объект можно обернуть для работы с данными и пользовательскими событиями; DOM-операции при этом неприменимы.

Особенности и совместимость

Результат — объект jQuery, даже если селектор ничего не нашёл. Проверяйте .length, а DOM-узел извлекайте через .get(). Строки HTML из недоверенного источника требуют очистки: создание коллекции не является защитой от внедрения кода.

Одинаково выглядящие строки могут означать селектор или HTML. Когда нужно показать введённый пользователем текст, создайте элемент и задайте .text(), не собирайте из ввода HTML-строку.

Документация

jQuery — jQuery API

Пример использования

Поиск и создание элемента: попробуйте сами

Создайте абзац в памяти, вставьте его в выбранную область и подсчитайте найденные абзацы. Используется jQuery 4.0.0.

index.html

HTML

<section id="panel"><p>Первый</p></section>
<pre id="result"></pre>

main.js

JavaScript

const message = $('<p>', { text: 'Второй' })
$('#panel').append(message)
const paragraphs = $('p', document.getElementById('panel'))
$('#result').text(paragraphs.length + ' | ' + paragraphs.last().text())