Page 313 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017
P. 313
query e l e c torAll ( ) возвратит несколько элементов, но их перебор и выполнение
S
любых необходимых операций - это уже забота программиста. Библиотека jQuery
сама осуществляет перебор и стандартно подразумевает, что вы хотите выполнить
действия с каждым элементом в объекте jQuery. Что если вы хотите изменить толь
ко третий абзац? jQuery предоставляет метод eq, который возвращает новый объект
jQuery, содержащий одиночный элемент.
$ ( ' р ' ) / / соответствует всем абзацам
. e q ( 2 ) ! / т р етий абзац (отсчитывается от нуля)
. h tml ( ' <i>TPETИ Й </i> АБЗАЦ ЗАМЕНЕН ' ) ;
Чтобы удалить элементы, достаточно вызвать метод remove объекта jQuery. Сле
дующее удалит все абзацы.
$ ( ' р ' ) . remove ( ) ;
j
Это демонстрирует еще одну важную парадигму в разработке Q uery: сцепление
(chaining). Все методы jQuery возвращают объект jQuery , что позволяет сцеплять их
вызовы, как мы сделали только что. Сцепление обеспечивает очень мощный и ком
пактный синтаксис для манипулирования несколькими элементами.
Библиотека jQuery предоставляет много методов для добавления нового содержи
мого. Один из этих методов, append, просто добавляет предоставленное содержимое
в каждый элемент в объекте jQuery. Например, можно очень легко добавить сноску
к каждому абзацу.
$ ( р ' ' )
. a ppend ( ' <sup>*</sup> ' ) ;
Метод append добавляет дочерний элемент к соответствующим элементам; мы
также можем вставить элементы одного уровня, используя методы before или after.
Например, добавим горизонтальные линии (элементы <hr>) перед каждым абзацем
и после него.
$ ( ' р ' )
>
. after ( ' <hr ' )
'
. b efore ( < hr> ' ) ;
Эти методы вставки также имеют соответствующие дубликаты appendTo,
insertBefore и insertAfter, меняющие порядок вставки на обратный, что может
быть полезно в определенных ситуациях, например таких.
d
$ ( ' < sup>*</sup> ' ) . a ppendTo ( ' р ' ) ; 1 1 эквивалент $ ( 'р ' ) . a p p en ( ' < s u p>*</sup> ' )
'
'
'
$ ( ' < hr> ' ) . insertBefore ( ' р ' ) ; / / эквивалент $ ( 'р ) . before ( < hr> )
'
'
'
$ ( ' <hr> ' ) . insertAfter ( ' р ' ) ; / / эквивалент $ ( 'р ) . after ( < hr> ) ;
Библиотека jQuery также весьма упрощает изменение стиля элемента. Вы можете
добавлять класс, используя метод addClass, удалять класс, используя removeClass,
и переключать классы, используя toggle l a s s (что добавит класс, если у элемента
C
3 1 6 Глава 1 9 . Библиотека jQuery

