Pertemuan 8 Implementasi Teknologi JQuery

Pertemuan 8
Implementasi Teknologi JQuery

Web Statis
SKB112316
Oleh : Wahyu Widodo

Apa itu JQuery ?
jQuery adalah javascript library, jQuery mempunyai semboyan
“write less, do more”. jQuery dirancang untuk memperingkas
kode-kode javascript.

Apa Kegunaan JQuery ?








Mengakses bagian halaman tertentu dengan mudah.
Mengubah tampilan bagian halaman tertentu
Mengubah isi dari halaman
Merespon interaksi user dalam halaman
Menambahkan animasi ke halaman
Mengambil informasi dari server tanpa me-refresh seluruh halaman
Menyederhanakan penulisan Javascript biasa

Langkah-langkah belajar JQuery :
1. Download jquery dari situs http://www.jquery.com
2. Masukkan kode script jquery dibawah tag


3. Coba latihan pertama berikut ini :

Latihan 1

Sintaks jQuery
Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan
melakukan aksi terhadap elemen yang dipilih.

Sintaks :
$(selector).action()

 Tanda dollar, untuk mendefinisikan jQuery
 (selector), untuk menunjukkan elemen yang dipilih atau dituju
 action(), adalah jQuery action yang akan dilakukan terhadap elemen
yang dipilih.

Contoh :
$(this).hide() – menyembunyikan elemen saat ini
$("p").hide() – menyembunyikan semua paragraf atau konten dari tag
$(".test").hide() – menyembunyikan elemen yang mempunya class="test"
$("#test").show() – menampilkan elemen yang mempunyai id="test"

Efek-Efek dengan jQuery
Berikut adalah efek-efek siap pakai yang disediakan oleh jquery.
jQuery show() Effect

Berguna untuk menampilkan elemen yang tersembunyi.
Sintaks :

$(selector).show(speed,callback)

Latihan 2

jQuery hide() Effect
Berfungsi untuk menyembunyikan elemen yang dipilih.
Sintaks :
$(selector).hide(speed,callback)
Untuk parameter speed dan callback adalah sama dengan show() effect.
jQuery toggle() Effect
Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi
menampilkan yang tersembunyi,menyembunyikan yang tampak.
Sintaks :
$(selector).toggle(speed,callback,switch)

switch : boolean

 True, hanya untuk menampilkan semua elemen
 False, hanya menyembunyikan semua elemen

Latihan 3

Manipulasi HTML dengan jQuery
jQuery mempunyai kemampuan yang powerfull dalam hal
memanipulasi, mengambil atau menambah konten, dan sebagainya
terhadap HTML.
html()
Untuk me-set konten (biasanya kita sebut innerHTML) dari elemen
HTML yang dipilih kita gunakan $(selector).html(content).

Latihan 4