jQuery入門 : jQuery入門 No.42

jQuery入門 No.42

2009 11月13日
コメントは受け付けていません。

───────────────────────────────
jQuery入門 No.42
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

1)要素にloadイベントを設定する
2)要素にmousedownイベントを設定する
3)要素にmouseenterイベントを設定する
3)要素にmouseleaveイベントを設定する

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にloadイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

load(関数)

となります。

以下の例では、表示したとき、<div></div>部分に
「loadされました」と表示します。

例1)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(window).load(function () {

$(“#message”).html(“loadされました”);
});

</script>
</head>
<body>
<div id=”message”></div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にmousedownイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

mousedown(関数)

となります。

以下の例ではブルーの四角でマウスを押すと
「マウスが押されました」と<p></p>部分に表示します。

例2)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“#box”).mousedown(function(){
$(“p”).append(“マウスが押されました”);
});
});
</script>
<style>
div { width:50px; height:50px; margin:10px;
background:blue;}

</style>
</head>
<body>
<p></p>
<div id=”box”></div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にmouseenterイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

mouseenter(関数)
となります。

以下の例ではブルーの四角にマウスが入ると
「マウスが入りました」と<p></p>部分に表示します。

例3)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“#box”).mouseenter(function(){
$(“p”).append(“マウスが入りました”);
});
});
</script>
<style>
div { width:50px; height:50px; margin:10px;
background:blue;}

</style>
</head>
<body>
<p></p>
<div id=”box”></div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にmouseleaveイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

mouseleave(関数)
となります。

以下の例ではブルーの四角にマウスが入り、四角から離れると
「マウスが離れました」と<p></p>部分に表示します。

例4)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“#box”).mouseleave(function(){
$(“p”).append(“マウスが離れました”);
});
});
</script>
<style>
div { width:50px; height:50px; margin:10px;
background:blue;}

</style>
</head>
<body>
<p></p>
<div id=”box”></div>
</body>
</html>

tips_admin jQuery