Scribd
Unggah
15 tayangan21 halaman

Pertemuan 7 - JQuery

Diunggah oleh

Rahmat Harun
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
15 tayangan21 halaman

Pertemuan 7 - JQuery

Diunggah oleh

Rahmat Harun
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 21

❑ jQuery merupakan sebuah library javascript

(opensource)

“Dalam dunia pemrogramman, librarry adalah kumpulan dari


berbagai fungsi “siap pakai” untuk mempermudah dalam
pembuatan aplikasi”

❑ jQuery dikembangkan pertama kali oleh John Resig


pada tahun 2006
“ Pada intinya fungsi jQuery adalah sebagai library
JavaScript yang membantu mengatur interaksi antara
JavaScript dan HTML atau website. Sehingga anda tidak perlu
secara manual serta terus menerus mengatur hal tersebut”.
1. Mendukung berbagai macam penggunaan plugin
2. Pembuatan animasi menjadi sangat mudah
3. Mampu berinteraksi dan menyesuaikan dengan
berbagai macam bahasa pemrograman
4. Penulisan fungsi atau kode pada JQuery singkat
dan jelas
5. Menyederhanakan pengembangan framework
1. Penyeleksian elemen-elemen DOM menggunakan
selector engine bernama Sizzle
2. Manipulasi HTML
3. Manipulasi CSS
4. Animasi dan efek
5. Ajax
6. HTML Event Methods
▪ Menggunakan jQuery secara offline (mendownload file jQuery dan
kemudian menghubungkan file HTML/PHP dengan file jQuery)

<script type=“text/javascript” src=“lokasi file jquery”></script>

▪ Menggunakan jQuery secara online (menghubungkan file HTML/PHP


dengan link langsung dari jQuery)

<script type=“text/javascript” src=“alamat jquery”></script>


• jQuery mempunyai sebuah motto “Writer less, do more”.
• Hal ini dapat Anda lihat ketika membandingkan dua buah
program sederhana “Hello, World!” di dalam JavaScript
dan menggunakan jQuery.

Javascript
document.getElementById(“demo”).innerHTML = “Hello, World!”;

jQuery
$(“#demo”).html(“Hello, World!”);
• Sebuah cara yang disediakan oleh jQuery untuk mencari elemen
HTML.
• Untuk pencarian selector HTML, dapat dibaca melalui id dan
class.
• Dapat juga menggunakan kombinasi keduanya.
• Dapat juga menggunakan element spesifik

Selector ID (<button id="tombol">Click Me!</button>)


var x = $(“#tombol”);

Select Class (<button class="tombol">Click Me!</button>)


Var x = $(“.tombol”);
• Suatu hal yang dilakukan oleh user ke sebuah elemet HTML
• Penggunaan event misalnya sebuah button diclick, double click,
mouseover (cursor berada di atas element), mouseout (cusor
sudah keluar dari elemen, dll.

Selector ID (<button id="tombol">Click Me!</button>)


var x = $(“#tombol”);

Select Class (<button class="tombol">Click Me!</button>)


Var x = $(“.tombol”);
▪ Merupakan output / kejadian yang dihasilkan dari penggunaan kombinasi antara selector
maupun events pada jQuery.
▪ Berikut contoh efect jquery :
• hide() : menyembunyikan element HTML
• show() : menampilkan elemen HTML
• toggle() : menampilkan dan menyembunyikan element HTML
• fadeIn() : menampilkan elemen HTML dengan efect memudar
• fadeOut() : menyembunyikan element HTML efect memudar
• fadeToggle() : menampilkan dan menyembunyikan element HTML efect memudar
• slideDown() : menampilkan elemen HTML dengan efect slide
• slideUP() : menyembunyikan element HTML dengan efect slide
• slideToggle() : menampilkan dan menyembunyikan element HTML dengan efect slide
• animate() : membuat efect animasi pada elemen HTML
Untuk latihan aplikasi penerapan jQuery, silahkan donwload materi pada
pertemuan 8 (Evaluasi).

Anda mungkin juga menyukai