Учебники

JQuery — DOM Manipulation

Ноябрь 20, 2018

JQuery предоставляет методы для эффективного управления DOM. Вам не нужно писать большой код для изменения значения атрибута какого-либо элемента или для извлечения HTML-кода из абзаца или раздела.

JQuery предоставляет такие методы, как .attr (), .html () и .val (), которые действуют как получатели, извлекая информацию из элементов DOM для дальнейшего использования.

Контент Манипулирование

Метод html () получает содержимое html (innerHTML) первого сопоставленного элемента.

Вот синтаксис для метода — 

selector .html( )

пример

Ниже приведен пример использования методов .html () и .text (val). Здесь .html () извлекает содержимое HTML из объекта, а затем метод .text (val) устанавливает значение объекта, используя переданный параметр —

Live Demo 

<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>» —

Live Demo 

<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, чтобы отфильтровать набор удаляемых элементов.

пример

Ниже приведен пример, где элементы удаляются, как только они нажаты.

Live Demo 

<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 ( метод ) вставляет содержимое перед каждым из сопоставленных элементов.

Вот синтаксис для метода — 

selector .after( content )

or

selector .before( content )

Здесь контент — это то, что вы хотите вставить. Это может быть HTML или простой текст.

пример

Ниже приведен пример, в котором элементы <div> вставляются непосредственно перед щелкающим элементом.

Live Demo 

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

Вставьте содержимое после каждого из соответствующих элементов.

Добавить содержимое внутрь каждого соответствующего элемента.

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

Вставьте содержимое перед каждым из соответствующих элементов.

Клон соответствует элементам DOM и всем их обработчикам событий и выбирает клонов.

Клон соответствует DOM Elements и выберите клонов.

Удалите все дочерние узлы из набора соответствующих элементов.

Установите HTML-содержание каждого соответствующего элемента.

Получить HTML-содержимое (innerHTML) первого соответствующего элемента.

Вставьте все соответствующие элементы за другим, указанным набором элементов.

Вставьте все соответствующие элементы перед другим, указанным набором элементов.

Добавлять содержимое внутрь каждого соответствующего элемента.

Добавить все сопоставленные элементы к другому указанному набору элементов.

Удаляет все подходящие элементы из DOM.

Заменяет элементы, сопоставленные указанным селектором, с сопоставленными элементами.

Заменяет все соответствующие элементы указанными элементами HTML или DOM.

Установите текстовое содержимое всех соответствующих элементов.

Получить объединенное текстовое содержимое всех соответствующих элементов.

Оберните каждый соответствующий элемент указанным элементом.

Оберните каждый соответствующий элемент указанным HTML-содержимым.

Оберните все элементы в соответствующем наборе в один элемент-обертку.

Оберните все элементы в соответствующем наборе в один элемент-обертку.

Оберните внутреннее дочернее содержимое каждого сопоставленного элемента (включая текстовые узлы) элементом DOM.

Оберните внутреннее дочернее содержимое каждого сопоставленного элемента (включая текстовые узлы) структурой HTML.

52
Share: