PENGENALAN JQUERY

Oleh : Mutia Nurotul Bariyah

1102412022

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.

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.

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.

Semenjak kemunculannya jQuery telah mencuri perhatian para developer web. Buktinya, pada tahun-tahun 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.

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.

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});

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");)};

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

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.

• .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.

MANFAAT JQUERY DALAM PERKEMBANGAN APLIKASI WEBSITE

Mengakses bagian halaman website dengan mudahMerespon interaksi user dalam halamanMenambahkan animasi ke halamanMengubah isi dari halamanMengambil informasi di server tanpa harus

merefresh halaman webMengubah bagian halaman tertentuMenyederhanakan penulisan Javascript biasa

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.

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>

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

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.

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.

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.

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

THANK YOU