jQuery - Manipulacja DOM

JQuery zapewnia metody do efektywnego manipulowania DOM. Nie musisz pisać dużego kodu, aby zmodyfikować wartość atrybutu dowolnego elementu lub wyodrębnić kod HTML z akapitu lub podziału.

JQuery udostępnia metody takie jak .attr (), .html () i .val (), które działają jako metody pobierające, pobierając informacje z elementów DOM do późniejszego wykorzystania.

Manipulacja treścią

Plik html( ) pobiera zawartość html (innerHTML) pierwszego dopasowanego elementu.

Oto składnia metody -

selector.html( )

Przykład

Poniżej znajduje się przykład wykorzystujący metody .html () i .text (val). Tutaj .html () pobiera zawartość HTML z obiektu, a następnie metoda .text (val) ustawia wartość obiektu za pomocą przekazanego parametru -

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

To da następujący wynik -

Wymiana elementu DOM

Możesz zastąpić cały element DOM określonymi elementami HTML lub DOM. PlikreplaceWith( content ) metoda bardzo dobrze służy do tego celu.

Oto składnia metody -

selector.replaceWith( content )

Tutaj treść jest tym, co chcesz mieć zamiast oryginalnego elementu. Może to być HTML lub zwykły tekst.

Przykład

Poniżej znajduje się przykład, który zamieniłby element podziału na „<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>

To da następujący wynik -

Usuwanie elementów DOM

Może zaistnieć sytuacja, w której będziesz chciał usunąć jeden lub więcej elementów DOM z dokumentu. JQuery udostępnia dwie metody radzenia sobie z tą sytuacją.

Plik empty( ) metoda usuwa wszystkie węzły potomne z zestawu dopasowanych elementów, gdzie jako metoda remove( expr ) metoda usuwa wszystkie dopasowane elementy z DOM.

Oto składnia metody -

selector.remove( [ expr ])

or 

selector.empty( )

Możesz przekazać opcjonalny parametr wyrażenia, aby odfiltrować zestaw elementów do usunięcia.

Przykład

Poniżej znajduje się przykład, w którym elementy są usuwane, gdy tylko zostaną kliknięte -

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

To da następujący wynik -

Wstawianie elementów DOM

Może zaistnieć sytuacja, w której będziesz chciał wstawić nowy jeden lub więcej elementów DOM do istniejącego dokumentu. JQuery udostępnia różne metody wstawiania elementów w różnych lokalizacjach.

Plik after( content ) metoda wstaw zawartość po każdym z dopasowanych elementów, gdzie jako metoda before( content ) metoda wstawia zawartość przed każdym z dopasowanych elementów.

Oto składnia metody -

selector.after( content )

or

selector.before( content )

Tutaj treść jest tym, co chcesz wstawić. Może to być HTML lub zwykły tekst.

Przykład

Poniżej znajduje się przykład, w którym elementy <div> są wstawiane tuż przed klikniętym elementem -

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

To da następujący wynik -

Metody manipulacji DOM

Poniższa tabela zawiera listę wszystkich metod, których możesz użyć do manipulowania elementami DOM -

Sr.No. Metoda i opis
1 po (treść)

Wstaw zawartość po każdym z dopasowanych elementów.

2 append (treść)

Dołącz zawartość do wnętrza każdego dopasowanego elementu.

3 appendTo (selektor)

Dołącz wszystkie dopasowane elementy do innego, określonego zestawu elementów.

4 przed (treść)

Wstaw zawartość przed każdym z dopasowanych elementów.

5 klon (bool)

Sklonuj dopasowane elementy DOM i wszystkie ich programy obsługi zdarzeń, a następnie wybierz klony.

6 klon ()

Sklonuj dopasowane elementy DOM i wybierz klony.

7 pusty ()

Usuń wszystkie węzły potomne z zestawu dopasowanych elementów.

8 html (val)

Ustaw zawartość html każdego dopasowanego elementu.

9 html ()

Pobierz zawartość HTML (innerHTML) pierwszego dopasowanego elementu.

10 insertAfter (selektor)

Wstaw wszystkie dopasowane elementy po innym, określonym zestawie elementów.

11 insertBefore (selektor)

Wstaw wszystkie dopasowane elementy przed inny, określony zestaw elementów.

12 poprzedzać (treść)

Dołącz zawartość do wnętrza każdego dopasowanego elementu.

13 prependTo (selektor)

Dołącz wszystkie dopasowane elementy do innego, określonego zestawu elementów.

14 usunąć (wyr)

Usuwa wszystkie dopasowane elementy z DOM.

15 replaceAll (selektor)

Zastępuje elementy dopasowane przez określony selektor dopasowanymi elementami.

16 replaceWith (zawartość)

Zastępuje wszystkie dopasowane elementy określonymi elementami HTML lub DOM.

17 tekst (val)

Ustaw zawartość tekstową wszystkich dopasowanych elementów.

18 tekst ()

Uzyskaj połączoną zawartość tekstową wszystkich dopasowanych elementów.

19 wrap (elem)

Zawiń każdy dopasowany element określonym elementem.

20 wrap (html)

Otocz każdy dopasowany element określoną treścią HTML.

21 wrapAll (elem)

Zawiń wszystkie elementy w dopasowanym zestawie w jeden element opakowujący.

22 wrapAll (html)

Zawiń wszystkie elementy w dopasowanym zestawie w jeden element opakowujący.

23 wrapInner (elem)

Zawiń wewnętrzną zawartość podrzędną każdego dopasowanego elementu (w tym węzłów tekstowych) elementem DOM.

24 wrapInner (html)

Zawiń wewnętrzną zawartość podrzędną każdego dopasowanego elementu (w tym węzłów tekstowych) strukturą HTML.