Manipulasi DOM jQuery
JQuery menyediakan metode untuk memanipulasi DOM dengan cara yang efisien. Anda tidak perlu menulis kode besar untuk mengubah nilai atribut elemen apa pun atau untuk mengekstrak kode HTML dari paragraf atau divisi.
JQuery menyediakan metode seperti .attr (), .html (), dan .val () yang bertindak sebagai getter, mengambil informasi dari elemen DOM untuk digunakan nanti.
Manipulasi Konten
Itu html( ) metode mendapatkan konten html (innerHTML) dari elemen pertama yang cocok.
Berikut adalah sintaks untuk metode tersebut -
selector.html( )Contoh
Berikut adalah contoh yang menggunakan metode .html () dan .text (val). Di sini .html () mengambil konten HTML dari objek dan kemudian metode .text (val) menetapkan nilai objek menggunakan parameter yang diteruskan -
<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>Ini akan menghasilkan hasil sebagai berikut -
Penggantian Elemen DOM
Anda dapat mengganti elemen DOM lengkap dengan HTML atau elemen DOM yang ditentukan. ItureplaceWith( content ) metode melayani tujuan ini dengan sangat baik.
Berikut adalah sintaks untuk metode tersebut -
selector.replaceWith( content )Di sini konten adalah apa yang Anda inginkan, bukan elemen asli. Ini bisa berupa HTML atau teks sederhana.
Contoh
Berikut adalah contoh yang akan menggantikan elemen pembagian dengan "<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>Ini akan menghasilkan hasil sebagai berikut -
Menghapus Elemen DOM
Mungkin ada situasi ketika Anda ingin menghapus satu atau lebih elemen DOM dari dokumen. JQuery menyediakan dua metode untuk menangani situasi tersebut.
Itu empty( ) metode menghapus semua node anak dari himpunan elemen yang cocok dimana sebagai metode remove( expr ) metode menghapus semua elemen yang cocok dari DOM.
Berikut adalah sintaks untuk metode tersebut -
selector.remove( [ expr ])
or
selector.empty( )Anda dapat mengirimkan parameter opsional expr untuk memfilter kumpulan elemen yang akan dihapus.
Contoh
Berikut ini adalah contoh di mana elemen dihapus segera setelah diklik -
<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>Ini akan menghasilkan hasil sebagai berikut -
Memasukkan Elemen DOM
Mungkin ada situasi ketika Anda ingin memasukkan satu atau lebih elemen DOM baru ke dalam dokumen Anda yang sudah ada. JQuery menyediakan berbagai metode untuk memasukkan elemen di berbagai lokasi.
Itu after( content ) metode masukkan konten setelah masing-masing elemen yang cocok dimana sebagai metode before( content ) metode menyisipkan konten sebelum setiap elemen yang cocok.
Berikut adalah sintaks untuk metode tersebut -
selector.after( content )
or
selector.before( content )Di sini konten adalah apa yang ingin Anda masukkan. Ini bisa berupa HTML atau teks sederhana.
Contoh
Berikut adalah contoh di mana <div> elemen disisipkan tepat sebelum elemen yang diklik -
<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>Ini akan menghasilkan hasil sebagai berikut -
Metode Manipulasi DOM
Tabel berikut mencantumkan semua metode yang dapat Anda gunakan untuk memanipulasi elemen DOM -
| Sr.No. | Metode & Deskripsi |
|---|---|
| 1 | setelah (konten) Sisipkan konten setelah setiap elemen yang cocok. |
| 2 | tambahkan (konten) Tambahkan konten ke bagian dalam setiap elemen yang cocok. |
| 3 | appendTo (selector) Tambahkan semua elemen yang cocok ke kumpulan elemen lain yang ditentukan. |
| 4 | sebelum (konten) Sisipkan konten sebelum setiap elemen yang cocok. |
| 5 | klon (bool) Klon Elemen DOM yang cocok, dan semua penangan acara mereka, dan pilih klon. |
| 6 | klon () Klon Elemen DOM yang cocok dan pilih klon. |
| 7 | kosong( ) Hapus semua node anak dari kumpulan elemen yang cocok. |
| 8 | html (val) Setel konten html dari setiap elemen yang cocok. |
| 9 | html () Dapatkan konten html (innerHTML) dari elemen pertama yang cocok. |
| 10 | insertAfter (selektor) Sisipkan semua elemen yang cocok satu per satu, kumpulan elemen yang ditentukan. |
| 11 | insertBefore (selektor) Sisipkan semua elemen yang cocok sebelum elemen lain yang ditentukan. |
| 12 | tambahkan (konten) Tambahkan konten ke bagian dalam setiap elemen yang cocok. |
| 13 | prependTo (selector) Tambahkan semua elemen yang cocok ke set elemen lain yang ditentukan. |
| 14 | hapus (expr) Menghapus semua elemen yang cocok dari DOM. |
| 15 | replaceAll (selector) Mengganti elemen yang cocok dengan selektor yang ditentukan dengan elemen yang cocok. |
| 16 | replaceWith (konten) Mengganti semua elemen yang cocok dengan HTML atau elemen DOM yang ditentukan. |
| 17 | teks (val) Atur konten teks dari semua elemen yang cocok. |
| 18 | teks () Dapatkan konten teks gabungan dari semua elemen yang cocok. |
| 19 | bungkus (elem) Bungkus setiap elemen yang cocok dengan elemen yang ditentukan. |
| 20 | bungkus (html) Bungkus setiap elemen yang cocok dengan konten HTML yang ditentukan. |
| 21 | wrapAll (elem) Gabungkan semua elemen dalam set yang cocok menjadi satu elemen pembungkus. |
| 22 | wrapAll (html) Gabungkan semua elemen dalam set yang cocok menjadi satu elemen pembungkus. |
| 23 | wrapInner (elem) Bungkus konten anak dalam dari setiap elemen yang cocok (termasuk node teks) dengan elemen DOM. |
| 24 | wrapInner (html) Bungkus konten anak dalam dari setiap elemen yang cocok (termasuk node teks) dengan struktur HTML. |