Belajar jQuery‎ > ‎

02. Fungsi $(document).ready()

posted Nov 11, 2011, 4:35 AM by Editor KursusInternet   [ updated Dec 31, 2011, 8:19 AM ]

Apa itu $(document).ready() ?

jQuery sangat efektif dan banyak digunakan untuk memanipulasi berbagai elemen HTML untuk menimbulkan berbagai efek seperti animasi dan pengaturan interaksi dinamis.

Namun elemen-elemen yang dimanipulasi tersebut harus telah di-load (dimuat) secara penuh oleh browser sebelum bisa diolah. Jika hanya sebagian yang dimuat, maka script akan menimbulkan efek yang rancu / tidak sesuai dengan yang diinginkan. Elemen-elemen yang dimaksud sering disebut sebagai bagian dari Document Object Model (DOM).

Untuk mengatasi hal ini, maka diperkenalkan fungsi / function $(document).ready(). Fungsi ini menunggu sampai elemen-elemen  DOM siap untuk diolah.

Contoh Penggunaan

Gambar berikut menampilkan function ini yang juga terdapat pada contoh file "halo_internet.html" pada artikel sebelumnya


Terlihat function ini didefinisikan di dalam tag <script> setelah kita menambahkan file pustaka jquery-1.7.min.js. Di dalam function ini kita melakukan pengolahan elemen dengan id "link_satu" yang ketika diklik akan diganti teksnya menjadi "Halo Internet".

Elemen DOM "link_satu" adalah elemen dari tag a (anchor) yang mengapit teks "Click Saya !". Jika elemen ini sudah ready dan tampil di halaman browser kita maka ketika diklik maka akan diubah teksnya menjadi dari "Click Saya" menjadi "Halo Internet !". 

Kesimpulan

Function $(document).ready() pada jQuery merupakan function khusus yang digunakan oleh jQuery untuk menganalisa / mendeteksi apakah DOM pada halaman HTML / web kita sudah siap digunakan.

Apabila belum siap, maka kode yang didefinisikan pada bagian dalam function ini tidak akan bisa dijalankan. Demikian juga sebaliknya, jika DOM sudah siap maka kode yang didefinisikan dapat dijalankan.

Dengan kontrol seperti ini, maka kita dapat meminimalisasi kesalahan perilaku (behavior) script yang tidak kita kehendaki.

Sumber Referensi

Comments