<html>
<head>
<Script language="javascript">
function hello()
{
alert("hello world!");
}
</script>
</head>
<body>
<input type="button" onClick="hello()" value="click me"/>
</body>
</html>
Jika html diatas dijalankan/dibuka dari browser maka akan menampilkan button yang apabila di click maka akan muncul alert.
Pendekatan jQuery agak berbeda, jQuery melakukan selection/query terhadap element - element html. berikut ini contoh selection jquery berdasarkan kode diatas.
<html>
<head>
<-- assumsi jquery.js ada dalam folder yang sama -->
<Script language="javascript" src="jquery.js" ></script>
<Script language="javascript">
$(document).ready(function(){
$("input").click(function(){
alert("hello jquery!");
});
});
</script>
</head>
<body>
<input type="button" value="click me"/>
</body>
</html>
Bila diperhatikan memang sangat berbeda ya. mari kita bahas
$(document).ready(function(){
//disini kode anda
});
merupakan code yang membantu jquery memastikan bahwa document telah terdownload sempurna, sehingga tidak ada bagian - bagian halaman yang tertinggal.
$("input").click(function()
{
//disini code
});
sedangkan kode diatas ini berarti jquery melakukan selection terhadap tag input, dan mengikat fungsi klik pada elemen/tag input tersebut. Sehingga jika anda punya element selain button maka akan ikut terquery/terpilih oleh jquery.
Contoh selection lainnya :
- $("#myinput") --> mencari element dengan id "myinput"
- $(".myclass") --> mencari element dengan css class "myclass"
- $(".myclass").children() --> mencari isi dari element dengan css class "myclass"
Nah jquery selection ini mengikuti konsep CSS3 Selection.
Ok. Cukup Sekian untuk Artikel Ini. Happy Coding!
Download jQuery cheatseet untuk mengetahui lebih banyak jquery selection
