SlideShare une entreprise Scribd logo
1  sur  16
Nama
NIM
ROMBEL

Disusun oleh
: UTIA FAUZIAH YAHYA
: 1102412021
: 01
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.
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)
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.











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
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.
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.
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".
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().









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










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








.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.
Memahami Dasar-Dasar jQuery

Contenu connexe

Tendances

Membuat aplikasi sederhana menggunakan java
Membuat aplikasi sederhana menggunakan javaMembuat aplikasi sederhana menggunakan java
Membuat aplikasi sederhana menggunakan javaEko Kurniawan Khannedy
 
Jquery codeigniter
Jquery codeigniterJquery codeigniter
Jquery codeigniterAbdy Mulky
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Modelhusnil
 
Android Fast Track - Database SQLite (Kamus Tiga Bahasa)
Android Fast Track - Database SQLite (Kamus Tiga Bahasa)Android Fast Track - Database SQLite (Kamus Tiga Bahasa)
Android Fast Track - Database SQLite (Kamus Tiga Bahasa)Agus Haryanto
 
Persiapan Sebelum Ujian Sertifikasi Associate Android Developer - Ahmad Arif ...
Persiapan Sebelum Ujian Sertifikasi Associate Android Developer - Ahmad Arif ...Persiapan Sebelum Ujian Sertifikasi Associate Android Developer - Ahmad Arif ...
Persiapan Sebelum Ujian Sertifikasi Associate Android Developer - Ahmad Arif ...DicodingEvent
 

Tendances (12)

JQUERY
JQUERYJQUERY
JQUERY
 
J query
J queryJ query
J query
 
My sql dan java database connectivity
My sql dan java database connectivityMy sql dan java database connectivity
My sql dan java database connectivity
 
J query
J queryJ query
J query
 
Membuat aplikasi sederhana menggunakan java
Membuat aplikasi sederhana menggunakan javaMembuat aplikasi sederhana menggunakan java
Membuat aplikasi sederhana menggunakan java
 
Ppt jquery
Ppt jqueryPpt jquery
Ppt jquery
 
Jquery codeigniter
Jquery codeigniterJquery codeigniter
Jquery codeigniter
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Android Fast Track - Database SQLite (Kamus Tiga Bahasa)
Android Fast Track - Database SQLite (Kamus Tiga Bahasa)Android Fast Track - Database SQLite (Kamus Tiga Bahasa)
Android Fast Track - Database SQLite (Kamus Tiga Bahasa)
 
MANIPULASI DOM
MANIPULASI DOMMANIPULASI DOM
MANIPULASI DOM
 
Jquery ppt
Jquery pptJquery ppt
Jquery ppt
 
Persiapan Sebelum Ujian Sertifikasi Associate Android Developer - Ahmad Arif ...
Persiapan Sebelum Ujian Sertifikasi Associate Android Developer - Ahmad Arif ...Persiapan Sebelum Ujian Sertifikasi Associate Android Developer - Ahmad Arif ...
Persiapan Sebelum Ujian Sertifikasi Associate Android Developer - Ahmad Arif ...
 

Similaire à Memahami Dasar-Dasar jQuery

Ristianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati
 
Power point J query dan penggunaannya sebagai validasi form
Power point J query dan penggunaannya sebagai validasi formPower point J query dan penggunaannya sebagai validasi form
Power point J query dan penggunaannya sebagai validasi formHutommo Bagus
 
Jequary
Jequary Jequary
Jequary p188
 
Makalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi formMakalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi formHutommo Bagus
 
Tutorial jquery Nur Kholifah
Tutorial  jquery Nur KholifahTutorial  jquery Nur Kholifah
Tutorial jquery Nur Kholifahnur_kholi
 
Page & Dialog Transitions
Page & Dialog TransitionsPage & Dialog Transitions
Page & Dialog Transitionstakdirlovely09
 
Jquery Ajax Part 1 by Yussan
Jquery Ajax Part 1 by YussanJquery Ajax Part 1 by Yussan
Jquery Ajax Part 1 by YussanYusuf A.H.
 
Hello World in jQuery-DeviMulyani
Hello World in jQuery-DeviMulyaniHello World in jQuery-DeviMulyani
Hello World in jQuery-DeviMulyaniSyah Prian
 
Hello world in j query devimulyani
Hello world in j query devimulyaniHello world in j query devimulyani
Hello world in j query devimulyanideviMulyani
 

Similaire à Memahami Dasar-Dasar jQuery (20)

Makalah jquery
Makalah jqueryMakalah jquery
Makalah jquery
 
Ppt jquery
Ppt jqueryPpt jquery
Ppt jquery
 
Ristianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jquery
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotik
 
Jqu
JquJqu
Jqu
 
Jqu
JquJqu
Jqu
 
Power point J query dan penggunaannya sebagai validasi form
Power point J query dan penggunaannya sebagai validasi formPower point J query dan penggunaannya sebagai validasi form
Power point J query dan penggunaannya sebagai validasi form
 
Jequary
Jequary Jequary
Jequary
 
JQURTY
JQURTYJQURTY
JQURTY
 
Makalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi formMakalah J query dan penggunaannya sebagai validasi form
Makalah J query dan penggunaannya sebagai validasi form
 
Tutorial jquery Nur Kholifah
Tutorial  jquery Nur KholifahTutorial  jquery Nur Kholifah
Tutorial jquery Nur Kholifah
 
Ppt jquery
Ppt jqueryPpt jquery
Ppt jquery
 
Page & Dialog Transitions
Page & Dialog TransitionsPage & Dialog Transitions
Page & Dialog Transitions
 
Jquery Ajax Part 1 by Yussan
Jquery Ajax Part 1 by YussanJquery Ajax Part 1 by Yussan
Jquery Ajax Part 1 by Yussan
 
Khairunnisa 1205467
Khairunnisa 1205467Khairunnisa 1205467
Khairunnisa 1205467
 
penggunaan JQuery
penggunaan JQuerypenggunaan JQuery
penggunaan JQuery
 
Jquery
JqueryJquery
Jquery
 
Hello World in jQuery-DeviMulyani
Hello World in jQuery-DeviMulyaniHello World in jQuery-DeviMulyani
Hello World in jQuery-DeviMulyani
 
Hello world in j query devimulyani
Hello world in j query devimulyaniHello world in j query devimulyani
Hello world in j query devimulyani
 
Jquery id
Jquery idJquery id
Jquery id
 

Plus de utia yahya

Plus de utia yahya (20)

Tutorial mengshare data dengan rj45
Tutorial mengshare data dengan rj45Tutorial mengshare data dengan rj45
Tutorial mengshare data dengan rj45
 
Makalah java
Makalah javaMakalah java
Makalah java
 
Makalah java
Makalah javaMakalah java
Makalah java
 
Microtik
MicrotikMicrotik
Microtik
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah android
Makalah androidMakalah android
Makalah android
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 
Makalah android
Makalah androidMakalah android
Makalah android
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah java
Makalah javaMakalah java
Makalah java
 
Makalah java
Makalah javaMakalah java
Makalah java
 
Microtik
MicrotikMicrotik
Microtik
 
Microtik
MicrotikMicrotik
Microtik
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 
Microtik
MicrotikMicrotik
Microtik
 
Microtik
MicrotikMicrotik
Microtik
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 

Dernier

Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxModul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxherisriwahyuni
 
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxTopik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxsyafnasir
 
PRESENTASI PEMBELAJARAN IPA PGSD UT MODUL 2
PRESENTASI PEMBELAJARAN IPA PGSD UT MODUL 2PRESENTASI PEMBELAJARAN IPA PGSD UT MODUL 2
PRESENTASI PEMBELAJARAN IPA PGSD UT MODUL 2noviamaiyanti
 
LA PI 2 PE NDIDIKAN GURU PENGGERAK A9 OK
LA PI 2 PE NDIDIKAN GURU PENGGERAK A9 OKLA PI 2 PE NDIDIKAN GURU PENGGERAK A9 OK
LA PI 2 PE NDIDIKAN GURU PENGGERAK A9 OKDeviIndriaMustikorin
 
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptxMATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptxrofikpriyanto2
 
Buku Saku Layanan Haji Ramah Lansia 2.pdf
Buku Saku Layanan Haji Ramah Lansia 2.pdfBuku Saku Layanan Haji Ramah Lansia 2.pdf
Buku Saku Layanan Haji Ramah Lansia 2.pdfWahyudinST
 
Materi power point Kepemimpinan leadership .ppt
Materi power point Kepemimpinan leadership .pptMateri power point Kepemimpinan leadership .ppt
Materi power point Kepemimpinan leadership .pptAcemediadotkoM1
 
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...NiswatuzZahroh
 
slide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdfslide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdfNURAFIFAHBINTIJAMALU
 
aksi nyata pendidikan inklusif.pelatihan mandiri pmm
aksi nyata pendidikan inklusif.pelatihan mandiri pmmaksi nyata pendidikan inklusif.pelatihan mandiri pmm
aksi nyata pendidikan inklusif.pelatihan mandiri pmmeunikekambe10
 
MTK BAB 5 PENGOLAHAN DATA (Materi 2).pptx
MTK BAB 5 PENGOLAHAN DATA (Materi 2).pptxMTK BAB 5 PENGOLAHAN DATA (Materi 2).pptx
MTK BAB 5 PENGOLAHAN DATA (Materi 2).pptxssuser0239c1
 
Panduan Mengisi Dokumen Tindak Lanjut.pdf
Panduan Mengisi Dokumen Tindak Lanjut.pdfPanduan Mengisi Dokumen Tindak Lanjut.pdf
Panduan Mengisi Dokumen Tindak Lanjut.pdfandriasyulianto57
 
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptx
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptxKonflik, Kekerasan, dan Perdamaian Bagian 1.pptx
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptxintansidauruk2
 
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptxKeberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptxLeniMawarti1
 
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxJurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxBambang440423
 
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.pptP_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.pptAfifFikri11
 
Teks ucapan Majlis Perpisahan Lambaian Kasih
Teks ucapan Majlis Perpisahan Lambaian KasihTeks ucapan Majlis Perpisahan Lambaian Kasih
Teks ucapan Majlis Perpisahan Lambaian Kasihssuserfcb9e3
 
Edukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajiiEdukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajiiIntanHanifah4
 
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...jumadsmanesi
 
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.aechacha366
 

Dernier (20)

Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxModul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
 
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxTopik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
 
PRESENTASI PEMBELAJARAN IPA PGSD UT MODUL 2
PRESENTASI PEMBELAJARAN IPA PGSD UT MODUL 2PRESENTASI PEMBELAJARAN IPA PGSD UT MODUL 2
PRESENTASI PEMBELAJARAN IPA PGSD UT MODUL 2
 
LA PI 2 PE NDIDIKAN GURU PENGGERAK A9 OK
LA PI 2 PE NDIDIKAN GURU PENGGERAK A9 OKLA PI 2 PE NDIDIKAN GURU PENGGERAK A9 OK
LA PI 2 PE NDIDIKAN GURU PENGGERAK A9 OK
 
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptxMATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
 
Buku Saku Layanan Haji Ramah Lansia 2.pdf
Buku Saku Layanan Haji Ramah Lansia 2.pdfBuku Saku Layanan Haji Ramah Lansia 2.pdf
Buku Saku Layanan Haji Ramah Lansia 2.pdf
 
Materi power point Kepemimpinan leadership .ppt
Materi power point Kepemimpinan leadership .pptMateri power point Kepemimpinan leadership .ppt
Materi power point Kepemimpinan leadership .ppt
 
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...
Pembuktian rumus volume dan luas permukaan bangung ruang Tabung, Limas, Keruc...
 
slide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdfslide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdf
 
aksi nyata pendidikan inklusif.pelatihan mandiri pmm
aksi nyata pendidikan inklusif.pelatihan mandiri pmmaksi nyata pendidikan inklusif.pelatihan mandiri pmm
aksi nyata pendidikan inklusif.pelatihan mandiri pmm
 
MTK BAB 5 PENGOLAHAN DATA (Materi 2).pptx
MTK BAB 5 PENGOLAHAN DATA (Materi 2).pptxMTK BAB 5 PENGOLAHAN DATA (Materi 2).pptx
MTK BAB 5 PENGOLAHAN DATA (Materi 2).pptx
 
Panduan Mengisi Dokumen Tindak Lanjut.pdf
Panduan Mengisi Dokumen Tindak Lanjut.pdfPanduan Mengisi Dokumen Tindak Lanjut.pdf
Panduan Mengisi Dokumen Tindak Lanjut.pdf
 
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptx
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptxKonflik, Kekerasan, dan Perdamaian Bagian 1.pptx
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptx
 
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptxKeberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
 
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxJurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
 
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.pptP_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
 
Teks ucapan Majlis Perpisahan Lambaian Kasih
Teks ucapan Majlis Perpisahan Lambaian KasihTeks ucapan Majlis Perpisahan Lambaian Kasih
Teks ucapan Majlis Perpisahan Lambaian Kasih
 
Edukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajiiEdukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajii
 
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...
UNGGAH PEGANGAN LOKAKARYA DAN PENDAMPINGAN INDIVIDU DALAM KEGIATAN PEMBEKALAN...
 
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.
 

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