Kenalan dengan jQuery bagian 1

Apa itu jQuery ? dan mengapa kini salah satu framework Javascript ini menjadi framework yang banyak digunakan oleh developer web ?
Kini saya ingin membahas tentang jQuery sepengetahuan saya. Semoga berguna buat temen-temen yang akan belajar jQuery ini.

Menurut di situs resminya,

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Dari pengertian tersebut, dapat kita simpulkan bahwa jQuery ini memudahkan kita mentravesing HTML dari element-element serta memanipulasinya. Dengan jQuery, kita dimudahkan menuliskan code-code javascript di halaman HTML kita dengan mudah dan cepat sesuai dengan motonya “write less do more…”

Banyak teori ya, kadang ribet, langsung ke cara mengunakanya saja ya, berikut adalah cara memasangnya pada code HTML kita.

Download terlebih dahulu jQuerynya di alamat ini. Lalu sisipkan code javascript untuk nge-resource ke jQuery yang baru saja kita download. Saya mendowload versi jquery-1.4.2.min.js.

<html>
<head>
  <title>Kenalan dengan jQuery bag 1</title>
  <script type='text/javascript' src='jquery-1.4.2.min.js'></script>
</head>
<body>
</body>
</html>

Seperti itulah cara memasang jQuery pada HTML kita. Seperti tutorial bahasa pemrograman lainnya, selalu saja menampilkan “Hello World” :D, sekarang kita coba ya :

<html>
<head>
  <title>Kenalan dengan jQuery bag 1</title>
  <script type='text/javascript' src='jquery-1.4.2.min.js'></script>
  
  <script type='text/javascript'>
	$(document).ready(function(){
		alert("Hello World...");
	});
  </script>
</head>

<body>
</body>

</html>

Code pada

$(document).ready(function(){
		alert("Hello World...");
});

Mendefinisikan bahwa saat halaman di load, tampilkan alert (). Lalu apa itu $ kenapa tidak Rp (cinta rupiah :)), ya itu bawaanya…jadi bentuk struktur codenya memang seperti itu bro.

SELEKSI PADA JQUERY

Ada 4 bentuk :

  1. Fungsi jQuery yang dapat teman liat pada gambar “jQuery” atau “$” (aliasnya)
  2. Selector, penyeleksi element HTML yang akan dimanipulasi. Kalau pada gambar element “p” yang diseleksi.
  3. Action, kalau saya menyembutnya dengan tindakan yang akan kita lakukan pada element yang sudah diseleksi oleh Selector. Pada gambar, aksinya adalah “css” maksudnya mengubah style dari element “p”
  4. Parameter, kalau saya menyebutkan parameter adalah apa yang mau diubah dari action yang telah kita pilih. Pada gambar, yang diubah adala warna. Paramenter ini bersifat optional, bisa ada atau tidak atau malah banyak parameter.

Oke langsung kita coba ya.

<html>
<head>
  <title>Kenalan dengan jQuery bag 1</title>
  <script type='text/javascript' src='jquery-1.4.2.min.js'></script>
  
  <script type='text/javascript'>
	$(document).ready(function(){
		$("p").css("color","blue")
	});
  </script>
</head>

<body>
	<p>Ini adalah paragraph yang warnanya biru</p>
</body>

</html>

Nah, seperti itu kurang lebihnya.
Kita juga dapat menyeleksi element bedasarkan id atau class element tersebut berikut contohnya.

<html>
<head>
  <title>Kenalan dengan jQuery bag 1</title>
  <script type='text/javascript' src='jquery-1.4.2.min.js'></script>
  
  <script type='text/javascript'>
	$(document).ready(function(){
		$("p").css("color","blue");
		
		$(".judul").css({'background-color': '#dddddd', 'color': '#666666'});
	});
  </script>
</head>

<body>
	<p>Ini adalah paragraph yang warnanya biru</p>
	<span class='judul'>Ini Judul</span>
</body>

</html>

Lihat code

$(".judul").css({'background-color': '#dddddd', 'color': '#666666'});

Maksudnya si jQuery menyeleksi element yang mempunyai kelas judul lalu melakukan action dimana actionnya adalah menambahkan style background-color dan colornya.

EVENT PADA JQUERY

Apa itu event pada jQuery ? sederhanyanya gini, misalnya ada sebuah link dimana apabila link tersebut di klik maka akan memunculkan alert kalau si link tersebut di klik.

<html>
<head>
  <title>Kenalan dengan jQuery bag 1</title>
  <script type='text/javascript' src='jquery-1.4.2.min.js'></script>
  
  <script type='text/javascript'>
	
	$(function(){
		$(".link_class").click(function(){
			alert("Ough...saya diklik niy");
		});
	});
	
  </script>
</head>

<body>
	<a href='#' class='link_class'>Saya Sebuah Link</a>
</body>

</html>

Jadi eventnya apa ? ya click itu lho…
Sekarang kita coba event change().

<html>
<head>
  <title>Kenalan dengan jQuery bag 1</title>
  <script type='text/javascript' src='jquery-1.4.2.min.js'></script>
  
  <script type='text/javascript'>
	
	$(function(){
		$(".link_class").click(function(){
			alert("Ough...saya diklik niy");
		});
		
		$(".select_class").change(function(){
			$(".result_select").text($(".select_class").val());
		});
	});
	
  </script>
</head>

<body>
	<a href='#' class='link_class'>Saya Sebuah Link</a>
	<br />
	<br />
	
	<form>
		<select class='select_class'>
			<option value='adiputra'>Adiputra</option>
			<option value='anas'>Anas</option>
		</select>
	</form>
	
	<span class='result_select'></span>
</body>

</html>

Dari code itu, kita dapat liat apabila code ini dijalankan, lalu user memilih option “Adiputra” maka isi dari element span yang memiliki class “result_select” akan berisi value dari option “Adiputra” yaitu “adiputra”.

Lihat ada event text() dan event val().

Event text() berfungsi untuk menyisipkan text pada element yang diseleksi. Dan event val() berfungsi mengambil value dari element yang diseleksi.

Gemana mudah bukan ?

Sudah dulu ya,,nanti kita bahas mengenai efek-efek animasi di jQuery (wah,,ini bagian yang menarik juga).

[ demo ]

Referensi :

  1. jQuery Novice to Ninja – Sitepoint
  2. jQuery Recipe – Apress
  3. Situs Resmi jQuery.

9 thoughts on “Kenalan dengan jQuery bagian 1

  1. Ping-balik: Kenalan dengan jQuery bagian 2 « Mari Terus Belajar Dan Berbagi

  2. @ putra :
    wah,,trims mas udah berbagi ilmu di blog tu…terjemahan buku dari John Resig ya…

    tp sy lebih suka baca buku aslinya klu masalah ilmu2 IT..skalian belajar bhs inggris mas :p

  3. @adiputra : iya itu lg isenk aja, terjemahanya acak2kan ya ???, msh belajar nulis soalnya… hiks.., sbnrnya si buat catatan probadi buat notes doang…

  4. @ putra :
    kadang klu beli buku terjemahan emang acak2-an…hehe 🙂
    dulu tujuan sy ngeblog jg belajar nulis,,mengungkapin isi otak ke tulisan,,biar nanti klu nyusun makalah ato skripsi udah gk kaku lagi..:D
    gitu mas..:)

  5. Ketika memulai make JQuery, dengn visual studio 2005, berjaln dengan baik fungsi fadeIn dan fadeOut di ie, tapi begitu di pindah ke FF tidak berjalan, kenapa iya, Javascriptnya sudah enable di FF. Tolong masukannya gan.

  6. oh iya Gan, ini contoh Scriptnya :

    #box
    {
    background :blue;
    width :300px;
    height :300px;
    }

    $(function(){
    $(‘a’).click(function(){
    $(‘#box’).fadeOut(‘slow’);
    $(‘#box’).fadeIn(‘slow’);
    });
    });

    Click Me

Silahkan Komentar...

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s