Scribd Logo

Bahasa

Unggah

Selamat datang di Scribd!

JQuery

Diunggah oleh

KevinPrilian
6 tayangan31 halaman
Program Web

Hak Cipta

© © All Rights Reserved

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini
Program Web

Hak Cipta:

© All Rights Reserved
Tandai sebagai konten tidak pantas
6 tayangan31 halaman

JQuery

Diunggah oleh

KevinPrilian
Program Web

Hak Cipta:

© All Rights Reserved
Tandai sebagai konten tidak pantas
dari 31

TIB22 – PERANCANGAN

PEMROGRAMAN WEB
JQUERY
Pertemuan ke-11 dan 12
Sub-CPMK
Mahasiswa mampu menggunakan jQuery yang dapat
mengatur interaksi antara JavaScript dengan HTML (C3,
A3)

Materi
1. Pengantar jQuery
2. Selector
3. Event
4. Plugin jQuery
5. jQuery dan CSS
1. Pengantar jQuery
1.1 jQuery
• jQuery merupakan salah satu dari JavaScript
library.
• jQuery berisi kumpulan fungsi JavaScript yang
siap pakai, sehingga mempermudah dan
mempercepat dalam membuat kode
JavaScript.
• Dengan menggunakan jQuery, skrip JavaScript
yang panjang dapat disingkat menjadi beberap
baris kode saja.
1.2 Penggunaan jQuery
Cara penggunaan jQuery sebagai berikut.
• Library jQuery dapat di download dari website
resminya yaitu https://jquery.com/download/
• Simpan jQuery dalam sebuah folder yang diinginkan.
• Buat file HTML kemudian panggil jQuery diantara tag
<head> . . . </head>
2. Selector
2.1 Format Selector
• Selector adalah skrip yang digunakan untuk
memilih suatu elemen HTML yang akan
dimanipulasi dengan jQuery.
• Penulisan selector ditulis di dalam tanda
kurung setelah tanda dolar.

$(‘selectors’)
2.2 Basic Selector
• Basic selector merupakan selector dasar sesuai yang
dipakai pada CSS.
Selector Fungsi
Selector all Memilih semua elemen HTML.
Bentuk umum: $(‘*’)
Selector tag Memilih tag HTML dengan cara menuliskan nama tagnya langsung.
Bentuk umum: $(‘namaTag’)
Selector Memilih tag HTML yang memiliki atribut class tertentu.
class Bentuk umum : $(‘.namaClass’) atau $(‘namaTag.namaClass’)
Selector id Memilih tag HTML yang memiliki atribut id tertentu.
Bentuk umum : $(‘#namaId’)
Multiple Memilih elemen HTML dengan beberapa selector sekaligus yang
selector dipisahkan dengan tanda koma.
Bentuk umum : $(‘selector1,selector2,…,dst’)
2.3 Contoh Selector
Code Output
3. Event
3.1 Event
• Event merupakan skrip yang akan mendeteksi
sebuah aksi dari user misalnya ketika user
menekan mouse, memindahkan mouse, dan
sebagainya.
• Format penulisan event adalah sebagai
berikut
$(‘selectors’).event(function(){
...
});
3.2 Contoh Event
Code Output
4. Plugin jQuery
4.1 Plugin jQuery
• Plugin jQuery merupakan skrip jQuery yang
dibuat oleh pihak ketiga yang dapat digunakan
untuk tujuan tertentu pada aplikasi website
secara instan sehingga penggunaan jQuery
menjadi sangat mudah.
• Beberapa contoh plugin jQuery yakni
Fancybox, Nivo Slider, FullCalender, Data
Table, dan lain sebagainya.
4.2 Penggunaan
Plugin jQuery
• Panggil file plugin seperti saat memanggil file
jQuery. Jika plugin mempunyai file CSS, maka
panggil juga file CSS-nya didalam tag <head>

• Tambahkan id atau class pada elemen HTML yang


akan diterapkan plugin
4.2 Penggunaan
Plugin jQuery (Lanj..)
• Gunakan plugin jQuery dengan aturan skrip
sebagai berikut
4.3 Contoh Plugin jQuery
Code
4.3 Contoh Plugin jQuery
Output
5. jQuery dan CSS
5.1 jQuery dan CSS
• jQuery dan CSS tidak dapat dipisahkan satu
sama lain.
• CSS menciptakan desain web yang powerful
dan jQuery mengambil dan memanipulasi nilai
pada properti pada CSS.
• Cara mengambil nilai properti pada CSS adalah
dengan menggunakan perintah css().
5.2 Bentuk Umum
• Bentuk umum penggunaan css() sebagai
berikut:
– Return the CSS property value

Example $(“body”).css(“background”)

– Set the CSS property and value

– Example $(“body”).css(“background”, “red”)


5.2 Bentuk Umum (Lanj..)
– Set multiple properties and values

Example $(“body”).css(“background”:”red”, “color”:”blue”)


5.3 Contoh jQuery dan CSS
Code
5.3 Contoh jQuery dan CSS
(Lanj..)
Output
Contoh jQuery
Dropdown
Code

Output
Scroll to Top
Code Output
Docking Style
Code

Output
Ringkasan
• jQuery berisi kumpulan fungsi JavaScript yang
siap pakai, sehingga mempermudah dan
mempercepat dalam membuat kode
JavaScript.
• Selector adalah skrip yang digunakan untuk
memilih suatu elemen HTML yang akan
dimanipulasi dengan jQuery.
• Event merupakan skrip yang akan mendeteksi
sebuah aksi dari user.
Terima Kasih

Anda mungkin juga menyukai