Tutorial will be written in Bahasa Malaysia mostly, with some English to facilitate sentences meaning delivery. (As requested, also as proposed by Ramzul Ihsan.)
Perkara yang perlu dilakukan sebelum mengikuti tutorial ini:
- Download jquery library. Pilih yang PRODUCTION, dah trimmed, thus ringan. Terbaik untuk web page load dgn optimis.
- Sudah pun install php server, dan apache web server. Senang cerita, download xampp package, install.
- Notepad adalah paling basic. (IDE pun takpa).
- Focus! ;D
Tutorial ini akan menggunakan Notepad++ sebagai IDE.
Here we go!
Copy dan buat fail cuba.php dalam direktori di mana anda publish web. Contoh di sini menggunakan xampp bundle, jadi direktorinya adalah 'htdocs'.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
// kat sini kita akan letak javascript dan jquery functions
</script>
</head>
<body>
<a href="http://itsmefila.blogspot.com/">Hello Durian Tunggal</a>
</body>
</html>Cuba open web page di atas, should be in localhost. Hasilnya ada seperti begini:
Contoh direktori adalah seperti di bawah:
Beza antara kedua function tersebut adalah, dengan menggunakan window.onload, web browser perlu habis loading kesemua webpage barulah segala function2 dalam window.onload execute. Bayangkan kalau web page tu heavy, kena tunggu lama lah. Inefficient.
But, compare to jquery predefined function $(document).ready() sebagai pengganti kepada window.onload, ia akan terus execute function javascript pada mana2 element html yg sudah pun berjaya load ke atas web browser walaupun the web page is actually not fully loaded.
Seterusnya, bagaimana nak buat click event handling pada mana2 html element yang valid.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
// di sini kita akan letak javascript dan guna jquery functions.
$(document).ready(function() {
$("#link1").click(function(e) {
alert("Lompat pagar hari-hari");
e.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://itsmefila.blogspot.com/" id="link1">Hello Durian Tunggal</a>
</body>
</html>Modify kod awal tadi dengan kode di atas ini, kemudian cuba reload page, dan click pada link Hello Durian Tunggal, kemudian hasilnya adalah seperti ini:
Library Jquery ada tersedia event helpers yang lebih banyak lagi, seperti blur, change, mouseover, focus, keyup dan lain2.. Cuba rujuk pada documentation jquery section event helpers, kemudian cuba event handling yang lain.
Berbalik kepada contoh di atas, pada kod ini
$("#link1").click(function(e) {
alert("Lompat pagar hari-hari");
e.preventDefault();
});
#link adalah selector of html element. penggunaan simbol adalah seperti berikut:
- #element - untuk memilih element html yang mengikut attribut Id nya. ()
- <img scr="bla.gif " id="element">
- $("#element").click()
- .element - dot sahaja adalah untuk memilih element html mengikut attribut class nya.
- <img scr="bla.gif " class="element">
- $(".element").click()
- element - memilih html native element.
- <img scr="bla.gif ">
- $("element").click()
Dalam event handler click di atas, terdapat function. Ini adalah bertujuan untuk implement callback function, maksudnya, apabila user click what will happen. So, you can manipulate inside that space whatever u want.
e.preventDefault() --> function ini adalah untuk prevent webpage daripada redirected to the URL according the link yang kita sedang manipulate. This is very useful at most situations.
Seterusnya adalah bagaimana untuk bermain effect. Modify kod anda tadi seperti di bawah:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
// di sini kita akan letak javascript dan guna jquery functions.
$(document).ready(function() {
$("#link1").click(function(e) {
e.preventDefault();
$(this).fadeOut("slow", function(){
$(this).fadeIn("slow").css("font-size","40px");
});
});
});
</script>
</head>
<body>
<a href="http://itsmefila.blogspot.com/" id="link1">Hello Durian Tunggal</a>
</body>
</html>Function yang ditambah adalah berikut:
$("#link1").click(function(e) {
e.preventDefault();
$(this).fadeOut("slow", function(){
$(this).fadeIn("slow").css("font-size","40px");
}); fadeOut dan fadeIn adalah effect function yang terdapat dalam library jquery. $(this) adalah merujuk kepada current object in scope yang kita sedang manipulate. In this code adalah link1.
Dalam function fadeOut, it takes two parameters, satu adalah speed animation untuk object link1 fade out. next is, callback function. Means, apa yang kita ingin buat selepas function fadeOut execute.
Dalam code di atas, dalam callback function, ada other function which is fadeIn. As you can see, it goes like that simple. The best thing is, we can write statement yang bersambung, seperti contoh di atas:
$(this).fadeIn("slow").css("font-size","40px");Means, kita nak fadeIn object link2 slowly, simultaneously change the font size using CSS changer function from the jquery library.
Woohoo! Enough kot for today. I will cover on more jquery tutorials other time. Possibly how to construct ajax with jquery. Again, believe me, it is very simple, short, and small.
Start to explore jquery documentation and study the API. For clearer assistance and demos, rujuk ja kat numerous website tutorials on the net. It's free.
Just start, dont wait.
"Write less, Do more".
Good luck ;D
Sumber tambahan: Download Jquery Starter Kit
0 comments:
Post a Comment