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