Tutorial Belajar jQuery Part 1:

Pengertian jQuery

Pengertian jQuery
jQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalah
kumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi.
Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan
penulisan kode JavaScript.
jQuery dikembangkan pertama kali oleh John Resig di tahun 2006. Sejak saat itu, jQuery
berkembang menjadi proyek opensource dan menjadi libary JavaScript paling populer di
dunia. Situs resmi jQuery beralamat di jquery.com.

Mengapa harus menggunakan jQuery?

Untuk dapat menjawab pertanyaan ini sebaiknya anda sudah pernah membuat 1 atau 2 kode
program JavaScript. JavaScript sangat powerfull untuk memanipulasi element HTML, tapi
penggunaannya juga tidak mudah dan ‘sedikit ribet’.

Sebagai contoh, untuk mencari sebuah element HTML, dengan JavaScript kita menggunakan
fungsi getElementById():
var x = document.getElementById("tombol");
Dengan jQuery, penulisannya jauh lebih singkat:

var x = $("#tombol");
Selain itu (sebagaimana CSS) terdapat beberapa perbedaan implementasi JavaScript dari 1
web browser dengan web browser lain. Kode JavaScript yang berjalan mulus di Mozilla
Firefox, belum tentu bisa berjalan di Internet Explorer, begitu juga sebaliknya. Hal ini
diperparah dengan perbedaan versi dari masing-masing web browser.

Untuk mengatasi hal ini, jQuery memiliki fungsi bawaan yang mendeteksi web browser dan
menyediakan fungsi pengganti. Dengan demikian, kita tidak perlu pusing memikirkan
perbedaan implementasi JavaScript dari setiap web browser.

Fungsi JavaScript lanjutan seperti AJAX (Asynchronous JavaScript and XML), juga
disederhanakan oleh jQuery. Untuk menggunakan AJAX, kita hanya butuh beberapa baris
perintah .
Fitur lain dari jQuery (dan mungkin menjadi alasan paling penting), jQuery menyediakan
berbagai efek animasi menarik. Beberapa diantaranya sangat mudah digunakan dan hanya
membutuhkan 1 atau 2 baris kode program. Khusus untuk membuat efek animasi ini, jQuery
juga memiliki jQuery UI yang fokus ke animasi dan interaksi user.
jQuery juga memiliki berbagai plugin atau kode tambahan untuk fungsi-fungsi lanjutan,
seperti membuat efek slideshow, image carousel, hingga jQuery mobile. Efek-efek seperti ini
dibuat berdasarkan kode dasar jQuery.

Dengan berbagai fitur dalam jQuery, tidak heran jika jQuery sangat populer. Tidak jarang
pula programmer pemula lebih mengenal jQuery daripada JavaScript.
Dalam tutorial ini kita telah membahas pengertian jQuery dan alasan menggunakannya.
Selanjutnya, saya akan langsung memandu anda untuk mulai menggunakan jQuery: Cara
Menginput file jQuery ke dalam HTML

Tutorial Belajar jQuery Part 2:

Cara Menginput File jQuery ke HTML

Cara Menginput File jQuery ke HTML

Pada dasarnya, jQuery hanyalah sebuah file javascript external. Agar bisa menggunakan
jQuery, kita harus download file jQuery, kemudian menghubungkannya menggunakan
tag <script>.
Terdapat 2 cara menginput file jQuery: mendownload dan mengakses jQuery secara lokal,
atau menggunakan CDN (Content Delivery Network)

Cara Mendownload dan Mengakses jQuery di Komputer Lokal

Untuk menggunakan jQuery secara lokal (offline), kita harus mendownload file jQuery,
kemudian mengaksesnya melalui tag <script>.

Silahkan buka situs resmi jQuery di jquery.com. Pada bagian kanan tengah, terdapat tombol
“Download jQuery”. Klik tombol ini.

Kita akan dibawa ke halaman jquery.com/download. Pada bagian ini anda bisa melihat 2
versi dan 2 jenis file jQuery.
Pada saat tutorial ini ditulis, terdapat 2 versi jQuery: jQuery 1.x dan jQuery 2.x. Apa
perbedaan keduanya?
Perbedaan jQuery 1.x dengan jQuery 2.x
Perbedaan paling mendasar adalah, jQuery 2.x tidak lagi mendukung Internet Explorer 6, 7
dan 8. Jika anda tidak peduli dengan IE, silahkan download versi 2.x. Namun jika anda akan
menjalankan atau masih menggunakan IE 8, silahkan download versi 1.x
Dalam tutorial ini saya akan menggunakan versi jQuery 2.x, atau tepatnya jQuery 2.1.4
Perbedaan versi Compressed and Uncompressed
Setelah memilih salah satu versi, berikutnya kita juga harus memilih antara
versi compressed and uncompressed.
Kedua file ini sebenarnya memiliki kode jQuery yang sama. Perbedaannya,
versi compressedberukuran lebih kecil karena seluruh karakter yang tidak perlu, telah di
hapus (seperti spasi dan baris komentar). Hasilnya, ukuran file jQuery
versi compressed menjadi lebih kecil, tapi tidak bisa dibaca.
Jika anda ingin mempelajari kode program yang ada di dalam jQuery (atau ingin
mengembangkannya), pilih versi uncompressed. Anda bisa mendownload sendiri kedua
versi ini untuk melihat perbedaannya.
Cara mendownload jQuery
Untuk tutorial ini saya akan mengunakan jQuery versi 2.1.4 uncompressed. Silahkan klik
kanan link “Download the uncompressed, development jQuery 2.1.4”, lalu pilih Save As.
Simpanlah file jquery-2.1.4.js di tempat yang mudah diakses.

Saya telah mempersiapkan sebuah folder belajar_jquery di drive D. Dengan demikian saya
akan menyimpannya di D:\belajar_jquery.

Jika anda langsung men-klik link download jQuery, pada beberapa web browser, tidak akan
muncul menu download, tapi isi file jQuery-lah yang akan tampil.

Menghubungkan File jQuery dengan HTML

Untuk menghubungkan file jQuery dengan HTML, kita cukup menambahkan
tag <script> dengan alamat file jquery-2.1.4.js, seperti berikut ini:
<!DOCTYPE html>
1
<html>
2 <head>
3 <meta charset="UTF-8">
4 <title>Belajar jQuery Duniailkom</title>
5 <script src="jquery-2.1.4.js"></script>
</head>
6
<body>
7 </body>
8 </html>
9
10
Kode HTML diatas harus ditempatkan di dalam 1 folder dengan file jquery-2.1.4.js. Apabila
anda sudah mempelajari HTML dan CSS, tentu tidak asing dengan maksud penempatan file
ini.

Cara Menginput File jQuery menggunakan CDN

Cara lain untuk bisa menggunakan jQuery adalah mengakses file jQuery yang ditempatkan
di CDN (Content Delivery Network). Secara sederhana, CDN adalah sejenis harddisk global
yang bisa diakses oleh siapa saja. Terdapat banyak pilihan CDN, kali ini saya akan
menggunakan Google CDN, dengan demikian kode HTMLnya menjadi seperti berikut:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Belajar jQuery Duniailkom</title>
<script
6
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
7 </script>
8 </head>
9 <body>
10 </body>
</html>
11
Dengan menggunakan CDN, kita tidak perlu repot-repot mendownload file jQuery. Tapi agar
bisa berjalan, harus selalu online (terhubung ke internet).

Dalam tutorial kali ini kita telah mendownload file jQuery dan menghubungkannya dengan
HTML. Tapi kode diatas belum melakukan apapun. Selanjutnya, saya akan mengajak anda
untuk mulai menulis kode jQuery: Cara Menjalankan Kode jQuery.

Tutorial Belajar jQuery Part 3:

Cara Menjalankan Kode jQuery (event ready)
Dalam tutorial sebelumnya, kita telah membahas cara menginput file jQuery ke HTML, baik
dengan mendownload file jQuery (untuk dijalankan secara offline) atau dari CDN.
Kali ini saya akan lanjut dengan membahas cara menjalankan kode jQuery. Kode jQuery
umumnya diletakkan didalam event ready().
Cara Menjalankan Kode jQuery
Seperti yang sudah kita bahas, jQuery sebenarnya adalah JavaScript. Dengan demikian,
kode yang ditulis pun adalah kode JavaScript. jQuery hanya ‘memudahkan’ penulisan
JavaScript dengan berbagai fungsi-fungsi bawaan.
Untuk menginput kode JavaScript dengan ‘rasa’ jQuery, cara paling umum adalah
menempatkannya setelah tag <script> yang digunakan untuk memanggil file jQuery, seperti
contoh berikut:
1
2 <!DOCTYPE html>
3 <html>
4 <head>
<meta charset="UTF-8">
5
<title>Belajar jQuery Duniailkom</title>
6 <script src="jquery-2.1.4.js"></script>
7 <script>
8 // kode JavaScript dan jQuery disini
9 // kode JavaScript dan jQuery disini
10 // kode JavaScript dan jQuery disini
// kode JavaScript dan jQuery disini
11
</script>
12 </head>
13 <body>
14 </body>
15 </html>
16
Dengan ‘template’ diatas, sebenarnya kita sudah bisa langsung menjalankan fungsi-fungsi
jQuery. Namun terdapat 1 fungsi yang selalu disertakan dalam setiap kode jQuery, yakni
event ready().

Pengertian Event ready() atau The Document Ready Event

Untuk memahami fungsi ready() jQuery atau secara formal disebut sebagai The Document
Ready Event, kita harus paham bagaimana JavaScript bekerja.
Secara sederhana, JavaScript digunakan untuk memanipulasi objek HTML seperti paragraf,
tombol, form, gambar, dll. Jika kita menempatkan kode JavaScript di awal (pada
bagian <head>), besar kemungkinan objek HTML ini belum tersedia. Ini terjadi karena
bagian <body> baru diproses setelah bagian <head>.
Salah satu solusi untuk hal ini adalah dengan meletakkan kode javaScript di bagian penutup
halaman, yakni sebelum tag penutup </body>. Namun jQuery memiliki solusi yang lebih
elegant, yakni event ready().

Event ready() jQuery men-simulasi efek dari event Onload JavaScript, tapi lebih efisien.
Dengan menggunakan fungsi ready() jQuery, kode program JavaScript baru akan dijalankan
setelah web browser selesai memproses tag HTML, tapi sebelum file external seperti gambar.
Dengan demikian, kode JavaScript diproses dengan lebih awal daripada
event Onload bawaan JavaScript.
Penulisan fungsi ready() jQuery adalah sebagai berikut:
1 <!DOCTYPE html>
2 <html>
<head>
3
<meta charset="UTF-8">
4 <title>Belajar jQuery Duniailkom</title>
5 <script src="jquery-2.1.4.js"></script>
6 <script>
7 $(document).ready(function() {
// Kode jQuery dan JavaScript disini
8
// Kode jQuery dan JavaScript disini
9 // Kode jQuery dan JavaScript disini
10 });
11 </script>
12 </head>
<body>
13
</body>
14 </html>
15
16
17
Kode JavaScript yang berada didalam fungsi $(document).ready(function()) akan
dijalankan setelah seluruh tag HTML diproses oleh web browser. Dengan demikian, kita bisa
menghindari error yang terjadi kerena objek yang ingin dimanipulasi belum tersedia.
Jika anda melihat tutorial-tutorial tentang jQuery, hampir dipastikan seluruh kode akan
berada di dalam event ready() ini.
Sebagai contoh, saya akan membuat sebuah kode program sederhana, dimana ketika tombol
HTML di klik, akan tampil sebuah kalimat. Berikut kode programnya:

1
2 <!DOCTYPE html>
3 <html>
<head>
4
<meta charset="UTF-8">
5 <title>Belajar jQuery Duniailkom</title>
6 <script src="jquery-2.1.4.js"></script>
7 <script>
8 $(document).ready(function() {
9 $("#tombol").click(function() {
$(this).after('<p>Sedang Belajar jQuery di
10
Duniailkom</p>');
11 });
12 });
13 </script>
14 </head>
<body>
15
<h1>Belajar jQuery di Duniailkom</h1>
16 <button id="tombol">Click Me!</button>
17 </body>
18 </html>
19
Penjelasan maksud kode diatas, akan saya bahas dalam tutorial selanjutnya. Disini kita hanya
fokus agar anda bisa menjalankan kode jQuery.

Agar bisa berjalan, simpanlah kode program diatas di folder yang sama dengan file jquery-
2.1.4.js. Sebagai contoh, saya akan menyimpannya ke dalam file semangat.html di
folder belajar_jquery, seperti berikut ini:

Berikut hasil akhir kode diatas (silahkan klik tombol Click Me!):
Selamat! anda sudah menjalankan sebuah kode jQuery. Dalam tutorial jQuery duniailkom
selanjutnya, saya akan membahas Aturan Dasar Penulisan jQuery.

Tutorial Belajar jQuery Part 4:

Aturan Dasar Penulisan Kode jQuery
Pengertian jQuery Object ($)
Sepanjang penggunaan jQuery, hampir selalu didahului tanda $. Tanda dollar ‘$’ (dollar
sign) adalah sebuah shortcut untuk mengakses jQuery Object. Di dalam jQuery
Object inilah seluruh fungsi-fungsi jQuery berada. Sebagai contoh, untuk mencari element
HTML yang memiliki atribut id=”tombol”, kita bisa menulis:
$("#tombol")

Jika karena sesuatu hal kita tidak bisa menggunakan tanda $ (biasanya karena bentrok dengan
library lain), bisa menggunakan jQuery(), seperti berikut:
jQuery("#tombol")
Pengertian jQuery Action / jQuery Event
Untuk bisa melakukan ‘sesuatu’ terhadap element HTML, kita tinggal menyambung
penulisan jQuery Object dengan jQuery Action, atau dikenal juga dengan jQuery Event.
Format dasarnya adalah sebagai berikut:

$(selector).action()

Selector digunakan untuk mencari element mana dari HTML yang akan dimanipulasi. Bisa
berupa sebuah paragraf <p>, sebuah gambar <img>, atau sesuatu yang lebih kompleks,
seperti element <tr> pertama dari tabel kedua. Kita akan membahas jenis-jenis selector
jQuery dalam tutorial selanjutnya.

Action adalah sesuatu yang bisa kita lakukan dengan element HTML tersebut, apakah
menyembunyikannya, menampilkannya, mengubah warna, menambahkan element baru, dll.
Action mirip seperti Event dalam JavaScript, tetapi dengan penambahan berbagai fitur lain.
Di dalam jQuery, sebuah action bisa disambung dengan action lain, atau dikenal dengan
isitilah chaining.
Berikut contoh penulisan jQuery Object, selector dan action:
<!DOCTYPE html>
1
<html>
2 <head>
3 <meta charset="UTF-8">
4 <title>Belajar jQuery Duniailkom</title>
5 <script src="jquery-2.1.4.js"></script>
6 <script>
$( document ).ready(function() {
7
$( "#tombol_hide" ).click(function() {
8 $("h1").hide();
9 });
10
11 $( "#tombol_show" ).click(function() {
12 $("h1").show();
});
13
14
$( "#tombol_small" ).click(function() {
15 $("h1").css("font-size","20px");
16 });
17
18 $( "#tombol_red" ).click(function() {
19 $("h1").css( "color", "red" );
20 });
});
21
</script>
22 </head>
23 <body>
24 <h1>Belajar jQuery di Duniailkom</h1>
25 <button id="tombol_hide">Sembunyikan</button>
<button id="tombol_show">Tampilkan</button>
26
<button id="tombol_small">Perkecil</button>
27 <button id="tombol_red">Merahkan</button>
28 </body>
29 </html>
30
31
32
33
34

Silahkan anda coba sendiri dari link codepen dibawah ini:

Tampilan diatas masih sangat sederhana, dimana ketika tombol ditekan, akan terjadi
“sesuatu” terhadap tag <h1>. Menggunakan jQuery, kita bisa membuat berbagai efek
menarik lainnya.

Untuk sementara, anda dapat abaikan apa maksud kode-kode diatas. Disini saya hanya
memperlihatkan bagaimana sebuah kode jQuery ditulis, terutama bagian seperti
$(“h1”).hide(), atau $(“h1”).css(“font-size”,”20px”). Ini semua adalah cara penulsain
gabungan dari jQuery Object, jQuery Selector, dan jQuery Action.
Dalam tutorial selanjutnya, saya akan membahas lebih dalam tentang jQuery Selector,
yakni Cara Mencari Element HTML dengan jQuery Selector.

Tutorial Belajar jQuery Part 5:

Cara Mencari Elemen HTML dengan jQuery Selector
Setelah mengenal pengertian jQuery Object dalam tutorial sebelumnya, kali ini saya akan
membahas tentang cara mencari element HTML dengan jQuery Selector.

Pengertian Fungsi/Method getElementById() JavaScript

Sebagaimana fungsi utama JavaScript, kita memerlukan JavaScript untuk memanipulasi
element HTML. Langkah pertama adalah mencari element mana yang akan diubah, apakah
itu tag <p>, tag <p> dengan atribut id=”penting”, tag <p> dengan atribut class=”warning”,
atau sebuah tombol <button>.
Di dalam JavaScript, untuk mencari element HTML ini kita biasa menggunakan
method getElementById(). Method atau fungsi ini berfungsi untuk mencari element HTML
berdasarkan atribut id-nya.
Sebagai contoh, jika saya memiliki sebuah kode HTML berikut:

<button id="tombol">Click Me!</button>

Maka untuk mengakses element ini kita bisa menggunakan:

var x = document.getElementById("tombol");
Dengan menggunakan jQuery Selector, kode programnya jauh lebih singkat dan lebih
powerfull

Pengertian jQuery Selector

jQuery memudahkan proses pencarian element HTML dengan menyediakan jQuery
Selector. jQuery Selector adalah sebuah cara yang disediakan jQuery untuk mencari element
HTML. Tidak hanya dengan atribut id saja, kita juga bisa menggunakan class, atribut lain,
dan kombinasi diantaranya.

Jika anda sudah pernah menggunakan CSS, jQuery meminjam cara penulisan CSS
Selector sebagai jQuery Selector

Dengan jQuery, untuk mencari sebuah element HTML yang memiliki id=”tombol”,
penulisannya jauh lebih singkat:
1 var x = $("#tombol");

Karena sama seperti selector CSS, jQuery selector mendukung hampir semua penulisan
selector dari CSS, berikut contohnya:

Mencari seluruh element dengan tag tertentu. Misalkan kita ingin mencari seluruh tag
<p>, penulisan jQuery Selectornya adalah: $(“p”).
 Mencari element dengan id tertentu. Misalkan ingin mencari sebuah tag HTML yang
memiliki id=”belajar”, maka kita bisa menulis: $(“# belajar”).
 Mencari element dengan class tertentu. Misalkan kita ingin mencari seluruh tag HTML
yang menggunakan atribut class=”warna”, maka bisa ditulis dengan: $(“.warna”).
Sama seperti CSS, kita juga bisa mengkombinasikan selector untuk mencari element yang
lebih spesifik, misalnya untuk mencari tag <p> yang memiliki class=”warna” dan berada di
dalam tag <div>, selectornya adalah: $(“div p.warna”).
Berikut contoh penggunaan dari jQuery Selector:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
5
<script src="jquery-2.1.4.js"></script>
6
7 <script>
8 $( document ).ready(function() {
9 $("#tombol").click(function() {
10 $("p").css( "color", "red" );
11 $("#belajar").css( "color", "green" );
12 $(".warna").css( "color", "blue" );
$("#test.saja").css( "color", "yellow" );
13
$("div p.warna").css( "color", "pink" );
14 });
15 });
16 </script>
17
18 </head>
<body>
19
20
<p>
21 Sebuah paragraf tanpa atribut apapun
22 </p>
23 <p id="belajar">
24 Sebuah paragraf dengan id = "belajar"
25 </p>
<p class="warna">
26
Sebuah paragraf dengan class = "warna"
27 </p>
28 <p id="test" class="saja">
29 Sebuah paragraf dengan id="test" class="saja"
30 </p>
<div>
31
<p class="warna">
32 Sebuah paragraf tanpa atribut apapun
33 </p>
34 </div>
35
36 <button id="tombol">Action</button>
37
</body>
38
</html>
39
40
41
42
43
44
Pada contoh kode program diatas, terdapat 6 penulisan jQuery Selector. Dapatkah anda
menemukannya? Ke enam selector tersebut adalah:
 $( “#tombol” )
 $(“p”)
 $(“#belajar”)
 $(“.warna”)
 $(“#test.saja”)
 $(“div p.warna”)
Selector pertama, $(“#tombol”) saya gunakan untuk membuat event click. Maksudnya,
ketika sebuah tag HTML yang memiliki id=”tombol” di klik, jalankan perintah yang dibuat.
Di dalam kode diatas, tag HTML tersebut adalah sebuah tag <button id=”tombol”>.

Lebih jauh mengenai event click() ini akan kita bahas dalam tutorial selanjutnya. Kali ini kita
hanya fokus kedalam cara penulisan jQuery Selector.

Setelah tag <button id=”tombol”> di-klik, saya membuat 5 baris perintah yang masing-
masingnya digunakan untuk mengubah warna paragraf:
1 $("p").css( "color", "red" );
2 $("#belajar").css( "color", "green" );
3 $(".warna").css( "color", "blue" );
4 $("#test.saja").css( "color", "yellow" );
$("div p.warna").css( "color", "pink" );
5
Sebagai contoh, kode $(“#belajar”).css( “color”, “green” ) artinya: temukan sebuah tag
HTML dengan id=”belajar”, kemudian ubah warnanya (color) menjadi hijau (green). Sekali
lagi, disini kita hanya fokus ke cara penulisan selector. Event css() akan kita pelajari dalam
tutorial terpisah.
Dalam 5 baris tersebut, saya mengubah warna dari setiap paragraf, tentunya dengan selector
yang berbeda-beda. Silahkan anda test melalui link codepen berikut ini:
jQuery Selector yang kita pelajari ini sangat penting untuk dipahami, karena disinilah kita
mencari element mana yang ingin dimanipulasi dengan jQuery. Berikutnya, saya akan
masuk kedalam jQuery Event, yakni apa saja yang bisa kita lakukan kepada sebuah element
HTML.

Tutorial Belajar jQuery Part 6:

Pengertian jQuery Event dan Cara Penggunaannya
jQuery Selector dan jQuery Event merupakan inti dari jQuery. Dengan menggabungkan
keduanya, kita bisa membuat berbagai interaksi menarik. Dalam tutorial belajar jQuery kali
ini saya akan membahas lebih jauh Pengertian dan Cara Penggunaan jQuery Event.

Pengertian jQuery Event

Di dalam JavaScript, Event adalah suatu hal yang bisa dilakukan user ke sebuah element
HTML, misalnya di click, double click, mouseover (cursor mouse berada diatas
element), mouseout(cursor mouse sudah keluar dari atas element), dll.
Misalkan saya ingin membuat pesan alert() ketika sebuah paragraf di klik, dengan JavaScript
ini bisa dilakukan dengan kode program berikut:
1
2 <!DOCTYPE html>
<html>
3
<head>
4 <meta charset="UTF-8">
5 <title>Belajar jQuery Duniailkom</title>
6 </head>
7 <body>
8 <p id="paragraf" onclick="alert('Saya sudah di klik!')">
Silahkan klik saya
9
</p>
10 </body>
11 </html>
12
Atribut onclick dalam tag <p> diatas adalah sebuah Event. Ketika di klik, akan tampil pesan
popup: ‘Saya sudah di klik!’. Hasil ini didapat dengan fungsi alert() JavaScript.
Selain onclick, di dalam JavaScript juga banyak event-event lain, seperti ondblclick,
onmouseover, onmouseout, dll.
Penulisan seperti ini sangat praktis namun tidak “rapi”. Karena kita mencampurkan kode
HTML dengan JavaScript. Bagaimana cara memisahkannya?

Di dalam JavaScript, ini bisa dilakukan menggunakan fungsi addEventListener(). Hasil

yang sama bisa dihasilkan dengan kode program berikut:
1 <!DOCTYPE html>
2 <html>
<head>
3
<meta charset="UTF-8">
4 <title>Belajar jQuery Duniailkom</title>
5 <script src="jquery-2.1.4.js"></script>
6 <script>
7 window.onload = function()
8 {
document.getElementById("paragraf").
9
addEventListener("click", function(){alert ('Saya sudah di
10 klik!')});
11 }
12 </script>
13 </head>
<body>
14
<p id="paragraf">
15 Silahkan klik saya
16 </p>
17 </body>
18 </html>
19
20
Sekarang, di dalam bagian <body> tidak ada kode JavaScript apapun. Event click saya
tambahkan dengan fungsi addEventListener(). Mengenai fungsi window.onload() sendiri
telah saya bahas di Tutorial JavaScript: Posisi Terbaik Meletakkan kode JavaScipt di dalam
HTML.

Cara Penggunaan jQuery Event

Sebagai alternatif, jQuery menyediakan jQuery Event dengan penulisan yang lebih praktis,
berikut contohnya:
1
2
<!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="UTF-8">
6 <title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
7
<script>
8 $(document).ready(function() {
9 $("#paragraf").click(function() {
10 alert('Saya sudah di klik!');
11 });
12 });
</script>
13
</head>
14 <body>
15 <p id="paragraf">
16 Silahkan klik saya
17 </p>
</body>
18
</html>
19
20
Perhatikan bagaimana jQuery memudahkan penulisan event ini, sangat sederhana. Format
penulisannya adalah:
$("jQuery_Selector").jQuery_Event(function() { ...isi event
disini... })

Selain event click, juga tersedia berbagai event lain,

seperti dblclick, mouseenter, mouseover, mouseleave, dll.
Berikut contoh “aksi” dari berbagai event javascipt yang dibuat dengan jQuery:

1
<!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Belajar jQuery Duniailkom</title>
<style>
6
#paragraf {
7 width:600px;
8 height:80px;
9 background-color:pink;
10 line-height:80px;
11 text-align:center;
font-size:30px;
12
}
13 </style>
14 <script src="jquery-2.1.4.js"></script>
15 <script>
16 $( document ).ready(function() {
17
$( "#paragraf" ).click(function() {
18
$( "#paragraf" ).css( "color", "green" );
19 });
20
21 $( "#paragraf" ).mouseover(function() {
22 $( "#paragraf" ).css( "background-color", "silver" );
23 });
24
25 $( "#paragraf" ).mouseout(function() {
$( "#paragraf" ).css( "background-color", "pink" );
26
});
27
28 $( "#paragraf" ).dblclick(function() {
29 $( "#paragraf" ).css( "border", "solid 2px black" );
30 });
31
32 });
</script>
33
</head>
34 <body>
35 <p id="paragraf">
36 Belajar jQuery Event Duniailkom
37 </p>
</body>
38
</html>
39
40
41
42
43
44

Dalam contoh diatas, saya membuat 4 jQuery event, yakni click, dblclick, mouseover,
dan mouseleave. Pada setiap event ini saya mengubah property CSS dari paragraf. Silahkan
anda coba sendiri dengan men-klik, double klik, dan mouseover ke atas kotak pink:
Sepanjang tutorial jQuery di Duniailkom ini, kita akan membahas banyak hal terkait jQuery
Event, termasuk Event animasi seperti show(), hide(), dll.
Dalam tutorial berikutnya akan membahas tentang cara mengambil nilai HTML dengan
jQuery.