Metode DOM Traversing Pada JQuery? Berikut Contoh Nya
jQuery adalah alat yang sangat powerfull yang menyediakan berbagai metode traversal DOM untuk membantu memilih elemen dalam dokumen secara acak ataupun dalam metode sekuensial.
Sebagian besar Metode Traversal DOM tidak memodifikasi objek jQuery dan mereka hanya digunakan untuk menyaring elemen dari dokumen berdasarkan kondisi tertentu.
Menemukan Elements dengan index
Perhatikan dokumen HTML sederhana dengan konten berikut −
Contoh
Contoh berikut ini adalah kode sederhana yang menambahkan warna pada daftar item kedua.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<html><head><title>Contoh JQuery</title><script type = "text/javascript"<script type = "text/javascript" language = "javascript">$(document).ready(function() {$("li").eq(2).addClass("selected");});</script><style>.selected { color:red; }</style></head><body><div><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li><li>list item 6</li></ul></div></body></html> |
Memfilter Elements
Method filter( selector ) dapat digunakan untuk memfilter elemen tertentu. Selector dapat ditulis menggunakan syntax selector.
Contoh
Berikut ini adalah contoh sederhana untuk bekerja pada properti warna pada list yang mempunyai class middle −
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<html><head><title>Contoh JQuery</title><script type = "text/javascript"<script type = "text/javascript" language = "javascript">$(document).ready(function() {$("li").filter(".middle").addClass("selected");});</script><style>.selected { color:red; }</style></head><body><div><ul><li class = "top">list item 1</li><li class = "top">list item 2</li><li class = "middle">list item 3</li><li class = "middle">list item 4</li><li class = "bottom">list item 5</li><li class = "bottom">list item 6</li></ul></div></body></html> |
Menemukan Descendant Elements
Method find( selector ) dapat digunakan untuk menemukan semua elemen descendant dari elemen jenis tertentu.
Contoh
Contoh berikut adalah memilih semua elemen <span> yang tersedia dalam berbagai <p> elemen −
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<html><head><title>Contoh JQuery</title><script type = "text/javascript"<script type = "text/javascript" language = "javascript">$(document).ready(function() {$("p").find("span").addClass("selected");});</script><style>.selected { color:red; }</style></head><body><p>This is 1st paragraph and <span>THIS IS RED</span></p><p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p></body></html> |
JQuery DOM Filter Methods
Tabel berikut berisi daftar ke metode yang dapat Anda gunakan untuk memfilter berbagai elemen dari daftar elemen DOM −
| S.N. | Method & Description |
| 1 | eq( index )Mengurangi set elemen yang cocok menjadi elemen tunggal. |
| 2 | filter( selector )Menghapus semua elemen yang tidak cocok dari set elemen yang cocok dengan selector tertentu. |
| 3 | filter( fn )Menghapus semua elemen yang tidak cocok dari set elemen yang cocok dengan fungsi tertentu. |
| 4 | is( selector )Memeriksa pilihan seleksi terhadap ekspresi tertentu dan mengembalikan nilai true, jika setidaknya satu elemen seleksi sesuai dengan pemilih yang diberikan. |
| 5 | map( callback )Translate a set of elements in JQuery object into another set of values in a jQuery array (which may, or may not contain elements). |
| 6 | not( selector )Menghapus elemen yang cocok dengan selector tertentu dari set elemen cocok. |
| 7 | slice( start, [end] )Memilih subset dari elemen yang cocok. |
JQuery DOM Traversing Methods
Tabel berikut adalah daftar ke metode yang dapat Anda gunakan untuk mencari berbagai elemen pada DOM −
| S.N. | Methods & Description |
| 1 | add( selector )Menambahkan elemen pada set elemen lain, sesuai dengan selector tertentu. |
| 2 | andSelf( )Menambahkan hasil seleksi sebelumnya pada pilihan saat ini. |
| 3 | children( [selector])Mendapatkan satu set elemen yang berisi semua children langsung dari set elemen yang cocok. |
| 4 | closest( selector )Mendapatkan satu set elemen yang mengandung elemen induk yang mendekati pemilih yang ditentukan, elemen awal termasuk. |
| 5 | contents( )Mencari semua node anak dalam elemen yang cocok (termasuk node teks), atau konten dokumen, jika elemen adalah iframe. |
| 6 | end( )Mengembalikan operasi terakhir, yang bersifat ‘merusak’, ke set elemen yang cocok ke keadaan sebelumnya. |
| 7 | find( selector )Mencari descendant elements yang sesuai dengan selector tertentu. |
| 8 | next( [selector] )Mendapatkan set elemen yang mengandung sibling selanjutnya, yang unik, untuk setiap elemen yang diberikan. |
| 9 | nextAll( [selector] )Menemukan semua elemen sibling setelah elemen terpilih.. |
| 10 | offsetParent( )Menghasilkan jQuery collection dengan posisi parent elemen yang pertama sesuai. |
| 11 | parent( [selector] )Mendapatkan parent langsung dari sebuah elemen. Jika memanggil satu set elemen, parent akan menghasilkan satu set direct parent elemen yang unik. |
| 12 | parents( [selector] )Menghasilkan satu set element yang mengandung ancestor unik dari set elemen yang cocok. |
| 13 | prev( [selector] )Mendapatkan set elemen yang mengandung sibling sebelumnya dari setiap elemen yang sesuai. |
| 14 | prevAll( [selector] )Menemukan semua elemen sibling Menemukan all sibling elements in front of the current element. |
| 15 | siblings( [selector] )Mendapatkan set elemen yang mengandung semua sibling unik dari setiap set elemen yang sesuai. |
Mengganti DOM Element
Method replaceWith( content ) dapat mengganti DOM elemen dengan elemen HTML/DOM tertentu.
Berikut adalah syntax nya −
selector.replaceWith( content )
Content adalah bisa berupa HTML atau teks simple.
Contoh
Contoh berikut mengganti division elemen dengan h1 −
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<html><head><title>Contoh JQuery</title><script type = "text/javascript"<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> |
Menghapus DOM Elements
Mungkin ada situasi dimana Anda ingin menghapus satu atau lebih elemen DOM dari dokumen. JQuery menyediakan dua metode untuk menangani situasi ini.
Method empty( ) menghapus seluruh child nodes dari set elemen, sedangkan method remove( expr ) menghapus semua elemen yang cocok dari DOM.
Berikut adalah syntax untuk method tersebut −
selector.remove( [ expr ])
or
selector.empty( )
Anda dapat melewatkan opsi parameter expr untuk memfilter set element yang akan dihilangkan.
Contoh
Berikut adalah contoh element yang dihilangkan ketika mereka di klik.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<html><head><title>Contoh JQuery</title><script type = "text/javascript"<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> |
Menyisipkan DOM Elements
Mungkin ada situasi ketika Anda ingin memasukkan satu element DOM baru atau lebih kedalam dokumen yang ada. JQuery menyediakan berbagai metode untuk memasukkan elemen di berbagai lokasi.
Method after( content ) menyisipkan content setelah elemen yang cocok, dan method before( content ) yang menyisipkan elemen yang cocok sebelumnya.
Berikut adalah syntax untuk method tersebut −
selector.after( content )
or
selector.before( content )
Content yang disisipkan bisa berupa HTML or simple text.
Contoh
Contoh berikut akan menyisipkan elemen <div> baru pada lokasi sebelum elemen yang diklik −
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<html><head><title>Contoh JQuery</title><script type = "text/javascript"<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> |
Manipulasi DOM Elements
Tabel berikut berisi daftar method untuk memanipulasi DOM elements-
| S.N. | Method & Description |
| 1 | after( content )Menyisipkan content setelah setiap element yang cocok. |
| 2 | append( content )Menambahkan content ke dalam setiap elemen yang cocok. |
| 3 | appendTo( selector )Menambahkan semua elemen yang cocok ke elemen tertentu yang lain. |
| 4 | before( content )Menyisipkan content ke lokasi sebelum setiap elemen yang cocok.. |
| 5 | clone( bool )Clone matched DOM Elements, and all their event handlers, and select the clones. |
| 6 | clone( )Clone matched DOM Elements and select the clones. |
| 7 | empty( )Menghilangkan nodes dari set elemen yang cocok. |
| 8 | html( val )Set content html ke setiap elemen yang cocok. |
| 9 | html( )Mendapatkan content html (innerHTML) dari elemen yang pertama kali ditemukan. |
| 10 | insertAfter( selector )Menyisipkan semua matched elements setelah set elemen tertentu. |
| 11 | insertBefore( selector )Menyisipkan semua elemen yang cocok sebelum set elemen tertentu. |
| 12 | prepend( content )Menambahkan di awal content, didalam setiap elemen yang cocok. |
| 13 | prependTo( selector )Menambahkan semua set elemen yang cocok, di awal content yang lain. |
| 14 | remove( expr )Menghilangkan semua elemen yang cocok dari DOM. |
| 15 | replaceAll( selector )Mengganti elemen-elemen yang cocok dengan selector tertentu, dari elemen yang cocok. |
| 16 | replaceWith( content )Mengganti semua elemen yang cocok dengan HTML atau DOM elemen tertentu. |
| 17 | text( val )Set content dengan teks tertentu, pada elemen yang cocok. |
| 18 | text( )Dapatkan isi teks dari seluruh elemen yang cocok. |
| 19 | wrap( elem )Bungkus elemen yang cocok dengan elemen tertentu. |
| 20 | wrap( html )Bungkun semua elemen dengan content HTML tertentu. |
| 21 | wrapAll( elem ), wrapAll( html )Bungkus semua elemen dalam set yang cocok, menjadi elemen dengan pembungkus tunggal. |
| 22 | wrapInner( elem ), wrapInner( html )Bungkus semua isi child yang memiliki elemen yang cocok (termasuk text nodes), dengan elemen DOM.
|
Di Edusoft Center Juga Ada Kursus JQuery loo … www.edusoftcenter.com
Info Selengkapnya Bisa
Office : 0271 745 2187
No XL : 08180 4542 586 (WA & Telegram Ada)
No Simpati : 082 22922 2121
atau
Bisa Langsung Registrasi Online lewat Formulir Online:
www.edusoftcenter.com