jQuery adalah library JavaScript open-source yang mempermudah dan mempercepat penulisan kode dengan fokus pada manipulasi DOM dan pengelolaan interaksi pengguna. Sejak diluncurkan oleh John Resig pada tahun 2006, jQuery telah digunakan oleh banyak website besar dan memiliki banyak plugin yang memperluas fungsionalitasnya. Meskipun menawarkan banyak kemudahan, jQuery juga memiliki kekurangan terkait beban kerja pada server dan kecepatan dibandingkan dengan HTML murni.

1. PENGENALAN JQUERY
Oleh : Mutia Nurotul Bariyah
1102412022

2. Pengertian JQuery
Jquery adalah suatu library (framework) yang
berbasiskan Javascript. . Jquery juga sama dengan
Javascript Library yaitu kumpulan kode atau fungsi
Javascript siap pakai, sehingga dapat mempermudah
dan mempercepat dalam pembuatan Javascript atau
framework
yang
mampu
menyederhanakan
penulisan kode dengan hasil yang lebih baik "Write
less, do more" atau sedikit menulis tetapi bisa
menghasilkan banyak. Jquery sendiri dirancang untuk
meringkas kode-kode javascript.

3. JQuery merupakan library yang bersifat open source,
atau gratis dengan lisensi GNU General Public License
dan MT License. Jquery berukuran sangat ringan,
yang hanya terdiri dari satu file dan berukuran
kurang lebih 20 KB. Sehingga menggunakan jQuery
jauh lebih cepat dan mudah daripada menggunakan
framework yang lain atau menggunakan Javascript
Konvensional.

4. Sejarah Perkembangan JQuery
John Resig pada tahun 2005 merupakan pembuat
JQuery pada kali pertamanya, yang diumumkan di
NYC BarCamp pada tanggal 14 Januari 2006.
Kemudian para pengembang datang untuk
membantu menyempurnakan librari ini, dan akhirnya
menghasilkan rilis stabil pertama dari jQuery versi
1.0 pada tanggal 2006. Sejak itu, jQuery telah
berkembang ke versi 1.7.1 dan telah mempunyai
plug-in yang banyak. Sebuah plug-in adalah ekstensi
dari jQuery yang bukan bagian dari library inti.

5. Semenjak kemunculannya jQuery telah mencuri
perhatian para developer web. Buktinya, pada tahuntahun berikutnya jQuery telah banyak digunakan
oleh website - website terkemuka di dunia seperti
Google, Microsoft, intel , Nokia, Oracle , IBM, DELL,
BBC, NBC, ESPN, EAPN, EA Sport, Twitter, Facebook,
Amazon, Techorati, Youtobe Apple, Wordpress,
Mozila, Netflix , Digg, Time, dan masih banyak lagi.
Dan sampai saat ini sudah tercatat ada jutaan
website yang telah menggunakan jQuery.

6. FITUR-FITUR YANG ADA DI JQUERY
•
•
•
•
•
•
•
•
Beberapa fitur yang tersedia di Jquery:
Dalam Pemakaian menggunakan seleksi element
DOM, sehingga website lebih dinamis dan interaktif.
JQuery bisa memanipulasi Class pada CSS dan Support CSS
3
Event
AJAX
Efek-efek dan animasi
Ekstensi dan Plug-ins
Kompatibilitas dengan hampir semua Browser modern
Keperluan lain seperti : User Agent, Feature detection dan
lainnya.

7. CARA KERJA JQUERY
Cara kerja yang dilakukan Jquery yaitu:
 jQuery akan memastikan bahwa semua elemen
atau elemen yang diinginkan sudah ditampilkan
semua di halaman web, fungsi yang digunakan
adalah:
$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan
semua
});

8.  Setelah semua elemen ditampilkan, tahap berikutnya
adalah memilih elemen berdasarkan class atau id yang
telah didefinisikan. Dalam hal ini, jQuery menggunakan
fungsi Selector.
$("#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");
)};

9. IMPLEMENTASI JQUERY






Beberapa plugin jquery yang sering digunakan dalam
membuat atau membangun sebuah website,
diantaranya:
Drop-Down-Menu
Tool-Tips
Autocomplete-Search
Validasi-Form
jQuery-Cycle-Plugin
Teks-Berjalan

10. FUNGSI JQUERY
•
•
•
•
Beberapa fungsi yang ada pada jQuery, diantaranya sebagai
berikut :
.add()
fungsi add() digunakan untuk menambahklan elmen
berupa text, tag html ke dalam sebuah content (tag html =
input, textarea, div dll).
.append() fungsi .append() digunakan untuk menambahkan
suatu elment berupa text, html dll hampir sama dengan
fungsi .add().
.attr() fungsi .attr() digunakan untuk mengubah suatu nilai
pada attribut html seperti attribut dalam tag html seperti
nilai value, class, id, title ini bisa diubah nilainya
mengunakan fungsi ini.

11. • .addClass() fungsi .addClass() digunakan untuk
menambahkan nilai class pada attribut html.
• .find() fungsi .find() digunakan untuk mencari suatu
attribut dalam html seperti elmen html
(div, form, input dll), attribut html (title, class, id dll)
• .each() fungsi .each() digunakan untuk mencari /
memangil suatu elemen html , attribut html yang
sudah di tentukan secara rekursif dalam artian secara
mudah, berulang secata terus menerus sampi
element tau attribut html di temukan. fungsi ini
hampir sama dengan fungsi find(). akan tetapi
penempatan pengunaanya berbeda.

12. MANFAAT JQUERY DALAM
PERKEMBANGAN APLIKASI WEBSITE
Mengakses bagian halaman website dengan mudah
Merespon interaksi user dalam halaman
Menambahkan animasi ke halaman
Mengubah isi dari halaman
Mengambil informasi di server tanpa harus
merefresh halaman web
Mengubah bagian halaman tertentu
Menyederhanakan penulisan Javascript biasa

13. PERBEDAAN ANTARA JAVASCRIPT DAN
JQUERY
 Javascript adalah bahasa pemrograman yang
dirancang untuk berjalan di lingkungan klien yang
dikombinasikan dengan dokumen HTML.
 Sedangkan jquery adalah
komponen/librari/framework yang dibuat dari
javascript dengan tujuan memudahkan seorang
programmer dalam menggunakan fungsi-fungsi yang
lebih rumit.

14. penulisan javascript dan JQuery dalam melakukan
sebuah manipulasi background dokumen html dapat
dilihat sebagai berikut:
Javascript:
1. <script language="javascript">
2. function changeBackground(color)
3. {
4. document.body.style.background = color;
5. }
6. onload="changeBackground('red');“
7. </script>

15. JQuery:
1. <script>
2. $('body').css('background', '#ccc');
3. </script>

16. KEMAMPUAN YANG DIMILIKI JQUERY
• Mempermudah akses dan manipulasi elemen tertentu
pada dokumen.
• Mempermudah modifikasi/perubahan tampilan halaman
web.
• Mempersingkat Ajax (Asynchronous Javascript and XML)
• Memiliki API (Application Programming Interface)
• Mampu merespon interaksi antara user dengan halaman
web dengan lebih cepat.
• Menyediakan fasilitas untuk membuat animasi sekelas
Flash dengan mudah.

17. KEKURANGAN YANG DIMILIKI JQUERY
• 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 (sangat-sangat
banyak) akan membebani server. Solusi: host jquery
pada situs lain, seperti Google yang menyediakan
request jquery dari servernya.

18. EFEK-EFEK DENGAN JQUERY
•
•
•
•
•
•
•
•
•
•
jQuery show() : berguna untuk menampilkan elemen yang tersembunyi.
jQuery hide() : berguna untuk menyembunyikan elemen yang dipilih.
jQuery toggle() : gabungan fungsi hide dan show.
jQuery slideDown() : menampilkan elemen yang tersembunyi , secara efek
sliding.
jQuery slideUp() : menyembunyikan elemen secara efek sliding.
jQuery slideToggle() : gabungan antara slideDown() dan slideUp().
jQuery fadeIn() : menampilkan elemen yang dipilih jika tersembunyi.
jQuery fadeOut() : menyembunyikan elemen yang dipilih secara efek
memudar.
jQuery fadeTo() : mengatur tingkat kepudaran elemen terpilih menuju
tingkat opacity yang ditentukan.
jQuery animate() : mengubah suatu elemen dari satu keadaan ke keadaan
lainnya.

19. KEMUDAHAN YANG DITAWARKAN
JQUERY
• Dapat mengubah tampilan bagian halaman tertentu
• Dapat mengakses bagian halaman tertentu dengan
mudah
• Dapat mengubah isi halaman
• Dapat menambahkan animasi ke halaman
• Dapat merespond interaksi user dalam halaman
• Dapat mengambil informasi dari server tanpa
melakukan refresh ke seluruh halaman
• Dapat menyederhanakan penulisan avascript biasa

20. THANK YOU