#7 — Манипуляции с элементами.

Октября

2013

лайков

Надеемся, что с помощью наших видеоуроков вы уже научились, используя функции 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

<!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>

<!DOCTYPE html>

<head>

<title>Основы jQuery - 7 Манипуляции с элементами</title>

</style>

</head>

<body>

</ul>

</ul>

</script>

</body>

</html>

DOM DOM-элемент JavaScript JQuery js Видеокурс Видеоурок

Материалы к уроку:

Делись:

Оставь комментарий!

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.