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.