


Курс
Основы jQuery
Данный видеокурс познакомит вас с основами популярной библиотеки jQuery.
#7 — Манипуляции с элементами.
Надеемся, что с помощью наших видеоуроков вы уже научились, используя функции jQuery,
находить элементы в DOM-дереве, создавать их. А теперь вы узнаете, как осуществлять
при помощи функций библиотеки jQuery манипуляции с DOM-элементами.
Существует множество вариантов изменения документа путем реализации методами jQuery разнообразных действий с элементами. Элементы можно вставлять в нужное место DOM, удалять
их, оборачивать ими другие элементы, заменять и копировать.
Изучив данный урок, вы сможете, используя jQuery, вставить элемент в документ. Более
подробно на конкретном примере будут рассмотрены способы оборачивания одних элементов
в другие.
Приятного всем просмотра! Учитесь с удовольствием!
Знакомимся с функциями:
Вставки последним ребенком
- e.append(s) — добавит s последним в e
- e.appendTo(s) — добавит e последним в s
Вставки первым ребенком
- e.prepend(s) — добавит s первым в e
- e.prependTo(s) — добавит e первым в s
Вставки перед элементом
- e.before(s) — добавит s перед e
- e.insertBefore(s) — добавит e перед s
Вставки после элемента
- e.after(s) — добавит s после e
- e.insertAfter(s) — добавит e после s
Оборачивания
- e.wrap(s) — обернет снаружи элементом s каждый из e элементов e
- e.wrapInner(s) — обернет внутри элементом s каждый из e элементов
- e.wrapAll(s) — обернет все e элементом s
Удаление содержимого
- e.remove() — удаляет элементы e со страницы
- e.empty() — очищает содержимое элементов e
- e.unwrap() — удаляет родителя, оставляя содержимое
Замена элементов
- e.replaceWith(s) — заменяет e на s
- e.replaceAll(s) — заменяет s на e
Копирование элементов
- e.clone([withDataAndEvents]) — создает копию узла e со всем его содержимым. Если передать на вход значение true, то скопируются еще и данные узла, а также обработчики его событий (по умолчанию на входе false).
Добавление/изменение содержимого
- e.html([s]) — без параметров — возвращает html-содержимое элемента e, с параметром (html строка или элементы) — заменяет на них содержимое элемента e
- e.text([string]) — без параметров — возвращает текст, содержащийся в элементе e, с параметром — заменяет текст в элементе e
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Основы jQuery - 7 Манипуляции с элементами</title> <style type="text/css"> </style> </head> <body> <ul class="list first"> <li>11</li> <li>12</li> <li>13</li> </ul> <ul class="list second"> <li>21</li> <li>22/li> <li>23</li> <li>24</li> </ul> <script src="jquery-2.0.3.js"></script> <script type="text/javascript"> </script> </body> </html> |
Рекомендуемые курсы
Оставь комментарий!