Jquery

16
JQUERY Disusun oleh Nama : UTIA FAUZIAH YAHYA NIM : 1102412021 ROMBEL : 01

description

 

Transcript of Jquery

Page 1: Jquery

JQUERY

Disusun olehNama : UTIA FAUZIAH YAHYANIM : 1102412021ROMBEL : 01

Page 2: Jquery

Pertama kali dibuat oleh John Resig pada tahun 2005, JQuery sendiri pertama kali dirilis tanggal 14 Januari 2006.

Dia terinspirasi dari Behavior code. Saat itu, Dia ngerasa hasil dari Behavior Code tidak elegan dan masih jelek, maka dikembangkannya JQuery. Dimana dengan penulisan code JQuery jadi lebih simple, gampang dan tentunya dengan hasil yang memuaskan.

A. Sejarah jquery

Page 3: Jquery

1. JQuery versi 1.0 (1.0.1, 1.0.2, 1.0.3, 1.0.4)2. JQuery versi 1.1 (1.1.1, 1.1.2, 1.1.3,

1.1.3.1, 1.1.4)3. JQuery versi 1.2 (1.2, 1.2.1, 1.2.2, 1.2.3,

1.2.4, 1.2.5, 1.2.6)4. JQuery versi 1.3 (1.3.1, 1.3.2)5. JQuery versi 1.4 (1.4.1, 1.4.2, 1.4.3, 1.4.4)6. JQuery versi 1.5 (1.5.1, 1.5.2)7. JQuery versi 1.6 (1.6.1, 1.6.2, 1.6.3, 1.6.4)

Perkembangan versi jQuery

Page 4: Jquery

JQuery adalah librari JavaScript yang memungkinkan kita untuk membuat program web pada suatu halaman web, tanpa harus secara eksplisit kita menambahkan event atau pun properti pada halaman web tersebut.

Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming.

B. Pengertian Jquery

Page 5: Jquery

Pengetahuan dasar mengenai HTML, CSS dan Javascript. Library jQuery mempunyai kemampuan:

Kemudahan mengakses elemen-elemen HTML

Memanipulasi elemen HTML Memanipulasi CSS Penanganan event HTML Efek-efek javascript dan animasi Modifikasi HTML DOM AJAX Menyederhanakan kode javascript lainnya

Page 6: Jquery

1. Sintaks jQuerySintaks :$(selector).action()

Tanda dollar, untuk mendefinisikan jQuery (selector), untuk menunjukkan elemen yang dipilih atau dituju action(), adalah jQuery action yang akan dilakukan terhadap elemen

C. Sintaks, Selector, Attribute Selector,dan Efek-efek JQuery

Page 7: Jquery

2. jQuery SelectorSelector memungkinkan anda untuk

memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. jquery elemen selectors dan attribute selectors memungkinkan anda untuk memilih elemen HTML dengan nama tag, nama atribut, atau konten.

Page 8: Jquery

3. JQUERY ATTRIBUTE SELECTORSjQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada : $("[href]") memilih semua elemen dengan atribut href.$("[href='#']") memilih semua elemen dengan atribut href bernilai = "#".$("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#".$("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".

Page 9: Jquery

4. Efek-Efek dengan jQuery Salah satu kemampuan jQuery adalah

adanya fungsi-fungsi efek yang siap pakai. biasanya untuk membuat efek memudar di javascript. Dengan menggunakan jQuery kita cukup menggunakan fungsi $(selector).fadeIn().

Page 10: 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.

D. KEMAMPUAN YANG DIMILIKI JQUERY

Page 11: Jquery

KELEBIHAN : 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.

Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh penggunaannya,

Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website dan interaksinya.

Website yang dibangun dengan jquery akan lebih interaktif dan menarik.

Kekurangan dan kelebihan dari JQUERY

Page 12: Jquery

KEKURANGAN : 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.

Page 13: Jquery

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

Manfaat jQuery Dalam Perkembangan Aplikasi Website

Page 14: Jquery

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

FUNGSI JQUERY

Page 15: Jquery

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

Page 16: Jquery

TERIMA KASIH