2. jQuery merupakan sebuah framework dan cara baru dalam
menuliskan kode javascript. jQuery mempunyai semboyan
“write less, do more”. jQuery dirancang untuk mempercepat
dan meringkaskan kode-kode javascript serta kaya akan
fitur. Dengan demikian, menggunakan jQuery dapat dengan
cepat dan ringan untuk menangani perpindahan dokumen
HTML, penanganan event (event handling), pembuatan
animasi didalam web. Dengan JQuery, suatu halaman web
akan tampak seperti flash, dan juga interaksi AJAX untuk
pengembangan web yang modern dan cepat.
jQuery mempunyai lisensi dibawah GNU artinya jQuery
merupakan aplikasi yang bersifat Open Source dan bebas.
Page 2
3. JQuery diluncurkan pada tanggal 26 Januari 2006
di Barcam NYC oleh John Resig dan berlisensi
ganda di bawah MIT dan G PL. JQuery dibuat lebih
ramping dari librari Prototype yang menjadi
inspirasi dari libarari JQuery ini. Secara
pemrograman, JQuery memiliki kemiripan seperti
Prototype.
Rilis pertama dari jQuery, versi 1.0, pada tanggal
26 Agustus 2006. Sejak itu, jQuery telah
berkembang ke versi 1.7.1 dan hingga saat ini versi
jQuery 2.0 terbaru sudah resmi di luncurkan
tanggal 18 April 2013.
Page 3
4. Fungsi JQuery
• Mempermudah akses dan manipulasi elemen
tertentu pada dokumen.
• Mempermudah modifikasi/perubahan tampilan
halaman web.
• Mempersingkat Ajax (Asynchronous Javacsript
and XML).
• Memiliki API (Application Programming
Interface).
Page 4
5. • Mampu merespon interaksi antara user
dengan halaman web dengan lebih cepat.
• Menyediakan fasilitas untuk membuat
animasi sekelas Flash dengan mudah.
• Menyederhanakan penulisan Javascript
biasa.
Page 5
6. Fungsi efek-efek siap pakai yang disediakan
oleh jQuery :
•jQuery show() : berfungsi untuk menampilkan elemen
yang tersembunyi.
•jQuery hide() : berfungsi untuk menyembunyikan elemen
yang dipilih.
•jQuery toggle() : merupakan gabungan dari fungsi hide
dan show.
•jQuery slideDown() : berfungsi menampilkan elemen yang
tersembunyi , secara efek sliding.
•jQuery slideUp() : berfungsi menyembunyikan elemen
secara efek sliding.
Page 6
7. • jQuery slideToggle() : merupakan gabungan
antara slideDown() dan slideUp().
• jQuery fadeIn() : berfungsi menampilkan elemen
yang dipilih jika tersembunyi.
• jQuery fadeOut() : berfungsi menyembunyikan
elemen yang dipilih secara efek memudar.
• jQuery fadeTo() : berfungsi mengatur tingkat
kepudaran elemen terpilih menuju tingkat
opacity yang ditentukan.
• jQuery animate() : berfungsi mengubah suatu
elemen dari satu keadaan ke keadaan lainnya.
Page 7
8. Fitur-fitur Jquery
Beberapa Fitur yang ada di JQuery :
1. dalam penggunaannya menggunakan
seleksi element DOM, sehingga
website lebih dinamis dan interaktif.
2. JQuery dapat memanipulasi Class
pada CSS dan Support CSS 3
3. Event
4. AJAX
Page 8
9. 5.
6.
7.
8.
Efek-efek dan animasi
Ekstensi dan Plug-ins
Kompatibilitas dengan hampir semua
Browser modern yang ada saat ini.
Keperluan lain seperti : User Agent,
Feature detection dan lain sebagainya.
Page 9
10. Cara Kerja dan Penggunaan Jquery
1.
jQuery akan memastikan bahwa semua elemen atau
elemen yang diinginkan sudah ditampilkan semua pada
halaman web, fungsi yang digunakan adalah:
$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
});
2. Setelah semua elemen sudah ditampilkan, tahap
berikutnya adalah memilih elemen. Berdasarkan class atau
id yang telah didefinisikan. Dalam hal ini, jQuery
menggunakan fungsi Selector.
Page 10
11. $("#foto")
$(".sembunyi")
$(".tampil")
3. Setelah elemen dipilih, tahap berikutnya adalah
memberikan aksi/operasi terhadap elemen yang
sudah dipilih. Misalnya tombol yang akan
menyembunyikan dan memunculkan kembali
gambar.
$(".sembunyi").click(function(){
$("#foto").hide("slow");
)};
Page 11
12. Implementasi Jquery
beberapa plugin jquery yang sering
digunakan oleh beberapa web developer
dalam membuat atau membangun sebuah
website, antara lain :
•Drop-Down-Menu
•Tool-Tips
•Autocomplete-Search
•Validasi-Form
•jQuery-Cycle-Plugin
•Teks-Berjalan
Page 12
13. Manfaat jquery
• Kompatibel dengan hampir seluruh
browser
• jQuery telah digunakan oleh websitewebsite raksasa
• Kompatibel dengan seluruh versi CSS
(dari CSS 1 sampai CSS 3)
Dokumentasi dan tutorialnya lengkap, bisa
langsung dilihat di http://jquery.com
Page 13
14. • Didukung oleh banyak komunitas
• Disupport oleh plugin yang lengkap
• Filenya hanya satu dan ukurannya relatif
kecil, sekitar 20kb
• Open source atau Free
• jQuery lebih diminati oleh para developer
web saat ini
Page 14
15. Kelebihan dan kekurangan
Jquery
Kelebihannya yaitu:
•Didukung oleh banyak komunitas
•Disupport oleh plugin yang lengkap
•Filenya hanya satu dan ukurannya relatif
kecil, sekitar 20kb
•Open source atau Free
•jQuery lebih diminati oleh para developer
web saat ini
Page 15
16. Kekurangannya yaitu :
•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.
•Dari sisi server hosting pun, CPU dan RAM harus
mengalokasikan resource yang mereka miliki
untuk menangani request terhadap jquery. Pada
level tertentu request yang sangat banyak (sangatsangat banyak) akan membebani server. Solusi:
host jquery pada situs lain, seperti Google yang
menyediakan request jquery dari servernya.
Page 16
17. Sintaks Jquery
• Biasanya sintaks jQuery 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.
Page 17
