Hello World
<html>
<head>
<title>JQuery Dasar</title>
<script type="text/javascript">
function clickMe() {
var text = document.getElementById("hello_text");
text.firstChild.nodeValue="Halo Dunia..."
}
</script>
</head>
<body>
<p id="hello_text">Hello World</p>
<button onclick="clickMe()">Click Me!</button>
</body>
</html>
cukup mudah bukan? Sekarang, mari kita lihat bagaimana script di atas jika dikodekan "secara" JQuery.
<html>
<head>
<title>JQuery Dasar</title>
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
</head>
<body>
<p id="hello_text">Hello World</p>
<button id="hello_button" type="button">Click Me!</button>
<script type="text/javascript">
$("#hello_button").click(function() {
$("#hello_text").html("Halo Dunia...");
});
</script>
</body>
</html>
Penggunaan JQuery sederhana pada contoh di atas memperlihatkan bagaimana JQuery dapat menyederhanakan penulisan kode pada javascript. Selain itu kode yang dituliskan juga cukup dimengerti. Pada kode JQuery di atas, kode $("#hello_button") equivalent dengan document.getElementById("hello_button"), sedangkan $("#hello_text").html("Halo Dunia...") equivalen dengan document.getElementById("hello_text").firstChild.nodeValue="Halo Dunia...". Cukup sederhana bukan?
Tanda "#" digunakan sebagai selector elemen dengan id tertentu, dalam contoh di atas id elemen yang dimaksud adalah "hello_button" dan "hello_text". Beberapa selector yang sering digunakan antara lain:
- ID selector: $("#id"). Contohnya seperti pada contoh di atas.
- All selector: $("*"). Selector ini akan mengambil semua elemen pada halaman html.
- Attribute equal selector: $("[attribute:value]"). Selector ini akan mengambil semua elemen yang memiliki attribut dengan value yang dispesifikasikan.Misalkan kita mempunyai beberapa input dengan nama yang sama.
Masih banyak lagi selector JQuery yang lain yang dapat digunakan untuk mempermudah penulisan javascript pada halaman html yang akan kita bangun. Untuk penjelasan lebih lengkapnya tentang selector JQuery dapat dilihat pada http://api.jquery.com/category/selectors/. Untuk memanipulasi elemen segera ketika halaman HTML selesai di-load, kita dapat meggunakan kode seperti berikut:<input type="text" name="hello_text" value="Hello"/> <input type="text" name="hello_text" value="World"/> <input type="text" name="hello_text" value="Hello"/> <input type="text" name="hello_text" value="World"/> <input type="text" name="hello_text" value="Hello"/> <input type="text" name="hello_text" value="World"/>Maka dengan menuliskan $("[name:hello_text]"), kita akan mendapatkan sebuah array dari elemen-elemen yang memiliki nilai atribut nama "hello_text".
$(document).ready(function() {
});
Perhatikan script berikut ini:
<html>
<head>
<title>JQuery Dasar</title>
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".hello1").css("color", "red");
$(".hello2").css("color", "blue");
});
</script>
</head>
<body>
<p class="hello1">Hello World</p>
<p class="hello2">Halo Dunia</p>
<p class="hello1">This will be red.</p>
<p class="hello2">Ini menjadi biru</p>
</script>
</body>
</html>
Script di atas akan menghasilkan tampilan seperti berikut:
Hello World
Halo Dunia
This will be red.
Ini menjadi biru
No comments:
Post a Comment