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 (1) : Apa itu jQuery ?

Saat ini sangat jarang website atau aplikasi berbasis web yang tidak melibatkan javascript. Hal-hal seperti membuat dropdown menu, membuat prompt alert, sampai mengimplementasikan ajax biasanya dilakukan dengan menggunakan javascript. Nah, berkaitan dengan javascript ada sebuah library javascript bernama jQuery yang akan memudahkan anda dalam menggunakan javascript. Untuk memahami jQuery, sebaiknya anda sudah terlebih dahulu tahu cara penggunaan javascript. Namun, tenang saja, disini saya akan membuatnya sesederhana mungkin.

Tulisan ini adalah tutorial berseri tentang JQuery, Jadi setelah anda membaca tulisan ini anda bisa melanjutkan ke posting berikutnya, berikut daftar lengkapnya:

Perlu diketahui pula bahwa JQuery bukanlah sesuatu yang baru dalam dunia web development. Kemungkinan besar, banyak diantara anda yang sudah kenal dengan JQuery. Tutorial ini, dibuat khusus bagi yang masih pemula dan masuk kategori JQuery basic. Jadi jika anda sudah bepengalaman dalam web development, mungkin tutorial ini bukan untuk anda. 😀

Download JQuery

Untuk mengunduh JQuery, anda tinggal buka jquery.com lalu unduh kode JQuery yang anda perlukan. Disana terdapat dua versi JQuery, yaitu versi development dan versi production. Dimana pada versi production ukuran file menjadi lebih kecil karena telah dikompress (minified). Versi production dan versi development bisa dibedakan dengan nama file-nya, dimana pada versi production terdapat kata ‘min’, misalnya jquery.min.js, ‘min’ artinya minified.

Jika anda buka versi production maka anda akan kesulitan membaca kode yang ada didalamnya karena sebagian spasi dan baris baru telah dihilangkan. Inilah yang dinamakan dengan minified. Berbeda dengan versi development yang masih bisa dibaca dan terlihat seperti kode javascript biasa.

Menambahkan JQuery pada halaman HTML

Untuk menambahkan JQuery pada halaman HTML, caranya cukup mudah. Pertama-tama, buat sebuah file index.html dan tempatkan pada satu folder dengan file JQuery yang anda unduh. Selanjutnya, anda hanya perlu menambahkan syntax sebagai berikut di dalam tag head:

	<script type="text/javascript" src="jquery.js"></script>

Ganti jquery.js disesuaikan dengan nama file JQuery yang anda unduh.

Namun meskipun anda dapat menempatkan kode tersebut di dalam tag head, sangat disarankan untuk menyimpannya sebelum tag penutup </body> hal ini karena kode HTML dan CSS tidak akan ditampilkan sebelum javascript di load sepenuhnya jika javascript/jquery di load pada bagian head. Dengan menempatkannya di bagian bawah (sebelum tag penutup </body>) maka HTML dan CSS akan ditampilkan meskipun JQuery belum sepenuhnya di-load. Hal ini berlaku juga bagi library lainnya.

Melakukan manipulasi DOM

Pada JQuery kita bisa mengambil sebuah element dari HTML, kemudian melakukan sesuatu terhadap element tersebut. Misal, kali ini kita akan mengambil sebuah element <li> yang berada di dalam tag <ul>. Setelah itu ubah text yang ada di dalamnya menjadi berwarna merah. Sebelumnya, kita telah membuat file bernama index.html, sekarang ubah file tersebut menjadi sebagai berikut:

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

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

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

</body>
</html>

Simpan kode diatas kemudian buka dengan menggunakan browser (firefox, chrome atau browser lainnya). Maka, sebuah list akan muncul dengan tulisan berwarna merah. Jika anda perhatikan baris perintah $('ul li').css('color', 'red'); maka anda akan tahu mengapa list tersebut berwarna merah. Sekarang kita buah, perintah tersebut menjadi sebagai berikut:

	$('ul li').css('color', 'blue');

Maka sekarang list tersebut akan berwarna biru. Perhatikan bahwa syntax $('ul li') berfungsi sebagai selector seperti halnya pada css. Jadi anda juga bisa menggunakan id atau class. Misalnya $('#hello') atau $('world').

Menambahkan class

Selain menambahkan css pada sebuah element seperti yang telah saya contohkan diatas, kita juga bisa menambahkan class. Perhatikan contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
	<style type="text/css">
	.merah{
		color:red;
		font-size: 50px;
	}
	</style>
</head>
<body>

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

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		$('ul li').addClass('merah');
	</script>

</body>
</html>

Perhatikan contoh diatas, kita membuat sebuah class pada css dengan nama class yaitu merah. Setelah itu kita menambahkan class tersebut pada tag li dengan menggunakan JQuery : $('ul li').addClass('merah');.

Kesimpulan

Setelah membaca artikel ini semoga anda paham mengenai apa itu JQuery dan dasar-dasar dalam menggunakannya. Pada bagian kedua, kita akan belajar lebih jauh tentang JQuery dan tentunya bagian kedua ini cukup penting jika anda ingin lebih mahir. Semoga bermanfaat.

Belajar JQuery