Cara Menggunakan Selector Pada JQuery

21 Jun 2015 23:33 • Post By

menggunakan selector di JQUERY
Selector adalah bagian yang sangat berperan penting di dalam JQuery dan javascript. karena dengan selector lah kita akan dapat memanipulasi atau memilih element yang akan di pakaikan event.
penulisan selector di jquery di awali dengan tanda $ dolar . dan nama selector di apit oleh tanda kurung pembuka “(” dan kurung penutup “)”, contoh nya $(“selector”) ,selector di JQuery terdiri dari id,class dan element html . berikut ini akan saya buatkan contoh cara penggunaan selector di JQuery dengan id, class dan dengan element html .
1. Selector id JQuery
untuk menggunakan selector id letakkan atribut id di dalam tag element pembuka. seperti hal nya pada selector id pada css, selector id pada JQuery juga menggunakan tanda “#” sebagai pengenal dan pemanggil selector id .
cara penggunaan selector id
<html>
     <head>
	  <script src="jquery.js" type="text/javascript"></script>
	  <script>
		$(document).ready(function(){
		    $("#tombol").click(function(){  //memanggil id selector tombol
			$("#kotak").hide(); //memanggil selector id kotak
		    });
		});
	  </script>
     </head>
     <body>
          <button id="tombol">KLIK !!!</button>	
          <div id="kotak" style="background:red;width:300px;height:300px"></div>
     </body>
</html>
ketika di jalankan dan tombol di klik maka kotak merah akan hilang seperti pada contoh JQuery di tutorial.
2. Selector class JQuery
untuk menggunakan selector class letakkan atribut class di dalam tag element pembuka. seperti pada contoh selector id di atas. untuk penulisan selector class pada saat di panggil gunakan tanda ” . ” ( titik )
penggunaan selector class di Jqeury
penggunaan selector class di Jqeury
<html>
     <head>
	  <script src="jquery.js" type="text/javascript"></script>
	  <script>
		$(document).ready(function(){
		    $(".tombol").click(function(){  //memanggil id selector tombol
			$(".kotak").hide(); //memanggil selector id kotak
		    });
		});
	  </script>
     </head>
     <body>
          <button class="tombol">KLIK !!!</button>	
          <div class="kotak" style="background:red;width:300px;height:300px"></div>
     </body>
</html>
3. Selector element HTML JQuery
untuk menggunakan selector element html di JQuery anda tidak perlu menggunakan selector class atau id .anda bisa langsung memanggil element HTML dengan JQuery .
penggunaan selector langsung element HTML
penggunaan selector langsung element HTML
<html>
     <head>
	  <script src="jquery.js" type="text/javascript"></script>
	  <script>
		$(document).ready(function(){
		    $("button").click(function(){  //memanggil id selector tombol
			$("div").hide(); //memanggil selector id kotak
		    });
		});
	  </script>
     </head>
     <body>
          <button>KLIK !!!</button>	
          <div style="background:red;width:300px;height:300px"></div>
     </body>
</html>

perhatikan pada contoh selector dengan element HTML . nama element langsung bisa di panggil dengan JQuery

Jangan lupa Subscribe ya !!

Cara Menggunakan Selector Pada JQuery | Tutorialku.Net | 4.5