Table 1  

 

Table 2  

Setelah itu masukkan kode jQuery berikut ini di atas kode : Dan, jangan lupa kode jQuery ini : 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: Untitled Document

Facebook

Google

Setelah itu masukkan kode jQuery berikut ini di atas kode : Dan, jangan lupa kode jQuery ini : 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.' name='description'/>

June 26, 2014

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:

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:

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.

Loading...

Author Profile

9 komentar

wahh Mas memang super banget. paham yang ginian. saya samai kemut2 nih

Untuk saat ini belum paham yang ginian mas. Makasih mas informasinya..kunjungan perdana saya.

ijin belajar mas biar saya makintau tentang jquery :D
makasih telah berbagi... keep sharing :)

saya malah ngga ngerti gan :D wkwkw

Silakan tulis komentar Anda...