SlideShare a Scribd company logo
Oleh: Mohamad Yusron
NIM :2114R0775
• JQuery adalah sebuah javascript library, jQuery
mempunyai semboyan “write less, do more”. jQuery
dirancang untuk memperingkas kode-kode javascript
• JQuery adalah javascript library yang cepat dan ringan
untuk menangani dokumen HTML, menangani event,
membuat animasi dan interakasi ajax
• jQuery dirancang untuk mengubah cara anda menulis
javascript
• Pengertian JQuery adalah sebuah framework
berbasiskan Javascript. JQuery sama dengan
Javascript Library yaitu kumpulan kode atau fungsi
Javascript siap pakai, sehingga mempermudah dan
mempercepat kita dalam membuat kode Javascript.
 1. Kemudahan mengakses elemen-elemen HTML
 2. Memanipulasi elemen HTML
 3. Memanipulasi CSS
 4. Penanganan event HTML
 5. Efek-efek javascript dan animasi
 6. Menyederhanakan penggunaan javascript, karena kita cukup menggunakan
fungsi dari library javascript yang telah ada. Termasuk mempercepat coding
javascript dalam sebuah website. Dibandingkan kita harus mulai sebuah script
javascript dari nol.
 7. Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh
penggunaannya, baca di situs http://jquery.com hal ini mempermudah dalam
pembelajaran jquery.
 8. Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman
website dan interaksinya.
 9. Website yang dibangun dengan jquery akan lebih interaktif dan menarik.
 1. Meskipun diklaim jquery memiliki beban kerja yang ringan (load
CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat di-
load) website yang tidak menggunakan jquery, alias HTML murni.
 2. Dari sisi server hosting pun, CPU dan RAM harus
mengalokasikan resource yang mereka miliki untuk menangani
request terhadap jquery.
 tertentu request yang sangat banyak (sangat-sangat banyak) akan
membebani server. Solusi: host jquery pada situs lain, seperti
Google yang menyediakan request jquery dari servernya.
• Sintaks jquery biasanya dibuat untuk
memilih elemen-elemen HTML dan
melakukan aksi terhadap elemen yang
dipilih. Berikut adalah sintaks jQuery:
• $(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.
 Selector memungkinkan anda untuk
memanipulasi elemen HTML sebagai
kelompok atau sebagai elemen tunggal.
jquery elemen selectors dan attribute
".JQuery mirip XPath dalam hal memilih elemen berdasarkan
atribut yang ada:
1. $("[href]") memilih semua elemen dengan atribut href.
2. $("[href='#']") memilih semua elemen dengan atribut href
bernilai = "#".
3. $("[href!='#']") memilih semua elemen dengan atribut href
dengan nilai bukan sama dengan "#".
4. $("[href$='.jpg']") memilih semua elemen dengan atribut
href yang mengandung ".jpg".
 1. jQuery show() : berguna untuk menampilkan elemen yang
tersembunyi.
 2. jQuery hide() : berguna untuk menyembunyikan elemen
yang dipilih.
 3. jQuery toggle() : gabungan fungsi hide dan show.
 4. jQuery slideDown() : menampilkan elemen yang
tersembunyi , secara efek sliding.
 5. jQuery slideUp() : menyembunyikan elemen secara efek
sliding.
 6. jQuery slideToggle() : gabungan antara slideDown() dan
slideUp().
 7. jQuery fadeIn() : menampilkan elemen yang dipilih jika
tersembunyi.
 8. jQuery fadeOut() : menyembunyikan elemen yang dipilih
secara efek memudar.
 9. jQuery fadeTo() : mengatur tingkat kepudaran elemen
terpilih menuju tingkat opacity yang ditentukan.
 10. jQuery animate() : mengubah suatu elemen dari satu
keadaan ke keadaan lainnya.
 a. Drop-Down-Menu
 b. Tool -Tips
 c. Autocomplete-Search
 d. Validasi-Form
 e. JQuery-Cycle-Plugin
 f. Teks-Berjalan
 1. click()
 2. dbclick()
 3. focus()
 4. hover()
 5. mouseleave()
 6. mousemove()
 7. mouseout()
 8. mouseover()
 9. mouseenter()
 10. scroll()
 11. select()
 a. click()
 b. dblclick()
 c. focus()
 d. mouseover()
 e. mouseout()
 f. mouseenter()
 g. mouseleave()
 h. hover()
 i. scroll()
 j. select()
 1. Panggil / Load library jQuery
 2. buat script jquery di bagian head untuk
mengontrol object berdasarkan
elementnya
 Buat Object beserta elemennya berupa id
dan class
 Desrizal, 2010, Panduan Lengkap PHP
AJAX & JQuery,
www.blog.codingwear.com
 Desrizal, Pengenalan jQuery,
http://www.desrizal.com
 www.scribd.com diakses 23 November
2013

More Related Content

What's hot (18)

PDF
Dasar-dasar jQuery
Fitra Aditya
 
PPTX
J query
Uun Riun
 
DOCX
Ristianawati 2114 r0800 jquery
Ristianawati
 
DOCX
JQUERY
agus248
 
DOCX
Ristianawati 2114 r0800 mikrotik
Ristianawati
 
PPTX
Makalah jquery
Ristianawati
 
PDF
7 pemrograman internet javascript
Toni Tegar Sahidi
 
PPTX
Presentasi j query
Mei_Silvi
 
PPTX
Document Object Model
husnil
 
PPTX
Power point J query dan penggunaannya sebagai validasi form
Hutommo Bagus
 
PPT
Ppt jquery
Dynov Koesoemadiwirya
 
PPTX
Jquery
agus248
 
PDF
JQuery
M Fahmi Ansori
 
PPTX
Jquery codeigniter
Abdy Mulky
 
DOCX
J query
Udinese Udinese
 
PDF
17. aplikasi crud java sederhana menggunakan database my sql
Saprudin Eskom
 
DOCX
17. aplikasi crud java sederhana menggunakan database my sql
Saprudin Eskom
 
DOCX
Makalah J query dan penggunaannya sebagai validasi form
Hutommo Bagus
 
Dasar-dasar jQuery
Fitra Aditya
 
J query
Uun Riun
 
Ristianawati 2114 r0800 jquery
Ristianawati
 
JQUERY
agus248
 
Ristianawati 2114 r0800 mikrotik
Ristianawati
 
Makalah jquery
Ristianawati
 
7 pemrograman internet javascript
Toni Tegar Sahidi
 
Presentasi j query
Mei_Silvi
 
Document Object Model
husnil
 
Power point J query dan penggunaannya sebagai validasi form
Hutommo Bagus
 
Jquery
agus248
 
Jquery codeigniter
Abdy Mulky
 
17. aplikasi crud java sederhana menggunakan database my sql
Saprudin Eskom
 
17. aplikasi crud java sederhana menggunakan database my sql
Saprudin Eskom
 
Makalah J query dan penggunaannya sebagai validasi form
Hutommo Bagus
 

Viewers also liked (7)

PPTX
Actividad de aprendizaje
Marilyn1997
 
PPT
Zona De Encuentro
guest1dca8b
 
PPTX
The unborn 30 60 seconds
Lauren Wood
 
PPTX
Actividad 1
emiquintabani
 
PPT
Chubut Alarcon Brisco
guestd04c6af
 
PDF
Papeleta estudiantil
fundanita
 
Actividad de aprendizaje
Marilyn1997
 
Zona De Encuentro
guest1dca8b
 
The unborn 30 60 seconds
Lauren Wood
 
Actividad 1
emiquintabani
 
Chubut Alarcon Brisco
guestd04c6af
 
Papeleta estudiantil
fundanita
 
Ad

Similar to Pengenalan dan implementasi j query (20)

PPTX
Jquery
utia yahya
 
PPTX
Jquery ppt
menghilang
 
PDF
Jqu
utia yahya
 
PDF
Jqu
utia yahya
 
PPTX
Ppt jquery
rizki pradana
 
DOC
Jequary
p188
 
PPT
Pengenalan j query
Kiky Arin
 
PPTX
JQURTY
ucienmapcu
 
PDF
penggunaan JQuery
Fajar Satrio
 
DOCX
Makalah jqry
p188
 
DOCX
Makalah jqry
p188
 
PPTX
J query
najiburridwan
 
PPTX
J query
mihyidi
 
PPTX
J query
mihyidi
 
PPTX
J query.
musliminstimik
 
PPTX
Ppt j query-rully-amrizal-1102412020
mutia902
 
PPTX
Ppt j query-rully-amrizal-1102412020
mutia902
 
PPTX
Ppt j query-rully-amrizal-1102412020
mutia902
 
PDF
Belajar Jquery
Gamz Zewata
 
PDF
Pemrograman Web 6 - jQuery
Nur Fadli Utomo
 
Jquery
utia yahya
 
Jquery ppt
menghilang
 
Ppt jquery
rizki pradana
 
Jequary
p188
 
Pengenalan j query
Kiky Arin
 
JQURTY
ucienmapcu
 
penggunaan JQuery
Fajar Satrio
 
Makalah jqry
p188
 
Makalah jqry
p188
 
J query
najiburridwan
 
J query
mihyidi
 
J query
mihyidi
 
J query.
musliminstimik
 
Ppt j query-rully-amrizal-1102412020
mutia902
 
Ppt j query-rully-amrizal-1102412020
mutia902
 
Ppt j query-rully-amrizal-1102412020
mutia902
 
Belajar Jquery
Gamz Zewata
 
Pemrograman Web 6 - jQuery
Nur Fadli Utomo
 
Ad

Recently uploaded (12)

PDF
Presentasi Appsheet Aplikasi My Finance .pdf
MZahyAzZahran
 
PPTX
MATERI KULIAH KESUBURAN + FLOWcHARTO.pptx
nazwaputrinadia17
 
PPTX
402492009-jahbdjahbadjhb ffungsi-trigonometri.pptx
togars
 
PPTX
Dasar keamanan komputer- pengantar dan konsep awal
1967791850110
 
PPTX
Modul Aman Bermedia Digital di era Milenial
aiprahman
 
PPTX
Teknologi Seluler untuk Tingkat SMK Jurusan TJKT
IndahirawatiPardede0
 
PPTX
BAHAN AJAR Jaringan Komputer Internet-1.pptx
asesmensmpn273
 
PPTX
Rencana pengadaan pelatihan Pendukung TEFA
apaajabisa1
 
PPTX
[GDGoC BiOn] Learn Go by Playing: A Number Guessing Game
gdgocbinusonline
 
PDF
Profil-Perusahaan-visibel.ai-2025-Ind ver.pdf
visibelaiproject
 
PPTX
1. Informatika-Sekarang-dan-Masa-Depan.pptx
WulanSukmawati4
 
PPTX
Modul_Ajar_Rangkaian_Lampu_Belok_SMK.pptx
TeukuAqilAzizi
 
Presentasi Appsheet Aplikasi My Finance .pdf
MZahyAzZahran
 
MATERI KULIAH KESUBURAN + FLOWcHARTO.pptx
nazwaputrinadia17
 
402492009-jahbdjahbadjhb ffungsi-trigonometri.pptx
togars
 
Dasar keamanan komputer- pengantar dan konsep awal
1967791850110
 
Modul Aman Bermedia Digital di era Milenial
aiprahman
 
Teknologi Seluler untuk Tingkat SMK Jurusan TJKT
IndahirawatiPardede0
 
BAHAN AJAR Jaringan Komputer Internet-1.pptx
asesmensmpn273
 
Rencana pengadaan pelatihan Pendukung TEFA
apaajabisa1
 
[GDGoC BiOn] Learn Go by Playing: A Number Guessing Game
gdgocbinusonline
 
Profil-Perusahaan-visibel.ai-2025-Ind ver.pdf
visibelaiproject
 
1. Informatika-Sekarang-dan-Masa-Depan.pptx
WulanSukmawati4
 
Modul_Ajar_Rangkaian_Lampu_Belok_SMK.pptx
TeukuAqilAzizi
 

Pengenalan dan implementasi j query

  • 2. • JQuery adalah sebuah javascript library, jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript • JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax • jQuery dirancang untuk mengubah cara anda menulis javascript • Pengertian JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript.
  • 3.  1. Kemudahan mengakses elemen-elemen HTML  2. Memanipulasi elemen HTML  3. Memanipulasi CSS  4. Penanganan event HTML  5. Efek-efek javascript dan animasi  6. Menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang telah ada. Termasuk mempercepat coding javascript dalam sebuah website. Dibandingkan kita harus mulai sebuah script javascript dari nol.  7. Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh penggunaannya, baca di situs http://jquery.com hal ini mempermudah dalam pembelajaran jquery.  8. Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website dan interaksinya.  9. Website yang dibangun dengan jquery akan lebih interaktif dan menarik.
  • 4.  1. Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat di- load) website yang tidak menggunakan jquery, alias HTML murni.  2. Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk menangani request terhadap jquery.  tertentu request yang sangat banyak (sangat-sangat banyak) akan membebani server. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya.
  • 5. • Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. Berikut adalah sintaks jQuery: • $(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.
  • 6.  Selector memungkinkan anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. jquery elemen selectors dan attribute
  • 7. ".JQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada: 1. $("[href]") memilih semua elemen dengan atribut href. 2. $("[href='#']") memilih semua elemen dengan atribut href bernilai = "#". 3. $("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#". 4. $("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".
  • 8.  1. jQuery show() : berguna untuk menampilkan elemen yang tersembunyi.  2. jQuery hide() : berguna untuk menyembunyikan elemen yang dipilih.  3. jQuery toggle() : gabungan fungsi hide dan show.  4. jQuery slideDown() : menampilkan elemen yang tersembunyi , secara efek sliding.  5. jQuery slideUp() : menyembunyikan elemen secara efek sliding.  6. jQuery slideToggle() : gabungan antara slideDown() dan slideUp().  7. jQuery fadeIn() : menampilkan elemen yang dipilih jika tersembunyi.  8. jQuery fadeOut() : menyembunyikan elemen yang dipilih secara efek memudar.  9. jQuery fadeTo() : mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan.  10. jQuery animate() : mengubah suatu elemen dari satu keadaan ke keadaan lainnya.
  • 9.  a. Drop-Down-Menu  b. Tool -Tips  c. Autocomplete-Search  d. Validasi-Form  e. JQuery-Cycle-Plugin  f. Teks-Berjalan
  • 10.  1. click()  2. dbclick()  3. focus()  4. hover()  5. mouseleave()  6. mousemove()  7. mouseout()  8. mouseover()  9. mouseenter()  10. scroll()  11. select()
  • 11.  a. click()  b. dblclick()  c. focus()  d. mouseover()  e. mouseout()  f. mouseenter()  g. mouseleave()  h. hover()  i. scroll()  j. select()
  • 12.  1. Panggil / Load library jQuery  2. buat script jquery di bagian head untuk mengontrol object berdasarkan elementnya  Buat Object beserta elemennya berupa id dan class
  • 13.  Desrizal, 2010, Panduan Lengkap PHP AJAX & JQuery, www.blog.codingwear.com  Desrizal, Pengenalan jQuery, http://www.desrizal.com  www.scribd.com diakses 23 November 2013