Memilih Elemen Mana yang Akan Diberi Efek jQuery


0

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:

Memilih Elemen Mana yang Akan Diberi Efek jQuery

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:

$(document).ready
(
function()
{
$(“#tombol”).click
(
function()
{
$(“table#coba”).hide();
}
);
});

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:

$(document).ready
(
function()
{
$(“#tekan”).click
(
function()
{
$(“kbd”).hide();
}
);
});

Facebook
Google

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


Like it? Share with your friends!

0

What's Your Reaction?

Bangga Bangga
0
Bangga
Keren Keren
0
Keren
Lucu Lucu
0
Lucu
Sedih Sedih
0
Sedih
Wow Wow
0
Wow
Marah Marah
0
Marah
Takut Takut
0
Takut

Legend

Pecinta ayam goreng, tempe penyet dan klepon.

Comments

comments

9 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format