Sunday, June 12, 2022

Belajar jQuery - II [ jQuery DOM Manipulation ]

 

DOM (Document Object Model) adalah struktur element HTML yang terdapat di sebuah halaman. Menggunakan JavaScript, bisa memanipulasi element-element ini, seperti menambahkan element baru, menghapus element lama, mengubah nilainya, dll.

Mengambil Nilai HTML dengan jQuery

Metode pertama untuk mengambil nilai sebuah elemen HTML dengan jQuery adalah menggunakan method text(). Caranya cukup menambahkan method/fungsi text() ke jQuery Selector.

Berikut contoh penggunaannya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol").click(function() {
       var nilai = $("#paragraf").text();
       alert(nilai);
     })
  
   });
   </script>
</head>
<body>
<p id="paragraf">
   Sedang belajar <em>jQuery</em>
</p>
<button id="tombol">Ambil Nilai</button>
</body>
</html>

Untuk mengambil nilai teks yang ada didalam tag <p id=”paragraf”>, bisa menggunakan perintah $(“#paragraf”).text(). Selanjutnya nilai ini disimpan ke dalam variabel nilai, lalu ditampilkan dengan fungsi alert(nilai).

Jika men-klik tombol “Ambil Nilai” , hasilnya adalah: “Sedang belajar jQuery di Duniailkom…”. Perhatikan bahwa method text() akan menghapus semua tag HTML yang terdapat di dalam tag <p>, seperti tag <em> dan <b> yang juga berada di dalam paragraf tersebut.

Mengambil nilai HTML dengan method html() jQuery

Cara berikutnya untuk mengamnil nilai HTML dengan jQuery adalah menggunakan method html(). Penggunaannya sama persis dengan method text(). Bedanya, hasil dari method html() akan tetap mempertahankan tag HTML yang ada di dalam element HTML tersebut.

Menggunakan contoh yang sama, berikut hasil yang di dapat dengan method html():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol").click(function() {
       var nilai = $("#paragraf").html();
       alert(nilai);
     })
  
   });
   </script>
</head>
<body>
<p id="paragraf">
   Sedang belajar <em>jQuery</em>
</p>
<button id="tombol">Ambil Nilai</button>
</body>
</html>


Seperti yang terlihat, kali ini hasil nya adalah: “Sedang belajar <em>jQuery

Mengambil nilai form HTML dengan method val() jQuery

Baik method text() maupun html() sudah mencukupi untuk mengambil nilai yang ada disetiap element HTML. Tapi khusus untuk form, jQuery menyediakan method val(). Lihat contoh penggunaannya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol").click(function() {
       var nilai = $("#nama").val();
       alert(nilai);
     })
  
   });
   </script>
</head>
<body>
Nama: <input type="text" id="nama" value="">
<button id="tombol">Ambil Nilai</button>
</body>
</html>

Kali ini memiliki sebuah tag <input type=”text”>. Silahkan langsung anda klik tombol “Ambil Nilai”, atau ubah teks yang ada di dalam inputan form tersebut. Perintah $(“#nama”).val() akan menampilkan nilai apapun yang anda input ke dalam isian form tersebut.

Contoh objek form lain seperti <select>

Caranya sama persis, berikut contohnya:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol").click(function() {
       var nilai = $("#kota").val();
       alert(nilai);
     })
  
   });
   </script>
</head>
<body>
Pilih Kota:
<select id="kota" name="kota">
   <option value="jakarta">Jakarta</option>
   <option value="bandung">Bandung</option>
   <option value="bogor">Bogor</option>
</select>
<button id="tombol">Ambil Nilai</button>
</body>
</html>

Silahkan pilih salah satu nama kota, lalu klik tombol “Ambil Nilai”. Nilai yang ditampilkan berasal dari atribut value dari setiap tag <option>.

Jika menggunakan checkbox

Untuk checkbox perlu penyeleksian lebih lanjut, karena jika menggunakan method val() secara langsung, nilai form akan dikembalikan apapun kondisi checkbox (baik sudah dipilih maupun belum). Untuk mengatasi hal ini, bisa menggunakan selector khusus jQuery, yakni :checked.

Berikut contoh penggunannya:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
   
     $("#tombol").click(function() {
       var nilai1 = $("#keren:checked").val();
       var nilai2 = $("#ganteng:checked").val();
       var nilai3 = $("#cool:checked").val();
       alert(nilai1+' '+nilai2+' '+nilai3);
     })
   
   });
   </script>
</head>
<body>
Saya itu:
  <input type="checkbox" id="keren" value="Saya Keren"> Keren
  <input type="checkbox" id="ganteng" value="Saya Ganteng"> Ganteng
  <input type="checkbox" id="cool" value="Saya Cool"> Cool
<br><br>
  <button id="tombol">Ambil Nilai</button>
</body>
</html>

Disini memiliki 3 check box: Keren, Ganteng dan Cool. Ketika tombol Ambil Nilai di klik, akan dijalankan perintah berikut:

1
2
3
4
var nilai1 = $("#keren:checked").val();
var nilai2 = $("#ganteng:checked").val();
var nilai3 = $("#cool:checked").val();
alert(nilai1+' '+nilai2+' '+nilai3);

Artinya, variabel nilai1, nilai2 dan nilai3 akan berisi value dari checkbox hanya ketika kondisi checkbox tersebut dalam keadaan ter-checklist (perhatikan cara penulisan jQuery selector, #keren:checked).

Silahkan coba dari link codepen berikut:

Akan tetapi, sekarang muncul masalah baru. Ketika checkbox tidak terpilih, method val() akan mengembalikan nilai undefined. Ini terjadi karena selector :checked tidak menemukan element HTML yang ditulis (karena belum di check).

Untuk mengatasinya, cukup dengan menambahkan beberapa kondisi IF, dimana jika isi variabel nilai adalah undefined, lakukan sesuatu, misalnya mengosongkan variabel.

Berikut revisinya:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
 <script>
   $(document).ready(function() {
   
     $("#tombol").click(function() {
       var nilai1 = $("#keren:checked").val();
       var nilai2 = $("#ganteng:checked").val();
       var nilai3 = $("#cool:checked").val();
        
       if (nilai1==undefined) {nilai1="";}
       if (nilai2==undefined) {nilai2="";}
       if (nilai3==undefined) {nilai3="";}
        
       alert(nilai1+' '+nilai2+' '+nilai3);
     })
   
   });
  </script>
</head>
<body>
Saya itu:
  <input type="checkbox" id="keren" value="Saya Keren"> Keren
  <input type="checkbox" id="ganteng" value="Saya Ganteng"> Ganteng
  <input type="checkbox" id="cool" value="Saya Cool"> Cool
<br><br>
  <button id="tombol">Ambil Nilai</button>
</body>
</html>

Kali ini ketika tombol Ambil Nilai di klik, yang akan tampil hanyalah nilai checkbox yang sudah dipilih. 

Mengubah Nilai HTML dengan jQuery

Method text() dan html()

Untuk mengubah nilai elemen HTML, caranya sangat mirip dengan mengambil elemen. Bedanya, menyisipkan sebuah argumen ke dalam method text() dan html(). Lihat contohnya:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol").click(function() {
       $("#paragraf1").text("<b>#jQuery</b> is Amazing...");
       $("#paragraf2").html("<b>#jQuery</b> is Amazing...");
     })
  
   });
   </script>
</head>
<body>
<p id="paragraf1">
   Sedang belajar jQuery
</p>
<p id="paragraf2">
   Sedang belajar jQuery
</p>
<button id="tombol">Change!</button>
</body>
</html>

Dalam kode program diatas, memiliki 2 buah tag <p>, masing-masing dengan id paragraf1 dan paragraf2. Ketika tombol “Change!” di-klik, mengubah isi setiap paragraf dengan method text() dan html().

Jika method text() dan html() diisi dengan argumen, ini artinya ingin mengubah isi element HTML, bukan mengambil nilainya. Konsep seperti ini umum digunakan di dalam jQuery.

Kode:

$("#paragraf1").text("<b>#jQuery</b> is Amazing...");

Artinya, cari sebuah tag HTML dengan id=”paragraf1″, lalu ubah isi tag tersebut dengan string: “<b>#jQuery</b> is Amazing…”.

Begitu juga dengan perintah kedua:

$("#paragraf2").html("<b>#jQuery</b> is Amazing...");

Artinya, cari sebuah tag HTML dengan id=”paragraf2″, lalu ubah isi tag tersebut dengan string: “<b>#jQuery</b> is Amazing…”.

Seperti yang terlihat, method html() akan memproses tag HTML yang ada di dalam teks. Dalam contoh diatas, teks #jQuery akan menjadi tebal karena efek tag <b>. Sedangkan untuk method text(), teks akan ditampilkan apa adanya, dimana tag <b> dianggap sebagai teks biasa, bukan sebuah tag HTML.

Silahkan anda praktekkan langsung:

Cara Mengubah Nilai Form HTML dengan Method val()

Untuk form HTML, dapat mengubah nilai yang ada, atau tepatnya mengubah nilai atribut value dari objek form tersebut. Cara penggunaannya hampir sama dengan method text() dan html(), tapi kali ini kita menggunakan method val(). Berikut contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol").click(function() {
       $("#nama").val("Joko Sulistyo");
     })
  
   });
   </script>
</head>
<body>
Nama: <input type="text" id="nama">
<button id="tombol">Change!</button>
</body>
</html>

Ketika tombol Change! Di-klik, nilai dari tag <input type=”text”> akan diubah nilainya menjadi “Joko Sulistyo”.

Dengan menggabungkan cara mengambil dan mengubah nilai elemen HTML, bisa membuat sebuah kode program yang secara dinamis akan bertukar tergantung inputan user. Berikut contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol").click(function() {
       var nilai = $("#kotak_isian").val();
       $("#target").html(nilai);
     })
  
   });
   </script>
</head>
<body>
Input Text: <input type="text" id="kotak_isian">
<button id="tombol">Salin!</button>
<p id="target">placeholder...</p>
</body>
</html>

Ketika tombol Salin! di klik, perintah var nilai = $(“#kotak_isian”).val() digunakan untuk mengambil isi form, dan disimpan ke dalam variabel nilai. Variabel nilai ini kemudian dipindahkan ke dalam paragraf melalui perintah $(“#target”).html(nilai).

Silahkan ketik teks apa saja ke dalam form, lalu tekan tombol Salin!. Isian form tersebut akan tampil ke dalam paragraf dibawahnya.

Menambah Elemen HTML dengan jQuery

Method append() dan prepend() jQuery

Method append() dan prepend() bisa digunakan untuk menambah elemen HTML baru ke dalam kode HTML yang sudah ada. Method append() akan menambahkan elemen baru ke bagian akhir, sedangkan prepend() akan menambahkan elemen HTML baru ke bagian awal.

Yang perlu dicatat, kedua fungsi ini menambahkan element baru ke dalam selector yang dicari. Berikut contohnya:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol_app").click(function() {
       $("#box").append("<p>jQuery is Amazing...</p>");
     })
  
     $("#tombol_pre").click(function() {
       $("#box").prepend("<p>Learning jQuery...</p>");
     })
  
   });
   </script>
</head>
<body>
<div id="box">
   <h2>Sedang belajar jQuery </h2>
</div>
<button id="tombol_app">Append</button>
<button id="tombol_pre">Prepend</button>
</body>
</html>

Pada kode program diatas, saya memiliki sebuah tag <div> dengan id=”box”. Di dalamnya terdapat sebuah tag <h2>.

Ketika tombol “Append” di klik, akan dijalan perintah berikut:

$("#box").append("<p>jQuery is Amazing...</p>");

Ini maksudnya, tambahkan kode “<p>jQuery is Amazing…</p>” ke bagian akhir tag <div id=”box”>. Hasilnya adalah sebagai berikut:

1
2
3
4
<div id="box">
 <h2>Sedang belajar jQuery </h2>
 <p>jQuery is Amazing...</p>
</div>

Dapat dilihat bahwa, element <p> akan ditambahkan ke bagian akhir di dalam tag <div id=”box”>. Hasil ini akan mudah dilihat jika mengaktifkan Web Developer Tools dari web browser, seperti gambar berikut:

Begitu juga ketika tombol “Prepend” di klik, perintah:

1
$("#box").prepend("<p>Learning jQuery...</p>");

Akan menambah sebuah paragraf baru ke dalam tag <div id=”box”>, pada posisi paling awal. Berikut hasil yang di dapat:

1
2
3
4
<div id="box">
  <p>Learning jQuery...</p>
  <h2>Sedang belajar jQuery </h2>
</div>

Silahkan dicoba sendiri:

Penggunaan Method after() dan before() jQuery

Method after() dan before() jQuery sebenarnya sangat mirip dengan append() dan prepend(). Bedanya terletak di posisi di mana element baru akan ditambahkan. Method after() dan before() akan menambahkan elemen baru di luar jQuery Selector.

Agar lebih jelas, mari jalankan kode yang sama dengan sebelumnya, dan hanya merubah method append() menjadi after() dan prepend() menjadi before():

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol_app").click(function() {
       $("#box").after("<p>jQuery is Amazing...</p>");
     })
  
     $("#tombol_pre").click(function() {
       $("#box").before("<p>Learning jQuery...</p>");
     })
  
   });
   </script>
</head>
<body>
<div id="box">
   <h2>Sedang belajar jQuery</h2>
</div>
<button id="tombol_app">After</button>
<button id="tombol_pre">Before</button>
</body>
</html>

Jika menjalankan kode diatas, hasilnya tampak sama persis seperti kode program sebelumnya. Tapi method after() dan before() ini akan menambahkan elemen baru di sisi luar.

Ketika tombol “After” di klik, perintah berikut akan dijalankan:

$("#box").after("<p>jQuery is Amazing...</p>");

Hasilnya adalah sebagai berikut:

1
2
3
4
<div id="box">
  <h2>Sedang belajar jQuery</h2>
</div>
<p>jQuery is Amazing...</p>

Perhatikan beda antara method append() dengan after(). Perintah after() akan menampatkan tag <p> disisi luar, yakni setelah tag <div id=”box”>, bukan di dalam tag <div id=”box”> sebagaimana method append().

Begitu juga dengan method before(), hasilnya adalah sebagai berikut:

1
2
3
4
<p>Learning jQuery...</p>
<div id="box">
  <h2>Sedang belajar jQuery</h2>
</div>

Method before() akan menampatkan tag <p> sebelum dan diluar <div id=”box”>.

Menambah Baris Tabel HTML dengan jQuery

Mengambil Nilai HTML dan Menambahkannya di Tempat Lain

Kode program yang akan dibuat yaitu bagaimana cara mengisi tabel dengan element yang digenerate dari jQuery. Berikut tampilan akhir yang inginkan:


Seperti yang terlihat, terdapat sebuah form input dari tag <input type=”text”>, sebuah tombol “Tambah Kota”, dan sebuah Tabel yang berisi nama-nama kota.

Cara membuat tabel

Pertama, ketika tombol di klik, ambil nilai form. Ini bisa dilakukan menggunakan method val() jQuery. Simpan nilai ini ke dalam sebuah variabel. Selanjutnya, nilai ini ditambahkan ke dalam tabel menggunakan method append(). Tentu saja juga harus menambahkan tag-tag yang diperlukan seperti <tr> dan <td> yang merupakan tag HTML untuk membuat sebuah baris tabel.

Berikut kode lengkap yang saya gunakan:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tambah").click(function() {
       var nilai = $("#nama_kota").val();
       var baris_baru = "<tr><td>"+nilai+"</td></tr>";
       $("#tabel_kota").append(baris_baru);
     })
  
   });
   </script>
   <style>
   table {
     border-collapse:collapse;
     border-spacing:0;    
     border:1px black solid;
     margin-top: 20px;
   }
   th, td {
     padding:5px 10px;
     border:1px black solid;}
   th{
     background-color: #87F97B;
   }
   tr:nth-child(even) {
     background-color: #EDEDED;
   }
   tr:nth-child(odd) {
     background-color: #FFF;
   }
   </style>
</head>
<body>
Kota: <input type="text" id="nama_kota" value="Surabaya">
<button id="tambah">Tambah Kota</button>
<table id="tabel_kota">
   <tr><th>Nama Kota</th></tr>
   <tr><td>Bandung</td></tr>
   <tr><td>Jakarta</td></tr>
   <tr><td>Makasar</td></tr>
   <tr><td>Medan</td></tr>
</table>
</body>
</html>

Kode diatas sedikit panjang karena menambahkan beberapa baris kode CSS untuk membuat tampilan tabel lebih menarik.

Proses pemindahan nilai form ke dalam tabel sendiri hanya membutuhkan 3 baris:

1
2
3
var nilai = $("#nama_kota").val();
var baris_baru = "<tr><td>"+nilai+"</td></tr>";
$("#tabel_kota").append(baris_baru);
  • Baris 1: Ambil nilai form, simpan ke variabel nilai.
  • Baris 2: Tambahkan tag <tr> dan <td> yang diperlukan untuk membuat baris tabel. menggunakan operator ‘ + ’ yang di dalam JavaScript adalah operator penyambungan string. Simpan semuanya ke dalam variabel baris_baru.
  • Baris 3: Tambahkan isi variabel baris_baru ke dalam tabel menggunakan method append().

Silahkan dicoba sendiri dengan link codepen dibawah ini:


Menghapus Elemen HTML dengan jQuery

method remove() jQuery

Method remove() jQuery untuk menghapus element HTML yang sudah tampil di halaman saat ini. Method remove() akan menghapus tag saat ini, beserta seluruh isinya.

Lihat contoh cara menghapus element HTML dengan method remove() jQuery:

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
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#hapus_html").click(function() {
       $("#list_html").remove();
     })
  
     $("#hapus_css").click(function() {
       $("#list_css").remove();
     })
  
     $("#hapus_php").click(function() {
       $("#list_php").remove();
     })
  
     $("#hapus_all").click(function() {
       $("#belajar").remove();
     })
 
   });
   </script>
</head>
<body>
<button id="hapus_html">Hapus HTML</button>
<button id="hapus_css">Hapus CSS</button>  
<button id="hapus_php">Hapus PHP</button>
<button id="hapus_all">Hapus Semua!</button>  
<ul id="belajar">
   <li id="list_html">Belajar HTML </li>
   <li id="list_css">Belajar CSS </li>
   <li id="list_php">Belajar PHP </li>
   <li id="list_js">Belajar JavaScript </li>
   <li id="list_mysql">Belajar MySQL </li>
</ul>
</body>
</html>


Disini memiliki 4 tombol dan sebuah list dengan 5 tag <li>. Baik tag <ul> maupun tag <li> dari list memiliki atribut id masing-masing.

bisa mencobanya sendiri dari link codepen dibawah ini:

Ketika tombol Hapus HTML di klik, perintah: $(“#list_html”).remove() akan dijalankan. Akibatnya, list <li id=”list_html”>Belajar HTML </li> akan terhapus. List yang tersisa akan mengisi element yang sudah hilang ini (naik ke atas). Demikian juga yang terjadi ketika tombol Hapus CSS dan Hapus PHP di klik.

Tombol Hapus Semua! Tombol ini akan menjalankan perintah $(“#belajar”).remove(). Elemen HTML yang memiliki id=”belajar” adalah tag <ul>. Element ini merupakan ‘parent element’ dari seluruh tag <li>. Dengan demikian, semua list akan ikut terhapus.

Menghapus Elemen HTML dengan Method empty()

Selain menggunakan method remove(), jQuery juga menyediakan method empty() untuk menghapus sebuah element HTML. 

Method empty() hanya menghapus isi dari sebuah element, sedangkan element itu sendiri tidak ikut dihapus. Hal ini berbeda dengan method remove() yang menghapus isi element beserta element itu sendiri.

Untuk melihat contoh penggunaan method empty(), perhatikan kode program dibawah ini:

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
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tambah").click(function() {
       $("#belajar").append("<li>Belajar jQuery </li>");
     })
  
     $("#kosong").click(function() {
       $("#belajar").empty();
    })
  
     $("#hapus").click(function() {
       $("#belajar").remove();
     })
  
   });
   </script>
</head>
<body>
<button id="tambah">Tambah jQuery</button>
<button id="kosong">Kosongkan</button>  
<button id="hapus">Hapus Semua</button>  
<ul id="belajar">
   <li id="list_html">Belajar HTML </li>
   <li id="list_css">Belajar CSS </li>
   <li id="list_php">Belajar PHP </li>
   <li id="list_js">Belajar JavaScript </li>
   <li id="list_mysql">Belajar MySQL </li>
</ul>
</body>
</html>

Kali ini memodifikasi sedikit kode program sebelumnya. Sekarang terdapat 3 tombol.

Tombol pertama: Tambah jQuery akan menjalankan perintah:

$("#belajar").append("<li>Belajar jQuery</li>");

Artinya, ketika tombol ini di-klik, akan menambah sebuah elemen baru di bagian bawah list. Cara Menambah Elemen HTML baru dengan jQuery.

Tombol kedua: Kosongkan akan menjalankan perintah:

$("#belajar").empty();

Artinya, seluruh isi list akan dihapus. Tetapi tag <ul> tersebut sebenarnya masih ada. Untuk membuktikannya, klik kembali tombol Tambah jQuery, list baru akan kembali muncul.

Akan tetapi, ketika tombol Hapus Semua di klik, perintah yang dijalankan adalah:

$("#belajar").remove();

Perintah ini akan menghapus seluruh list, beserta tag <ul> nya. Dengan demikian, tag <ul> tidak bisa lagi diakses. Ketika menambahkan element baru dengan men-klik tombol Tambah jQuery, tidak akan terjadi apa-apa. Ini karena tag <ul> tempat dimana list berada sudah hilang.

Mengubah Atribut HTML dengan jQuery

Untuk “berurusan” dengan atribut elemen HTML, jQuery menyediakan method attr(). Method ini bisa diisi dengan 1 atau 2 argumen. Jika diisi dengan 1 argumen, berarti ingin mengambil atribut dari element tersebut.

Sebagai contoh, untuk mengambil nilai atribut title dari sebuah tag HTML yang memiliki id=”paragraf”, saya bisa menulis kode jQuery berikut:

var nilai = $("# paragraf ").attr("title");

Sekarang, variabel nilai akan berisi nilai atribut title.

Contoh berikut ini:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#ambil").click(function() {
       var nilai1 = $("a[title]").attr("href");
       var nilai2 = $("a[title]").attr("title");
       var nilai3 = $("a[title]").attr("target");
       $("#tekape").html(nilai1+"<br>"+nilai2+"<br>"+nilai3);
     })
  
   });
   </script>
</head>
<body>
<h2>Belajar jQuery</h2>
<a href="https://tutorial-belajar-jquery-bagi-pemula/"
     title="Belajar jQuery yuk bro..."
     target="_blank" >
     Tutorial jQuery
</a>
<br><br>
  <button id="ambil">Ambil Atribut</button>
  <p id="tekape"></p>
</body>
</html>

Dalam halaman ini memiliki sebuah link yang dibuat dari tag <a>. Perhatikan link ini memiliki 3 atribut: href, title, dan target. Dibawahnya terdapat sebuah tombol Ambil Atribut yang dibuat dengan tag <button id=”ambil”>. Element terakhir adalah sebuah paragraf kosong yang memiliki id=”tekape”.

Disini ingin mengambil ketiga atribut dari tag <a>, lalu menampilkan hasilnya ke <p id=”tekape”>. Ini saya lakukan dengan 4 baris berikut:

1
2
3
4
var nilai1 = $("a[title]").attr("href");
var nilai2 = $("a[title]").attr("title");
var nilai3 = $("a[title]").attr("target");
$("#tekape").html(nilai1+"<br>"+nilai2+"<br>"+nilai3);

Perhatikan bagaimana cara mengambil nilai setiap atribut. Variabel nilai1, nilai2 dan nilai3 akan berisi nilai atribut href, title dan target dari tag <a>.

Untuk jQuery selector tag <a>, saya mencarinya dengan menggunakan “a[title]”. Di dalam CSS, selector seperti ini dikenal sebagai atribut selector. Artinya, mencari sebuah tag <a> yang memiliki atribut title. Karena di halaman saat ini hanya terdapat 1 tag <a>, tag inilah yang akan diambil. Ini hanya sekedar alternatif dari atribut id yang selalu digunakan hingga saat ini.

Terakhir menggunakan method html() untuk memindahkan ketiga nilai atribut kedalam tag <p id=”tekape”></p>.

Silahkan dicoba melalui link codepen dibawah ini:

Mengubah dan Menambahkan Atribut HTML dgn jQuery

Gunakan method attr(). Tapi kali ini dengan menulis 2 argumen. Argumen pertama berfungsi sebagai nama atribut, sedangkan argumen kedua adalah nilai dari atribut tersebut.

Sebagai contoh, untuk mengubah atau menambahkan atribut title= “Sedang belajar jQuery” ke dalam elemen HTML dengan id=”paragraf”, tulis kode berikut:

$("#paragraf").attr("title"," Sedang belajar jQuery");

Lihat contohnya:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
    $("#tambah").click(function() {
     $("#link_jquery").attr("href",
       "https://www.situs.com/tutorial-belajar-jquery-bagi-pemula/");
     $("#link_jquery").attr("title","Belajar jQuery yuk bro...");
    })
  
   });
   </script>
</head>
<body>
<h2>Belajar jQuery </h2>
<p>
   <a id="link_jquery">Tutorial jQuery </a>
</p>
<button id="tambah">Tambah Atribut</button>
</body>
</html>

Pada saat halaman HTML pertama kali dijalankan, tag <a> tidak memiliki atribut apa-apa selain id=”link_jquery”. Tag <a> ini belum berupa link, karena tidak memiliki atribut href.

Ketika tombol Tambah Atribut di klik,  akan menambah 2 buah atribut baru dengan perintah berikut:

1
2
3
$("#link_jquery").attr("href",
  "https://www.dsitus.com/tutorial-belajar-jquery-bagi-pemula/");
$("#link_jquery").attr("title","Belajar jQuery yuk bro...");

Sekarang, tag <a id=”link_jquery”> telah mendapat atribut href dan title. Artinya, tag <a> tersebut berubah menjadi sebuah link ke duniailkom. Anda bisa melihat efeknya dengan perubahan warna font menjadi biru dan memiliki garis bawah, persis seperti link normal.

Mengubah Atribut HTML dengan jQuery

Mengambil Atribut HTML dengan jQuery

Untuk “berurusan” dengan atribut elemen HTML, jQuery menyediakan method attr(). Method ini bisa diisi dengan 1 atau 2 argumen. Jika diisi dengan 1 argumen, berarti ingin mengambil atribut dari element tersebut.

Sebagai contoh, untuk mengambil nilai atribut title dari sebuah tag HTML yang memiliki id=”paragraf”, tulis kode jQuery berikut:

var nilai = $("# paragraf ").attr("title");

Sekarang, variabel nilai akan berisi nilai atribut title.

Contoh berikut ini:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#ambil").click(function() {
       var nilai1 = $("a[title]").attr("href");
       var nilai2 = $("a[title]").attr("title");
       var nilai3 = $("a[title]").attr("target");
       $("#tekape").html(nilai1+"<br>"+nilai2+"<br>"+nilai3);
     })
  
   });
   </script>
</head>
<body>
<h2>Belajar jQuery</h2>
<a href="https://tutorial-belajar-jquery-bagi-pemula/"
     title="Belajar jQuery yuk bro..."
     target="_blank" >
     Tutorial jQuery
</a>
<br><br>
  <button id="ambil">Ambil Atribut</button>
  <p id="tekape"></p>
</body>
</html>

Dalam halaman ini memiliki sebuah link yang dibuat dari tag <a>. Perhatikan link ini memiliki 3 atribut: href, title, dan target. Dibawahnya terdapat sebuah tombol Ambil Atribut yang dibuat dengan tag <button id=”ambil”>. Element terakhir adalah sebuah paragraf kosong yang memiliki id=”tekape”.

Disini ingin mengambil ketiga atribut dari tag <a>, lalu menampilkan hasilnya ke <p id=”tekape”>. Lakukan dengan 4 baris berikut:

1
2
3
4
var nilai1 = $("a[title]").attr("href");
var nilai2 = $("a[title]").attr("title");
var nilai3 = $("a[title]").attr("target");
$("#tekape").html(nilai1+"<br>"+nilai2+"<br>"+nilai3);

Perhatikan bagaimana cara mengambil nilai setiap atribut. Variabel nilai1, nilai2 dan nilai3 akan berisi nilai atribut href, title dan target dari tag <a>.

Untuk jQuery selector tag <a>, mencarinya dengan menggunakan “a[title]”. Di dalam CSS, selector seperti ini dikenal sebagai atribut selector. Artinya, mencari sebuah tag <a> yang memiliki atribut title. Karena di halaman saat ini hanya terdapat 1 tag <a>, tag inilah yang akan diambil. Ini hanya sekedar alternatif dari atribut id yang selalu kita gunakan hingga saat ini.

Terakhir menggunakan method html() untuk memindahkan ketiga nilai atribut kedalam tag <p id=”tekape”></p>.

Silahkan dicoba melalui link codepen dibawah ini:

Mengubah dan Menambahkan Atribut HTML dgn jQuery

Sebagai contoh, untuk mengubah atau menambahkan atribut title= “Sedang belajar jQuery” ke dalam elemen HTML dengan id=”paragraf”, tulis kode berikut:

$("#paragraf").attr("title"," Sedang belajar jQuery");

Lihat contoh :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
    $("#tambah").click(function() {
     $("#link_jquery").attr("href",
       "https://tutorial-belajar-jquery-bagi-pemula/");
     $("#link_jquery").attr("title","Belajar jQuery yuk bro...");
    })
  
   });
   </script>
</head>
<body>
<h2>Belajar jQuery Duniailkom</h2>
<p>
   <a id="link_jquery">Tutorial jQuery</a>
</p>
<button id="tambah">Tambah Atribut</button>
</body>
</html>

Pada saat halaman HTML pertama kali dijalankan, tag <a> tidak memiliki atribut apa-apa selain id=”link_jquery”. Tag <a> ini belum berupa link, karena tidak memiliki atribut href.

Ketika tombol Tambah Atribut di klik, akan menambah 2 buah atribut baru dengan perintah berikut:

1
2
3
$("#link_jquery").attr("href",
  "https://tutorial-belajar-jquery-bagi-pemula/");
$("#link_jquery").attr("title","Belajar jQuery yuk bro...");

Sekarang, tag <a id=”link_jquery”> telah mendapat atribut href dan title. Artinya, tag <a> tersebut berubah menjadi sebuah link. Bisa melihat efeknya dengan perubahan warna font menjadi biru dan memiliki garis bawah, persis seperti link normal.

Menambahkan Kode CSS Dinamis dgn jQuery

Mengambil Nilai Property CSS Dengan jQuery

Kemampuan memanipulasi kode CSS secara dinamis setelah halaman tampil membuka banyak kemungkinan. Hal bisa merancang berbagai interaksi menarik, hal ini hanya bisa dibuat menggunakan JavaScript. Dan dengan jQuery membuatnya menjadi sangat mudah.

jQuery menyediakan method css() yang bisa digunakan untuk mengambil dan mengubah property CSS untuk sebuah elemen HTML. Sama seperti method jQuery lain, method css() bisa ditulis dengan 1 atau 2 argumen. Jika ditulis dengan 1 argumen, artinya ingin mengambil nilai property CSS elemen tersebut.

Sebagai contoh, jika ingin mengetahui apa warna background dari sebuah elemen HTML dengan id=”box”, tulis dengan:

var nilai = $("#box").css("background-color");

Sekarang, variabel nilai akan berisi kode warna RGB seperti rgb(255, 192, 203). Langsung praktek dengan kode program berikut:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#ambil").click(function() {
       var nilai1 = $("#box").css("width");
       var nilai2 = $("#box").css("height");
       var nilai3 = $("#box").css("background-color");
       $("#tekape").html(nilai1+"<br>"+nilai2+"<br>"+nilai3);
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<div id="box"></div>
<br>
<button id="ambil">Ambil Property CSS</button>
<p id="tekape"></p>
</body>
</html>

Dalam halaman ini memiliki sebuah kotak yang dibuat dari tag <div id=”box”></div>. Kotak ini diwarnai dengan CSS melalui selector #box. Mengatur lebar (width), tinggi (height), warna background (backround-color), serta efek garis tepi (border) dari CSS. Inilah yang nantinya akan menggunakan jQuery.

Ketika tombol Ambil Property CSS diklik, kode program berikut akan dijalankan:

1
2
3
4
var nilai1 = $("#box").css("width");
var nilai2 = $("#box").css("height");
var nilai3 = $("#box").css("background-color");
$("#tekape").html(nilai1+"<br>"+nilai2+"<br>"+nilai3);

Menggunakan method css() untuk mengambil nilai property CSS dari $(“#box”). Property yang akan diambil adalah width, height dan background-color. Hasilnya kemudian disimpan ke dalam variabel nilai1, nilai2 dan nilai3. Pada baris terakhir seluruh nilai ini ditampilkan dengan menggunakan method html() ke dalam tag <p id=”tekape”>.

Yang harus perlu diperhatikan, nilai argumen dari method css() adalah property CSS. Jika salah tulis atau property tersebut tidak di-set dari CSS, hasilnya akan kosong.

Silahkan anda praktek dari link codepen dibawah ini:

Mengubah Nilai Property CSS Dengan jQuery

Method css() jQuery juga bisa digunakan untuk mengubah nilai property CSS. Misalkan dengan men-klik sebuah tombol, bisa mengubah warna background atau ukuran dari sebuah elemen HTML.

Jika ingin mengubah tinggi sebuah elemen HTML dengan id=”box” menjadi 120 pixel, gunakan kode berikut:

$("#box").css("height","120px");

Berikut prakteknya:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tukar").click(function() {
       $("#box").css("width","500px");
       $("#box").css("height","120px");
       $("#box").css("background-color","yellow");
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<div id="box"></div>
<br>
<button id="tukar">Change!</button>
</body>
</html>

Disini memiliki box yang sama dengan sebelumnya. Akan tetapi, ketika tombol Change! Di-klik, yang akan dijalankan adalah kode program berikut:

1
2
3
$("#box").css("width","500px");
$("#box").css("height","120px");
$("#box").css("background-color","yellow");

Ketika baris kode program jQuery ini artinya, akan mengganti property CSS untuk element id=”box” agar memiliki nilai:

1
2
3
width: 500px;
height: 120px;
background-color: yellow;

Karena nilai-nilai ini berbeda dari kode CSS awal box, akan tampak perubahan drastis. Box akan membesar dan berwarna kuning.

Mengubah Class CSS elemen HTML dgn jQuery

Menambah Class CSS dengan jQuery

jQuery menyediakan method addClass() untuk menambahkan sebuah class CSS baru ke dalam element HTML saat ini. Sebagai contoh, misalkan memiliki sebuah tag HTML berikut:

<div id="box" class="satu"></div>

Jika menjalankan kode:

$("#box").addClass("dua");

Hasilnya akan menjadi:

<div id="box" class="satu dua"></div>

Perhatikan di dalam atribut class, sudah bertambah 1 class CSS lagi. Agar terlihat perubahan, tentunya sudah mempersiapkan kode CSS untuk class satu dan class dua.

Berikut contoh praktek penggunaan method addClass jQuery:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tambah_warna").click(function() {
       $("#box").addClass("add_warna");
     })
  
     $("#tambah_border").click(function() {
       $("#box").addClass("add_border");
     })
  
     $("#tambah_bayang").click(function() {
       $("#box").addClass("add_bayang");
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
   }
   .add_warna {
     background-color: pink;
   }
   .add_border {
     border: 2px solid black;
   }
   .add_bayang {
     box-shadow: 7px 7px silver;
   }
   </style>
</head>
<body>
  <div id="box"></div>
  <br>
  <button id="tambah_warna">Tambah Warna</button>
  <button id="tambah_border">Tambah Border</button>
  <button id="tambah_bayang">Tambah Bayang</button>
</body>
</html>

Jika menjalankan kode diatas, akan tampil 3 buah tombol: Tambah Warna, Tambah Border dan Tambah Bayang. Diatas ketiga tombol ini sebenarnya terdapat sebuah tag <div> dengan lebar 300px dan tinggi 80px. Karena tidak diwarnai, box ini tidak tampak.

Di dalam kode CSS, dipersiapkan 3 buah class selector, yakni .add_warna, .add_border dan .add_bayang. Ketiga selector ini memiliki property yang berbeda-beda.

Ketika tombol Tambah Warna di-klik, kode jQuery berikut akan dijalankan:

$("#box").addClass("add_warna");

Artinya, tambahkan sebuah class CSS dengan nama “add_warna” ke dalam tag HTML yang memiliki id=”#box”. Sehingga tag <div id=”#box”> akan berubah jadi:

<div class="add_warna" id="box"></div>

Karena di dalam selector .add_warna telah ditulis property background-color: pink, box langsung berwarna pink. Efek penambahan ini akan mudah dilihat jika mengaktifkan fitur Web Developer Tools dari web browser, seperti tampilan berikut:


Tombol kedua, Tambah Border akan menjalankan kode jQuery:

$("#box").addClass("add_border");

Hasilnya, kotak box akan memiliki bingkai hitam. Sesuai dengan isi property CSS di dalam class sector .add_border.

Terakhir, tombol Tambah Bayang akan menambahkan class .add_bayang, sehingga box akan memiliki efek bayangan dari property box-shadow CSS3: box-shadow: 7px 7px silver.

Menghapus Class CSS dengan jQuery

Jika jQuery menyediakan method addClass() untuk menambahkan class CSS, maka juga tersedia method removeClass() yang bisa digunakan untuk menghapus class CSS. 

Sebagai contoh, jika di dalam kode HTML memiliki tag berikut:

<div id="box" class="satu dua tiga"></div>

Maka ketika menjalankan kode:

$("#box").removeClass("tiga");

Class tiga akan dihapus dari kode HTML, menjadi:

<div id="box" class="satu dua"></div>

Berikut praktek dari penggunaan method removeClass untuk menghapus class CSS dengan jQuery:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#hapus_warna").click(function() {
       $("#box").removeClass("add_warna");
     })
  
     $("#hapus_border").click(function() {
       $("#box").removeClass("add_border");
     })
  
     $("#hapus_bayang").click(function() {
       $("#box").removeClass("add_bayang");
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
   }
   .add_warna {
     background-color: pink;
   }
   .add_border {
     border: 2px solid black;
   }
   .add_bayang {
     box-shadow: 7px 7px silver;
   }
   </style>
</head>
<body>
<div id="box" class="add_warna add_border add_bayang"></div>
<br>
<button id="hapus_warna">Hapus Warna</button>
<button id="hapus_border">Hapus Border</button>
<button id="hapus_bayang">Hapus Bayang</button>
</body>
</html>

Kode diatas adalah kebalikan dari contoh kode program sebelumnya. Disini menampilkan box lengkap dengan warna, border dan efek bayangan.

Ketika tombol Hapus Warna diklik, perintah berikut akan dijalankan:

$("#box").removeClass("add_warna");

Hasilnya warna box akan hilang. Ini karena property background-color: pink berada di dalam class add_warna. Jika class ini dihapus, warna box juga akan ikut terhapus. Begitu juga dengan tombol Hapus Border dan Hapus Bayang.

Mengenal Cara Penggunaan Method toggleClass jQuery

Selain method addClass() dan removeClass(), jQuery masih menyediakan 1 lagi method terkait class CSS, yakni toogleClass().

Method toggleClass() akan bergantian menambah dan menghapus class CSS. Jika saat ini class tidak ada, maka akan ditambahkan. Jika sudah ada, akan dihapus. Efeknya mirip dengan saklar: on atau off secara bergantian.

Lihat contoh prakteknya:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#warna").click(function() {
       $("#box").toggleClass("add_warna");
     })
  
     $("#border").click(function() {
       $("#box").toggleClass("add_border");
     })
  
     $("#bayang").click(function() {
       $("#box").toggleClass("add_bayang");
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
   }
   .add_warna {
     background-color: pink;
   }
   .add_border {
     border: 2px solid black;
   }
   .add_bayang {
     box-shadow: 7px 7px silver;
   }
   </style>
</head>
<body>
<div id="box" class="add_warna add_border add_bayang"></div>
<br>
<button id="warna">Warna</button>
<button id="border">Border</button>
<button id="bayang">Bayang</button>
</body>
</html>

Silahkan klik beberapa kali tombol Warna, Warna pink akan bergantian muncul. Ini karena perintah:

$("#box").toggleClass("add_warna");

Akan bergantian menambah dan mengapus class add_warna. Hal yang sama juga berlaku untuk tombol Border dan Bayang. 

Mengubah Lebar & Tinggi HTML dgn jQuery

Lebar dan Tinggi sebuah elemen HTML merupakan salah satu aspek yang sering diubah ketika membuat animasi, misalkan ketika sebuah tombol di-klik, panjang box akan bertambah atau berkurang.

Dengan jQuery, bisa menggunakan method width() dan height() untuk mengatur perubahan ini. Jika kedua method ini dipanggil tanpa argumen, berarti ingin mengambil nilai yang ada saat ini. Namun jika diisi dengan sebuah argumen, berarti ingin men-set lebar dan tinggi element tersebut.

Sebagai contoh,  tag HTML berikut:

<div id="box"></div>

Melalui CSS, box tersebut di set dengan property berikut:

#box {
  width: 300px;
  height: 80px;
}

Artinya, ketika halaman diproses pertama kali, box akan ditampilkan dengan lebar 300 pixel dan tinggi 80 pixel.

Ketika menjalankan kode jQuery ini:

var lebar_box = $("#box").width();

Variabel lebar_box akan berisi angka 300. Angka ini tidak lain merupakan lebar dari box tersebut. Nilai 300 ini dihitung berdasarkan pixel, yakni 300 pixel.

Begitu juga dengan method height(). Ketika menjalankan kode berikut:

var tinggi_box = $("#box").height();

Variabel tinggi_box akan berisi nilai 80, sesuai dengan property CSS.

Bagaimana dengan kode dibawah ini

$("#box").height(100);

Ini artinya, ingin men-set tinggi box menjadi 100 pixel, terlepas dari berapapun tinggi box saat ini.

Agar lebih mudah dipahami, mari masuk kepada contoh kasus. Dalam contoh berikut akan menggabungkan penggunaan method width() dan height() jQuery:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#kurangi_lebar").click(function() {
       var lebar_box = $("#box").width();
       $("#box").width(lebar_box - 10);
    })
  
     $("#kurangi_tinggi").click(function() {
       var tinggi_box = $("#box").height();
       $("#box").height(tinggi_box - 10);
     })
  
     $("#tambah_lebar").click(function() {
       var lebar_box = $("#box").width();
       $("#box").width(lebar_box + 10);
     })
  
     $("#tambah_tinggi").click(function() {
       var tinggi_box = $("#box").height();
       $("#box").height(tinggi_box + 10);
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
  <button id="kurangi_lebar">Kurangi Lebar</button>
  <button id="kurangi_tinggi">Kurangi Tinggi</button>
  <button id="tambah_lebar">Tambah Lebar</button>
  <button id="tambah_tinggi">Tambah Tinggi</button>
<br><br>
  <div id="box"></div>
</body>
</html>

Disini memiliki 4 tombol: Kurangi Lebar, Kurangi Tinggi, Tambah Lebar dan Tambah Tinggi. Sesuai dengan nama tombol ini, ketika di klik akan mengubah lebar dan tinggi box pink yang berada di bawahnya. Silahkan dicoba sebentar dari link codepen di bawah ini:

Untuk mendapatkan efek seperti ini, diambil nilai lebar atau tinggi box saat ini, lalu ditambah atau dikurang sebanyak 10 pixel.

Ketika tombol Kurangi Lebar di klik. Ketika di-klik, kode jQuery berikut akan dijalankan:

var lebar_box = $("#box").width();
$("#box").width(lebar_box - 10);

Pada baris pertama, diambil lebar box saat ini dan menyimpannya ke dalam variabel lebar_box. Di baris kedua, nilai lebar_box ini  mengurangi 10 dan menjadi argumen ke dalam method width(). Dengan demikian, setiap kode diatas dijalankan, lebar box akan terus berkurang sebanyak 10 pixel.

Pengertian Variabel $(this) dalam jQuery

Pengertian Variabel $(this) dalam jQuery

Di dalam bahasa pemrograman objek (seperti JavaScript), variabel this berfungsi sebagai referensi untuk objek saat ini. Sedangkan di dalam jQuery, selector $(this) berfungsi sebagai referensi untuk element HTML saat ini.

Sebagai contoh, sebuah box HTML dengan kode berikut:

<div id="box">Click Me!</div>

Jika ingin menambahkan event click pada tag tersebut. Di dalam jQuery, bisa membuatnya dengan kode program:

1
2
3
4
5
$("#box").click(function() {
    // kode program disini...
    // kode program disini...
    // kode program disini...
})

Kemudian bagaimana jika ingin agar warna background box tersebut berubah menjadi abu-abu (silver) saat di-klik, tambahkan kode berikut ke dalam event click :

1
2
3
$("#box").click(function() {
  $("#box").css("background-color","silver");
})

Gunakan method css() untuk menambahkan property CSS background-color: silver.

Kode diatas bisa juga bisa ditulis menjadi:

1
2
3
$("#box").click(function() {
  $(this).css("background-color","silver");
})

Perhatikan bagaimana mengubah selector jQuery $(“#box”).css() menjadi $(this).css(). Ini berarti ingin mengubah warna background-color untuk elemen HTML yang saat ini sedang aktif. Karena berada di dalam event click $(“#box”), artinya $(this) sama dengan $(“#box”).

Berikut contoh lengkap dari penjelasan ini:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
  $(document).ready(function() {
  
    $("#box").click(function() {
    $(this).html("Sudah di Klik");
    $(this).css("background-color","silver");
  })
  
});
</script>
<style>
  #box {
    width: 300px;
    height: 80px;
    background-color: pink;
    border: 2px solid black;
    line-height: 80px;
    text-align: center;
  }
</style>
</head>
<body>
  <h2>Belajar jQuery</h2>
  <div id="box">Click Me!</div>
</body>
</html>

Dalam kode program ini, dibuat event click pada box menggunakan selector $(this). Silahkan dicoba sendiri dengan men-klik box dibawah ini:

Dengan menggunakan selector $(this), bisa membuat kode program yang lebih efisien untuk berbagai selector sekaligus. Mari masuk ke contoh praktek selanjutnya:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#box1").click(function() {
       var lebar_box = $("#box1").width();
       var tinggi_box = $("#box1").height();
       $("#box1").width(lebar_box + 10);
       $("#box1").height(tinggi_box + 10);
     })
  
     $("#box2").click(function() {
       var lebar_box = $("#box2").width();
       var tinggi_box = $("#box2").height();
       $("#box2").width(lebar_box + 10);
       $("#box2").height(tinggi_box + 10);
     })
  
     $("#box3").click(function() {
       var lebar_box = $("#box3").width();
       var tinggi_box = $("#box3").height();
       $("#box3").width(lebar_box + 10);
       $("#box3").height(tinggi_box + 10);
     })
  
   });
   </script>
   <style>
   div {
     width: 150px;
     height: 30px;
     background-color: pink;
     border: 2px solid black;
     margin-bottom: 10px;
     cursor: pointer;
   }
   </style>
</head>
<body>
  <h2>Belajar jQuery </h2>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
</body>
</html>

Pada contoh ini memiliki 3 buah box dari tag <div>. Untuk setiap box, ketika di klik, lebar dan tingginya bertambah 10 pixel. Untuk membuat efek ini, menggunakan method width() dan height().

Disini dibuat 3 buah event untuk masing-masing box, yakni $(“#box1”).click(), $(“#box2”).click() dan $(“#box3”).click(). Di dalamnya, terdapat kode jQuery untuk memperbesar ukuran box.

Kode diatas berjalan seperti rencana dan tidak salah. Namun akan jauh lebih efisien jika bisa membuat 1 event untuk ketiga box. Berikut perubahannya:

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
35
36
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar jQuery </title>
  <script src="jquery-2.1.4.js"></script>
  <script>
    $(document).ready(function() {
 
      $("div").click(function() {
        var lebar_box = $(this).width();
        var tinggi_box = $(this).height();
        $(this).width(lebar_box + 10);
        $(this).height(tinggi_box + 10);
      })
       
    });
   </script>
   <style>
   div {
     width: 150px;
     height: 30px;
     background-color: pink;
     border: 2px solid black;
     margin-bottom: 10px;
     cursor: pointer;
   }
   </style>
</head>
<body>
  <h2>Belajar jQuery </h2>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
</body>
</html>


-

Memunculkan Simbol & Emoji Pada OS Mac

  Memunculkan Simbol & Emoji  1. Buka aplikasi Pages / Notes pada Macbook. 2. Klik pada Menubar Edit --> Pilih Emoji and Symbols a...