There seems be no function like "sleep" in Javascript or jQuery, is this because of Javascript doesn't intend to run threads? mmh, I don't know why currently, but I will find it later.
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript">
// from http://www.devcheater.com/
function sleep(milliSeconds){
var startTime = new Date().getTime(); // get the current time
while (new Date().getTime() < startTime + milliSeconds); // hog cpu
}
</script>
<style>
a.test { font-weight: bold; }
</style>
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<!--
jQuery can be downloaded from jQuery downloading page,
but we can use it on CDN.
jQuery download page : http://docs.jquery.com/Downloading_jQuery
what is CDN : http://en.wikipedia.org/wiki/Content_delivery_network
-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
/*
window.onload() waits all documents and images loaded.
it might include ads.
.ready() event means that the DOM object is loaded and can be manipulated.
Events are listed in http://api.jquery.com/category/events/.
*/
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
/*
Dynamically, we can add class to the DOM object.
*/
$("a").addClass("test");
/*
wait for 3 secs, before the next alert dialog.
addClass behaviour cannot be observated without this sleep.
*/
sleep(3000);
alert("Check the object added the class");
/*
Remove the class dynamically that is added just before.
*/
$("a").removeClass("test");
sleep(3000);
alert("Check the object removed the class");
/*
"a" tag is for navigating a user to the location where "url" specifes.
but "event.preventDefault()" disables such default behavior.
Therefore,navigation to the next location does not happen.
*/
event.preventDefault();
/*
Finally, this object("a") will hide. this is a special effect.
*/
$(this).hide("slow");
});
});
</script>
</body>
</html>
0 件のコメント:
コメントを投稿