Just My Life & My Work

[jQuery] 第一個jQuery程式

玩一下jQuery:P是一個將滑鼠指標移至按鈕(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)

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: