jQuery - манипуляции с DOM
JQuery предоставляет методы для эффективного управления DOM. Вам не нужно писать большой код для изменения значения любого атрибута элемента или для извлечения HTML-кода из абзаца или раздела.
JQuery предоставляет такие методы, как .attr (), .html () и .val (), которые действуют как геттеры, извлекая информацию из элементов DOM для дальнейшего использования.
Управление контентом
В html( ) получает HTML-содержимое (innerHTML) первого совпадающего элемента.
Вот синтаксис метода -
selector.html( )пример
Ниже приводится пример, в котором используются методы .html () и .text (val). Здесь .html () извлекает содержимое HTML из объекта, а затем метод .text (val) устанавливает значение объекта, используя переданный параметр -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
var content = $(this).html();
$("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Это даст следующий результат -
Замена элемента DOM
Вы можете заменить весь элемент DOM указанными элементами HTML или DOM. ВreplaceWith( content ) метод очень хорошо служит этой цели.
Вот синтаксис метода -
selector.replaceWith( content )Здесь контент - это то, что вы хотите иметь вместо исходного элемента. Это может быть HTML или простой текст.
пример
Ниже приведен пример, в котором элемент деления заменяется на «<h1> JQuery is Great </h1>» -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Это даст следующий результат -
Удаление элементов DOM
Может возникнуть ситуация, когда вы захотите удалить один или несколько элементов DOM из документа. JQuery предоставляет два метода для решения этой ситуации.
В empty( ) метод удалить все дочерние узлы из набора совпавших элементов, где в качестве метода remove( expr ) удаляет все совпадающие элементы из DOM.
Вот синтаксис метода -
selector.remove( [ expr ])
or
selector.empty( )Вы можете передать необязательный параметр expr, чтобы отфильтровать набор удаляемых элементов.
пример
Ниже приведен пример, в котором элементы удаляются, как только на них щелкают.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Это даст следующий результат -
Вставка элементов DOM
Может возникнуть ситуация, когда вы захотите вставить новый один или несколько элементов DOM в существующий документ. JQuery предоставляет различные методы для вставки элементов в разные места.
В after( content ) метод вставляет содержимое после каждого из совпадающих элементов, где в качестве метода before( content ) метод вставляет содержимое перед каждым из совпадающих элементов.
Вот синтаксис метода -
selector.after( content )
or
selector.before( content )Здесь контент - это то, что вы хотите вставить. Это может быть HTML или простой текст.
пример
Ниже приведен пример, в котором элементы <div> вставляются непосредственно перед выбранным элементом.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).before('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Это даст следующий результат -
Методы манипулирования DOM
В следующей таблице перечислены все методы, которые вы можете использовать для управления элементами DOM.
| Sr. No. | Метод и описание |
|---|---|
| 1 | после (содержание)
Вставляйте контент после каждого из совпадающих элементов. |
| 2 |
добавить (содержание)
Добавлять содержимое внутрь каждого совпадающего элемента. |
| 3 | appendTo (селектор)
Добавить все совпадающие элементы к другому указанному набору элементов. |
| 4 | до (содержание)
Вставьте контент перед каждым из совпадающих элементов. |
| 5 | клон (булево)
Клонируйте соответствующие элементы DOM и все их обработчики событий и выберите клоны. |
| 6 | клон ()
Клонируйте соответствующие элементы DOM и выберите клоны. |
| 7 | пустой ()
Удалите все дочерние узлы из набора согласованных элементов. |
| 8 | html (val)
Установите HTML-содержимое каждого совпадающего элемента. |
| 9 | html ()
Получите HTML-содержимое (innerHTML) первого совпадающего элемента. |
| 10 | insertAfter (селектор)
Вставьте все совпадающие элементы после другого указанного набора элементов. |
| 11 | insertBefore (селектор)
Вставьте все совпадающие элементы перед другим заданным набором элементов. |
| 12 | prepend (содержание)
Добавьте содержимое внутри каждого совпадающего элемента. |
| 13 | prependTo (селектор)
Присоедините все совпадающие элементы к другому указанному набору элементов. |
| 14 | удалить (выражение)
Удаляет все согласованные элементы из модели DOM. |
| 15 | replaceAll (селектор)
Заменяет элементы, сопоставленные указанным селектором, сопоставленными элементами. |
| 16 | replaceWith (контент)
Заменяет все совпадающие элементы указанными элементами HTML или DOM. |
| 17 | текст (val)
Установите текстовое содержимое всех совпадающих элементов. |
| 18 | текст ()
Получите объединенное текстовое содержимое всех совпадающих элементов. |
| 19 | обернуть (элем)
Оберните каждый согласованный элемент указанным элементом. |
| 20 | обернуть (HTML)
Оберните каждый совпавший элемент указанным содержимым HTML. |
| 21 год | wrapAll (элемент)
Оберните все элементы согласованного набора в один элемент-оболочку. |
| 22 | wrapAll (HTML)
Оберните все элементы согласованного набора в один элемент-оболочку. |
| 23 | wrapInner (элем)
Оберните внутреннее дочернее содержимое каждого согласованного элемента (включая текстовые узлы) элементом DOM. |
| 24 | wrapInner (HTML)
Оберните внутреннее дочернее содержимое каждого согласованного элемента (включая текстовые узлы) структурой HTML. |