Jquery
Download as PPTX, PDF0 likes283 views
Dokumen tersebut membahas tentang jQuery, perkembangan versi jQuery, penggunaan sintaks jQuery, selector jQuery, efek yang disediakan jQuery, kelebihan dan kekurangan jQuery.
![3. JQUERY ATTRIBUTE SELECTORS
jQuery 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".](https://image.slidesharecdn.com/jquery-131218174435-phpapp01/85/Jquery-8-320.jpg)
Jquery
- 1. Nama NIM ROMBEL Disusun oleh : UTIA FAUZIAH YAHYA : 1102412021 : 01
- 2. 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.
- 3. 1. 2. 3. 4. 5. 6. 7. JQuery versi 1.0 (1.0.1, 1.0.2, 1.0.3, 1.0.4) 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)
- 4. 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.
- 5. 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
- 6. Sintaks jQuery 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 1.
- 7. 2. jQuery Selector Selector 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.
- 8. 3. JQUERY ATTRIBUTE SELECTORS jQuery 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".
- 9. 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().
- 10. 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.
- 11. 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.
- 12. KEKURANGAN : 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.
- 13. 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
- 14. .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.
- 15. .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.