Just My Life & My Work

[jQuery] 第一個jQuery程式

2011 年 07 月 06 日

玩一下jQuery：Ｐ是一個將滑鼠指標移至按鈕(Click Me)上頭，就會自動顯現一段字串「 I love jQuery:)」，隨後經過3000ms(3秒)後，該段字串消失。

<html>
  <head>
    <title>Hello HappyMan!!</title>
    <script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script>
    <script type="text/javascript">
		function showMsg() {
			$('#btn').attr('disabled', true);
			if ($('#msg').html().length == 0) {
				$('#msg').html('<h1>I love jQuery:)</h1>');
			}
			$('#msg').fadeIn();
			setTimeout(function(){
				$('#msg').fadeOut();
				$('#btn').attr('disabled', false);
			}, 3000);
		}
    </script>
  </head>
  <body>
    <div id="msg"></div>
    <input type="button" value="Click Me" onMouseOver="showMsg()" id="btn"/>
  </body>
</html>

有用到jQuery語法，因此需載入jQuery函式庫，第4行為其指令。
使用fadeIn()來淡入字串，使用fadeOut()來淡出字串。時間計時器函數setTimeout()。
參考：jQuery 學習心得筆記 (2)。

分類：

jQuery, 教學

發表留言

隨意留個言吧：）～

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

標籤雲