Makalah jQuery

Lailatul Ainiyah1102412055

apa itu JQUERY ?

sebuah library Javascript yang akan membuat aplikasi web yang kita buat menjadi lebih menarik, baik dari sisi user-interface, proses maupun interaktivitas

Perkembangan versi jQuery:

•JQuery versi 1.1 (1.1.1, 1.1.2, 1.1.3, 1.1.3.1, 1.1.4)

•JQuery versi 1.2 (1.2, 1.2.1, 1.2.2, 1.2.3, 1.2.4, 1.2.5, 1.2.6)

•JQuery versi 1.3 (1.3.1, 1.3.2)

•JQuery versi 1.4 (1.4.1, 1.4.2, 1.4.3, 1.4.4)

•JQuery versi 1.5 (1.5.1, 1.5.2)

•JQuery versi 1.6 (1.6.1, 1.6.2, 1.6.3, 1.6.4)

•JQuery versi 1.7

•JQuery versi 1.8 (1.8.1, 1.8.2)

Kemampuan yang Dimiliki JQuery

1.Kemudahan mengakses elemen-elemen HTML2.Memanipulasi elemen HTML3.Memanipulasi CSS4.Penanganan event HTML5.Efek-efek javascript dan animasi6.Modifikasi HTML DOM7.AJAX8.Menyederhanakan kode javascript lainnya

Fitur-Fitur yang terdapat pada JQuery•Mempermudah akses dan manipulasi ke bagian

page tertentu. jQuery menawarkan sebuah selector yang robust dan efesien untuk mengambil bagian tertentu pada dokumen yang selanjutnya bisa dimanipulasi•Mempermudah perubahan tampilan dokumen. jQuery dapat mengubah tampilan CSS dengan mudah•Merespon interaksi user dengan webpage. jQuery mempunyai cara yang sangat-sangat elegan untuk memasukkan sebuah even ke dalam salah satu bagian dari webpage.•Menambah animasi. Kita dapat memberi animasi pada webpage kita dengan jQuery•Fungsi Event HTML•Traversal HTML DOM dan modifikasi•Utilitas

Kelebihan dan Kelemahan JQuery•Kelebihan

•Kompatibel dengan hampir seluruh browser•jQuery telah digunakan oleh website-website raksasa•Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)•Dokumentasi dan tutorialnya lengkap •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•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).•Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.•Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.

Kelemahan

•Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat diload) 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.

Jquery Selector

Selector adalah fungsi utama pada jQuery. semua fungsi lainnya di jQuery dapat diakses melalui selector. Penggunaan paling dasarnya adalah mempassingkan sebuah ekspressi (biasanya ekspressi css) yang kemudian selanjutnya jQuery akan mencari elemen yang cocok.

Jquery Manipulation

Jquery Manipulation maksudnya penggunaan jquery untuk memanipulasi struktur dokumen. Ada 7 kategori manipulasi yang disupport oleh jquery yaitu :1.Perubahan Content2.Insert kedalam object3.Insert dikeluar object4.Insert kesekitar object5.Mereplace object6.Menghapus object. kita dapat menghapus object

tertentu7.Mengopi object

Cara Mengimplementasikan JQuery

beberapa plugin jquery yang sering digunakan oleh beberapa web developer dalam membuat atau membangun sebuah website, diantaranya:

1.Drop Down Menu2. Tool Tips3.Autocomplete Search4.Validasi Form5.JQuery Cycle Plugin6.Teks Berjalan

Syntax-Syntax dalam 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.

menyembunyikan elemen saat ini$("p").hide()

menyembunyikan semua paragraf atau konten dari tag <p>$(".test").hide()

menyembunyikan elemen yang mempunya class=”test”$("#test").show()

•menampilkan elemen yang mempunyai id=”test”

Sekian dan Terima Kasih