Digitalmapia adalah situs dimana semua orang bisa menulis artikelnya sendiri. Klik "Login/Register untuk masuk, lalu klik "Tulis Artikel" untuk mulai menulis.

Seri belajar JQuery(2): Lebih familiar dengan document ready.

Tulisan ini adalah tutorial berseri tentang JQuery, apa yang ditulis disini merupakan kelanjutan dari tulisan sebelumnya, berikut ini adalah daftar lengkap seri belajar JQuery pada blog ini:

 

Pada tulisan sebelumnya, saya menyarankan agar me-load dan menulis kode jquery pada bagian bawah sebelum tag body. Namun, jika anda lebih suka menulis jquery pada bagian <head>, ada beberapa hal yang perlu anda perhatikan. Diantaranya adalah sebagai berikut:

JQuery tidak berpengaruh terhadap element

Untuk memberi contoh, pertama-tama buat sebuah file dengan nama index2.html satu folder dengan file index.html yang telah kita buat pada bagian sebelumnya. Isi dari index2.html adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		$('ul li').css('color', 'red');
	</script>

</head>
<body>

	<ul>
		<li>Hello</li>
		<li>World</li>
	</ul>

</body>
</html>

Jika anda perhatikan, kode diatas terlihat tidak bermasalah dan sudah sesuai dengan yang kita pelajari pada bagian sebelumnya. Bedanya, kita hanya menempatkan JQuery pada bagian head. Namun, jika anda jalankan pada browser, maka tampak tulisan yang ada pada list berwarna hitam, dimana seharusnya berwarna merah.

Pertanyaanya sekarang, mengapa bisa demikian? hal ini dikarenakan kode JQuery tidak dijalankan. Karena JQuery dipanggil sebelum html dibawahnya di-load, maka JQuery tidak mengenali ul li yang dimaksud. Jadi, ketika kode JQuery dijalankan oleh browser, tag ul li masih belum di-load oleh browser dan masih belum tersedia.

Menggunakan fungsi $(document).ready()

Untuk mengatasi permasalahan diatas, kita akan menggunakan fungsi $(document).ready(). Ubah index2.html menjadi sebagai berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
	
		$(document).ready(function(){
			$('ul li').css('color', 'red');
		})
	
	</script>

</head>
<body>

	<ul>
		<li>Hello</li>
		<li>World</li>
	</ul>

</body>
</html>

Sekarang apabila anda buka melalui browser, maka list akan berwarna merah sebagaimana yang seharusnya. Dengan demikian, dapat disimpulkan kode diatas telah berjalan dengan baik. Hal ini dikarenakan kita telah memindahkan kode sebelumnya kedalam fungsi $(document).ready() sehingga kode $('ul li').css('color', 'red'); baru akan dijalankan ketika halaman telah di-load sepenuhnya.

Alternative untuk $(document).ready

Pada jQuery, anda bisa menulis fungsi $(document).ready() dengan cara yang lebih singkat yaitu dengan cara seperti berikut:

$(function(){})

Dengan demikian, untuk mengubah text pada list sehingga berwarna merah, anda bisa melakukannya dengan cara sebagai berikut:

<script type="text/javascript">

	$(function(){
		$('ul li').css('color', 'red');
	})

</script>

Namun, cara seperti ini hanya disarankan apabila anda membuat program secara individu. Hal ini karena tingkat keterbacaan program menjadi berkurang. Jika anda bekerja secara tim, sebaiknya tetap menggunakan $(document).ready() agar mudah dipahami oleh rekan satu tim.

Penutup

Pada bagian berikutnya, kita akan membahas tentang cara-cara melakukan manipulasi DOM. Sebenarnya, manipulasi DOM sudah kita pelajari pada bagian 1. Namun, pada bagian 3 pembahasan kita akan lebih detail lagi. Semoga bermanfaat.

Belajar JQuery