BAB IV Jquery Dasar

BAB IV
JQUERY DASAR
4.1 Pengenalan jQuery
jQuery adalah kumpulan fungsi-fungsi Javascript yang berguna untuk memudahkan

penulisan kode Javascript. jQuery mempunyai fitur seperti menyederhanakan document
traversing, event handling, animating dan interaksi AJAX untuk pengembangan web secara
cepat. Sang creator jQuery adalah John Resig , beliau merupakan master javascript yang
menciptakan sebuah library untuk mempermudah developer agar dapat membuat aplikasi
javascript tanpa harus mengetik javascript dari awal.
A. Manfaat jQuery
Manfaat jQuery adalah sebagai berikut:

 Menemukan elemen dalam dokumen HTML
 Mengubah konten HTML
 Mendengarkan apa yang dilakukan pengguna dan melakukan tindakan yang sesuai (event
listener)
 Membuat animasi konten di halaman
 Berbicara melalui jaringan untuk mengambil konten baru (AJAX).
B. Cara Memanggil jQuery
Agar dapat menggunakan jQuery, kita harus memanggil file nya terlebih dahulu.
Contohnya kita bisa menautkan atau memuat link jQuery yang disediakan di website resminya
seperti berikut ini :
1. <html>
2. <head>
3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.
js">
4. </script>
5. </head>
6. </html>
Cara lain adalah kita bisa mendownload file jquery.min.js tersebut kemudian kita
simpan di dalam folder aplikasi kita, contoh pemanggilannya sebagai berikut ini:
1. <html>
2. <head>
3. <script src="js/jquery.min.js">
4. </script>
5. </head>
6. </html>
Karena JavaScript (dan jQuery) dapat berjalan sebelum DOM (Document Object Model)
"siap", maka kita jalankan (listen) kode jQuery jika dokumen (DOM) sudah siap (ready).
$(document).ready(function())
{
//kode jQuery
});
Tambahkan script di atas pada bagian awal halaman, hal ini untuk mengantisipasi agar
jQuery tidak diload terlebih dahulu sebelum halaman siap.
C. Menggunakan jQuery
Untuk menggunakan jQuery, yang harus kita lakukan di awal adalah mendownload file
jQuery melalui situs resminya yaitu https://jquery.com.
Simpan pada folder aplikasi yang akan kita kerjakan, misal folder jwp-jquery. Pada folder
tersebut buat sebuah file index.html dan isi index.html dengan kode html seperti di bawah ini:
1. <!DOCTYPE html>
2. <html>
3. <title>Belajar jQuery</title>
4. <body>
5. 
6. <script src="jquery-3.4.0.min.js"></script>
7. </body>
8. </html>
Hasil dari index.html merupakan halaman kosong, untuk mengetahui apakah jQuery
sudah termuat atau belum, kita bisa melihatnya melalui console (Developer tool) lalu ketikkan
simbol "$" , apabila jQuery sudah termuat maka akan menampilkan pesan "ƒ (e,t){return new
k.fn.init(e,t)}".
4.2 Menggunakan jQuery Selector
jQuery selector merupakan salah satu bagian terpenting dari jQuery library. jQuery
selector digunakan untuk memilih elemen HTML berdasarkan nama, id, class, atribut value
atau lainnya. Cara kerjanya hampir sama dengan CSS.
Elemen selector memilih elemen berdasarkan nama elemen.
Contoh sintax
$("p");
Pada sintaks di atas, berlaku untuk pemilihan semua elemen <p> .

Contoh 1:
1. <h1>Kemana kamu ingin pergi?</h1>

2. <h2>Tujuan perjalanan</h2>
3. <p>Rencana untuk perjalanan berikutnya</p>
4. <p>Karangtawulan, Talijah or Pangkalan?</p>
5. <button>Aksi</button>
6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></sc
ript>
7. <script>
8. $(document).ready(function()
9. {
10. $("button").click(function()
11. {
12. $("p").hide();
13. });
14. });
15. </script>
Hasil dari contoh di atas, ketika user klik tombol "Aksi" maka semua elemen <p> akan
disembunyikan.
Contoh 2:

2. <h2>Tujuan Perjalanan</h2>
3. <p>Rencana perjalanan berikutnya</p>
4. <ul id="tujuan">
5. <li>Karangtawulan</li>
6. <li>Talijah</li>
7. <li class='promo'>Pangkalan</li>
8. </ul>
ript>
11. <script>
13. {
15. {
16. $("li").text("Gak kemana-mana");
17. });
18. });
19. </script>
Pada contoh di atas ketika tombol "Aksi" diklik, maka semua elemen <li> akan diubah
menjadi "Gak kemana-mana".
#id selector memilih elemen menggunakan atribut id dari tag HTML. id selector dipilih
ketika kita ingin menemukan atau memilih elemen tunggal yang bersifat unik.
Contoh sintax:
$("#sample")
Contoh 1:
1. <h1 id="sample">Where do want to go?</h1>

2. <h2>Travel Destinations</h2>
3. <p>Plan your next adventure</p>
4. <p>Rome, Paris or Rio?</p>
ript>
7. <script>
8. $(document).ready(function(){
9. $("button").click(function(){
10. $("#sample").hide();
11. });
12. });
13. </script>
Hasil dari contoh di atas, ketika user klik tombol maka elemen dengan id=sample akan
disembunyikan.
Contoh 2:

3. <p>Rencana perjalanan berikutnya</p>
4. <ul id="tujuan">
6. <li>Talijah</li>
7. <li class='promo'>Pangkalan</li>
8. </ul>
ript>
11. <script>
13. {
15. {
16. $("#tujuan").text("Karangtawulan, Talijah atau Pangkalan?");
17. });
18. });
19. </script>
Pada contoh di atas, ketika tombol "Aksi" diklik, maka elemen dengan id=tujuan akan
diganti dengan text Karangtawulan, Talijah or Pangkalan ?
.class selector memilih elemen dengan class tertentu. Untuk menggunakan class selector
bisa dengan cara menuliskan titik "." diikuti nama class.
Contoh sintax:
$(".sample")
Contoh 1:
1. <h1>Where do want to go?</h1>

2. <h2 class="sample">Travel Destinations</h2>
3. <p>Plan your next adventure</p>
4. <ul id="destinations">
5. <li>Rome</li>
6. <li>Paris</li>
7. <li class='promo'>Rio</li>
8. </ul>
ript>
11. <script>
12. $(document).ready(function(){
13. $("button").click(function(){
14. $(".sample").hide();
15. });
16. });
17. </script>
Hasil dari contoh di atas, ketika user klik tombol maka elemen dengan class=sample akan
disembunyikan.
Contoh 2:

3. <p>Rencana perjalnan berikutnya</p>
4. <ul id="tujuan">
6. <li>Pangkalan</li>
7. <li class='promo'>Talijah</li>
8. </ul>
ript>
11. <script>
13. {
15. {
16. $(".promo").text("Batu Karas");
17. });
18. });
19. </script>
Pada contoh di atas ketika tombol "Aksi" diklik , maka elemen dengan class=promo akan
diubah menjadi "Batukaras".
4.3 Fitur Efect di jQuery
Jenis-jenis fitur efect di jQuery adalah sebagai berikut:
A. Tanpa Animasi
 hide(kecepatan)
Digunakan untuk menyembunyikan elemen yang dipilih.
 show(kecepatan)
Digunakan untuk memunculkan elemen yang dipilih.
 toggle(kecepatan)
Beralih antarahide dan show, yaitu ketika elemen dalam keadaan muncul/ show maka
akan disembunyikan/ dihide, sedangkan ketika dalam keadaan sembunyi /hide maka akan
dimuculkan /show.
B. Animasi Fade
 fadeIn(kecepatan)
Digunakan untuk memunculkan elemen yang dipilih dengan efek transisi yaitu muncul
secara perlahan.
 fadeOut(kecepatan)
Kebalikan dari fadeIn yaitu digunakan untuk menyembunyikan dengan efek transisi yaitu
disembunyikan secara perlahan.
 fadeToggle(kecepatan)
Beralih antara metode fadeIn() dan fadeOut().
 fadeTo(kecepatan)
Memberikan efek opacity / transparansi suatu elemen.
C. Animasi Slide
 slideDown(kecepatan)
Memunculkan elemen yang dipilih dengan efek slide ke bawah.
 slideUp(kecepatan)
Menyembunyikan elemen yang dipilih dengan efek slide ke atas.
 slideToggle(kecepatan)
Gabungan antara metode slideDown() dan slideUp().
D. Animasi via CSS
animate(parameter css, kecepatan) Menjalankan animasi pada elemen yang dipilih.

Contoh:
1. <h1>Kemana Anda ingin pergi ?</h1>

2. <ul class="lokasi">
3. <li class="bandung">
4. Bandung
5. <button id="keBandung">Pergi</button>
6. <button id="hapusBandung">X</button>
7. </li>
8. <li class="jakarta">Jakarta</li>
9. <li class="surabaya">Surabaya</li>
10. </ul>
ript>
12. <script>
14. {
15. $('#keBandung').on('click', function(){
16. alert('Saya mau ke Bandung');
17. });
18. $('#hapusBandung').on('click', function(){
19. $('.bandung').remove();
20. alert('Bandung dihapus');
21. });
22. });
23. </script>
Sebagai contoh kita akan tambahkan sebuah tombol hide untuk menyembunyikan
Bandung dari list. Pertama kita harus tambahkan kode untuk membuat tombol di dalam elemen
list Bandung.
<button id="hideBandung">H</button>
Selanjutnya tambahkan kode jQuery untuk memberikan efekhide.
$('#hideBandung').on('click', function()
{
$('.bandung').hide();
});
Maka, kode lengkapnya adalah seperti dibawah ini:

4. Bandung
6. <button id="hideBandung">H</button>
8.
9. </li>
12. </ul>
ript>
14. <script>
16. {
19. });
23. });
24. $('#hideBandung').on('click', function(){
25. $('.bandung').hide();
26. });
27. });
28. </script>
Untuk menyembunyikan Bandung dari daftar disertai dengan efek transisi

(menyembunyikan secara perlahan), kita bisa menggunakan fadeOut.
{
$('.bandung').fadeOut();
});
Untuk mengatur kecepatan dari efek transisi, kita bisa menambahkan jumlah kecepatan
(dengan satuan mili second) seperti di bawah ini :
{
$('.bandung').fadeOut(2000);
});
Untuk menyembunyikan Bandung dari daftar dengan efek slide ke atas, kita bisa
menggunakan slideUp seperti berikut ini.
{
$('.bandung').slideUp(2000);
});
Contoh lain untuk menyembunyikan dan juga memunculkan suatu elemen kita bisa
menggunakan toggle. Misalnya kita hendak membuat tombol untuk menyembunyikan dan
memunculkan kembali Bandung dari daftar.
Langkah pertama adalah membuat tombol Toggle Bandung letakkan diluar elemen list
seperti berikut ini:

4. Bandung
8. </li>
11. </ul>
12. <button id="toggleButton">Toggle Bandung</button>
Untuk memberikan respon terhadap tombol Toggle Bandung, kita tambahkan script
jQuery.
$('#toggleButton').on('click', function(){
$('.bandung').toggle();
});
Maka, kode lengkapnya adalah seperti dibawah ini:

4. Bandung
8. </li>
11. </ul>
12. <button id="toggleButton">Toggle Bandung</button>
ript>
14. <script>
16. {
19. });
23. });
24. $('#hideBandung').on('click', function(){
25. $('.bandung').hide();
26. });
27. $('#toggleButton').on('click', function(){
28. $('.bandung').toggle();
29. });
30. });
31. </script>
Saat kita klik tombol "Toggle Bandung" maka Bandung akan disembunyikan dari daftar.
Selanjutnya saat kita klik kembali tombol "Toggle Bandung" kembali maka Bandung akan
dimunculkan kembali.
Untuk memberikan efek transisi kita bisa mengubahnya menjadi fadeToggle.
$('.bandung').fadeToggle();
});
Untuk memberikan efek slide ke atas (untuk menyembunyikan) dan ke bawah (untuk
menampilkan) kita juga bisa mengubahnya menjadi slideToggle.
$('.bandung').slideToggle();
});
Selain itu kita juga bisa memberikan efek animasi dengan mengubahnya menjadi
animate.
$('.bandung').animate({
marginLeft:100
});
});

Bahasa

BAB IV Jquery Dasar

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

BAB IV Jquery Dasar

Diunggah oleh

Hak Cipta:

BAB IV

4.1 Pengenalan jQuery

jQuery adalah kumpulan fungsi-fungsi Javascript yang berguna untuk memudahkan

Manfaat jQuery adalah sebagai berikut:

Pada sintaks di atas, berlaku untuk pemilihan semua elemen <p> .

1. <h1>Kemana kamu ingin pergi?</h1>

1. <h1>Kemana kamu ingin pergi?</h1>

1. <h1 id="sample">Where do want to go?</h1>

1. <h1>Kemana kamu ingin pergi?</h1>

1. <h1>Where do want to go?</h1>

1. <h1>Kemana kamu ingin pergi?</h1>

Jenis-jenis fitur efect di jQuery adalah sebagai berikut:

animate(parameter css, kecepatan) Menjalankan animasi pada elemen yang dipilih.

1. <h1>Kemana Anda ingin pergi ?</h1>

Selanjutnya tambahkan kode jQuery untuk memberikan efekhide.

Maka, kode lengkapnya adalah seperti dibawah ini:

1. <h1>Kemana Anda ingin pergi ?</h1>

Untuk menyembunyikan Bandung dari daftar disertai dengan efek transisi

1. <h1>Kemana Anda ingin pergi ?</h1>

Maka, kode lengkapnya adalah seperti dibawah ini:

1. <h1>Kemana Anda ingin pergi ?</h1>

Anda mungkin juga menyukai