Page 312 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017

Функция jQuery ($ или j Q uery) создает набор элементов DOM в оболочке jQuery
(который начиная с этого момента мы будем называть "объект jQuery" (jQuery
object); просто помните, что объект jQuery содержит набор элементов DOM!). Функ­
цию jQuery главным образом вызывают одним из двух способов: с селектором CSS
или с НТМL-кодом.
Вызов jQuery с селектором CSS возвращает объект jQuery, соответствующий это­
му селектору (подобно возвращению из document . querySelectorAll ) . Например,
чтобы получить объект jQuery, соответствующий всем дескрипторам <р>, просто
сделайте так.

const $paras = $ ( р ' ' ) ;
$paras . length; / / количество соответств ую щих дескрипторов а б заца
a
j
t y peof $par s ; / / "ob e ct "
$paras instanceof $ ; / / true
$paras instanceof j Q uery; // true
Вызов jQuery с НТМL-кодом, напротив, создает новые элементы DOM на осно­
вании HTML, который вы предоставляете (подобно тому, как это происходит при
установке значения свойства innerHTML элемента).
const $newPara = $ ( ' <р>Только что созданньм абзац . . . </р ' ) ;
>

Обратите внимание, что имя переменной, которой мы присваиваем объект
jQuery, в обоих примерах начинается со знака доллара. Необходимости в этом нет,
но следовать этому соглашению имеет смысл. Так можно быстро распознавать пере­
менные, которые являются объектами jQuery.

Ма н и п n н и е n а м и
у ирова
э емент
Теперь, когда ы имеем кой-какую информацию б объектах jQuery, что ы мо­
м
о
м
жем сделать с ними? jQuery существенно упрощает добавление и удаление содержи­
мого. Наилучший способ рассмотрения этих примеров - загрузить НТМL-пример
в браузер и запустить эти примеры на консоли. Будьте готовы перезагрузить файл,
поскольку мы будем произвольно удалять, добавлять и изменять его содержимое.
jQuery предоставляет методы text и html, которые грубо говоря являются экви­
валентами присвоения свойствам textContent и innerHTML элемента DOM. Напри­
мер, чтобы заменить каждый абзац в документе одним и тем же текстом, используем
$ ( 1 р 1 ) • text ( 1 ВСЕ АБЗАЦЫ ЗАМЕНЕНЫ 1 ) ;
Аналогично мы можем применить метод html, чтобы использовать НТМL-код.
'
$ ( ' р ' ) . h tml ( < i>BCE</i> АБЗАЦЫ ЗАМЕНЕНЫ ' ) ;
Из этого следует важный момент: jQuery существенно упрощает работу со
e
многими элементами сразу. При использовании API DOM метод docum n t .

Манипулирование элементами 3 1 5