Memilih Elemen Mana yang Akan Diberi Efek jQuery

Setelah pada artikel sebelumnya Anda sudah memahami tentang penggunaan jQuery, maka pada artikel kali ini akan dibahas lebih mendalam tentang selector. Apa yang dimaksud dengan selector itu? Selector adalah suatu syntax (baca: Mengenal Syntax jQuery) jQuery untuk memilih element mana saja yang akan diberi event.

Dalam hal ini, selector dibagi menjadi dua, yaitu selector elemen dan selector atribut (seperti: href, height, width, dan sebagainya). Beberapa contoh selector elemen adalah sebagai berikut:

$("table"): menyeleksi semua table yang ada.
$("table.coba"): menyeleksi table yang memiliki class="coba"
$(table#coba"): menyeleksi table yang memiliki id="coba"

Ketiga contoh tersebut adalah selector elemen yang akan memberikan event sesuai dengan elemen yang ditunjuk. Table bisa diganti dengan elemen lain misalnya: p (paragraf), div, input, dan lain sebagainya. Untuk lebih jelasnya, alangkah baiknya kalau langsung mencobanya. Langkah-langkahnya sebagai berikut:

1. Buatlah file baru pada Dreamweaver, Notepad++ atau Notepad biasa, lalu copy dan paste kode html berikut ini:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

</head>

<body>
<table id="coba" width="382" border="1">
  <tr>
    <td>Table 1</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<table width="382" border="1">
  <tr>
    <td>Table 2</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>
  <input type="button" name="button" id="tombol" value="Button">
</p>
</body>
</html>

Setelah itu masukkan kode jQuery berikut ini di atas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

Dan, jangan lupa kode jQuery ini :

<script type="text/javascript">

$(document).ready

   (

      function() 

   {

          $("#tombol").click

        (

               function()

     {

   $("table#coba").hide();

  }

  );

});

</script>

Setelah itu, simpan kode tersebut dengan nama percobaan.html.

Setelah itu, silahkan coba buka file yang tadi Anda simpan. Sekarang, coba klik tombol yang ada. Maka, jika tombol tersebut di klik table 1 akan hilang, sedangkan table 2 tidak. Untuk lebih jelasnya, kurang lebih cara kerjanya akan seperti ini:

Table 1

Table 2

Bagaimana? Sudah cukup paham? Jika sudah, kita coba pada selector yang kedua. Selector yang kedua ini adalah selector atribut. Selector ini akan memilih elemen dengan atribut tertentu. Beberapa contoh selector atribut antara lain:
$("[href]"): menyeleksi semua elemen yang memiliki atribut href
$("[href='#']"): menyeleksi elemen yang memiliki atribut href='#'
$("[href!='#']"): menyeleksi elemen yang memiliki atribut href yang nilainya tidak sama dengan '#'
$("[href$='.jpg']"): menyeleksi elemen yang memiliki atribut href yang nilainya berakhiran ".jpg"

Sebagai contoh, ikuti langkah-langkah berikut ini:

1. Buatlah file baru pada Dreamweaver, Notepad++ atau Notepad biasa, lalu copy dan paste kode html berikut ini:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>


</head>


<body>
<p><a href="http://www.facebook.com">Facebook</a></p>
<p><a href="http://www.google.com">Google</a></p>
<p>
<input type="button" name="button" id="tekan" value="Tombol">
</p>
</body>
</html>

Setelah itu masukkan kode jQuery berikut ini di atas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

Dan, jangan lupa kode jQuery ini :

<script type="text/javascript">

$(document).ready

   (

      function() 

   {

          $("#tekan").click

        (

               function()

     {

   $("[href='http://www.facebook.com']").hide();

  }

  );

});

</script>

Setelah itu, simpan kode tersebut dengan nama percobaan2.html.

Setelah itu, silahkan coba buka file yang tadi Anda simpan. Sekarang, coba klik tombol yang ada. Maka, jika tombol tersebut di klik tulisan yang mengarah ke facebook.com akan hilang, sedangkan yang ke google.com tidak. Untuk lebih jelasnya, kurang lebih cara kerjanya akan seperti ini:

Facebook
Google

Bagaimana? Sudah mengerti? Sangat menyenangkan bukan dalam mempelajari jQuery? Mungkin di artikel-artikel selanjutnya, saya akan lebih banyak membahas tentang jQuery ini.