Tutorial jQuery: Dasar-dasar selectors


Bismillah, sudah lama vakum akhirnya bisa nulis jg. Tulisan pertama bulan ini yaitu tutorial jquery tentang selectors. Ga usah basa-basi lagi langsung aja disiapkan peralatan perangnya yaitu NotePad++, jQuery JavaScript Library v1.4, browser tentunya(disarankan menggunakan mozilla firefox + plugin firebug biar gampang debugging-nya) dan jangan lupa berdo’a biar diberi kemudahan oleh Allah dalam memahami tutorial ini.^_^

Anatomi JQuery Script

Pada dasarnya skrip JQuery terbagi atas tiga bagian utama yaitu Selector, action, dan parameter. Contoh penulisannya sebagai berikut :

jQuery("elemen").action("parameter");
//atau bisa juga ditulis sebagai berikut
$("elemen").action("parameter");

Simple kan?

It’s Begin

Yang perlu disiapkan sebelum memulai maka kita buat terlebih dahulu file tutor1.html yang sekaligus memanggil jquery,js yang sudah didownload sebelumnya sebagai berikut:

//Filename: tutor1.html
<html>
  <head>
  <script type="text/javascript" src="jquery-1.4.js"></script>
  <script type="text/javascript">
	//selanjutnya perintah jQuery diletakkan disini
  </script>
  </head>
  <body>
  </body>
</html>

Sebelum kita memulai untuk berinteraksi dengan halaman html maka perlu dipastikan bahwa elemen pada halaman html harus sudah di load. Nah bagaimana ngecek halaman itu sudah selesai di load atau belum? Ternyata caranya mudah sekali yaitu

$(document).ready(function() {
   alert('Siap menjalankan perintah jQuery kapten!');
});

Selectors

Dalam JQuery, semua perintah-perintahnya mengacu pada elemen yang terdapat halaman html. Jadi fungsi selectors disini untuk memilih elemen-elemen tertentu yang akan dilakukan operasi terhadap elemen tersebut. Terdapat elemen-elemen dasar yang bisa di pilih oleh selectors yaitu:

  1. Nama tag html, seperti div, p, tr, body, dan lain-lain.
  2. id
  3. class

Untuk lebih jelasnya akan penulis bahas satu persatu dengan contoh yang sederhana agar mempermudah Anda dalam memahami Selectors.

Selectors tag

Cara penggunaanya dengan langsung menyebut nama tag elemennya -> $(“div”). Untuk lebih jelasnya perhatikan skrip selector_tag.html dibawah ini:

<html>
  <head>
  <script type="text/javascript" src="jquery-1.4.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("div").addClass("merah");
	  $("body").addClass("birumuda");
	  $("p").addClass("hijau");
    });
  </script>
  <style type="text/css">
  .merah {
    color: red;
    font-weight: bold;
  }
  .birumuda{
	background:cyan;
  }
  .hijau{
	background:white;
	font-style:italic;
	color: green;
  }
  </style>
  </head>
  <body>
    <div>
		Text dengan format .merah
        <p>Text dengan format .hijau</p>
    </div>
	<div>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
	<div>
  </body>
</html>

Penjelasan skrip tag selector diatas:

Semua tag dengan nama div akan terpilih oleh selectors, kemudian diberikan operasi “.merah” terhadap elemen yang terpilih tersebut(operasi “merah” mengacu pada style yang terlah didefinisikan di bagian head yaitu .merah) , sehingga semua text yang berada didalam tag div akan berwarna merah dan tebal. Tapi mengapa text “Text dengan format .hijau” formatnya berbeda? Karena text tersebut berada dalam tag <p></p> dan pada skrip diatas juga dilakukan operasi khusus pada tag p sehingga aturan pewarnaan, text, dan lain-lain tidak mengikuti operasi “.merah” melainkan “.hijau”. Namun jika operasi “.hijau” tidak meng-override operasi “.merah” maka style dalam tag p akan mengikuti style pada tag div seperti yang ditunjukkan pada gambar 1 bahwa tulisan “Text dengan format .hijau” tetap tebal meski pada “.hijau” tidak diberi perintah untuk menebalkan text.

Hasil dari skrip diatas ditunjukkan oleh gambar 1 berikut:

Gambar 1 Preview Selector_tag.html

Selectors id

Penggunaan selector id ini dengan cara menyertakan tanda kres(#) sebelum nama elemennya -> $(#nama_elemen_id). Untuk lebih jelasnya perhatikan skrip selector_id.html berikut:

<html>
  <head>
  <script type="text/javascript" src="jquery-1.4.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#list").addClass("hijau");
    });
  </script>
  <style type="text/css">
  .hijau{
	font-style:italic;
	color: green;
	background-color: yellow;
  }
  </style>
  </head>
  <body>
    <div>
		Lorem ipsum dolorsit amet.
    </div>
	<div>
        <ul id="list">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
	<div>
  </body>
</html>

Penjelasan skrip selector_id.html:

Selector akan memilih tag dengan id “list”(hanya terdapat satu tag yang mempunyai id “list” pada selector_id.html yaitu tag ul) kemudian akan diberikan operasi “hijau” terhadap elemen yang dipilih tersebut, sehingga semua teks yang berada didalam tag ul id “list” akan berwarna hijau dan miring dengan background berwarna kuning. Hasil preview dari skrip tersebut ditunjukkan pada gambar 2.

Gambar 2 Preview Selector_id.html

Selector class

Penggunaan selector id ini dengan cara menyertakan tanda titik(.) sebelum nama elemennya -> $(.nama_elemen_class). Untuk lebih jelasnya perhatikan skrip selector_class.html berikut:

<html>
  <head>
  <script type="text/javascript" src="jquery-1.4.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#list").addClass("hijau");
	  $(".item").addClass("biru");
    });
  </script>
  <style type="text/css">
  .hijau{
	font-style:italic;
	color: green;
	background-color: yellow;
  }
  .biru{
	color: cyan;
	background-color:blue;
  }
  </style>
  </head>
  <body>
    <div>
		Lorem ipsum dolorsit amet.
    </div>
	<div>
        <ul id="list">
          <li>Item 1</li>
          <li class="item">Item 2</li>
          <li>Item 3</li>
        </ul>
	<div>
  </body>
</html>

Penjelasan skrip selector_class.html:

Pertama-tama tag li dengan class “item” akan terpilih oleh selector kemudian diberikan operasi “hijau” terhadap elemen tersebut, sehingga semua text yang beraada dalam tag li class “item” akan berwarna cyan dan miring dengan background biru. Untuk lebih jelasnya lihat gambar 3.

Gambar 3 Preview Selector_class.html
Kesimpulan penggunaan selector
Nama tag cara menggunakannnya langsung menyebut nama tag/elemenya -> $(“div”)
id cara menggunakannnya dengan menyertakan tanda kress(#) sebelum nama elemenya -> $(“#nama_elemen_id”)
class cara menggunakannnya dengan menyertakan tanda titik(.) sebelum nama elemenya -> $(“.nama_elemen_class”)

Sekian dulu tutorial kali ini, tutorial selanjutnya yaitu tentang penggunaan selector yang lebih kompleks. Semoga yang sedikit ini bisa bermanfaat.😀

5 thoughts on “Tutorial jQuery: Dasar-dasar selectors

  1. hi I was luck to approach your subject in bing
    your subject is quality
    I learn much in your blog really thank your very much
    btw the theme of you site is really impressive
    where can find it

    1. you are welcome…:D
      for that theme, I just use ‘Enterprise by StudioPress’ theme (you can find it in collection theme in wordpress) with some modification.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s