jQuery入門 : 2009 : 11月

jQuery入門 No.42

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

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

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

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

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

load(関数)

となります。

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

$(“#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

jQuery入門 No.41

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

───────────────────────────────
jQuery入門 No.41
───────────────────────────────

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

1)要素のkeypressイベントを実行する
2)要素にのkeypressイベントを設定する
3)要素のkeyupイベントを実行する
4)要素にkeyupイベントを設定する

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のkeypressイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

keypress()

となります。
keyupイベントは、キーボードのキーが押された際に発生する
イベントです。

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

keypress(関数)
となります。

以下の例では入力部分に何か入力するとkeypressの回数を
<div></div>部分に表示します。

例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のコードをこれから記述します!
$(document).ready(function(){
var count=0;
$(“input”).keypress(function () {
$(“#comment”).html(“keypress ” + (++count) );
});
});
</script>
</head>
<body>
<input type=”text” /><div id=”comment”><div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のkeyupイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

keyup()

となります。

keyupイベントは、キーボードのキーが押され、上がった際発生する
イベントです。

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

keyup(関数)

となります。
以下の例では入力部分に何か入力するとkeyupの回数を
<div></div>部分に表示します。

例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(){
var count=0;
$(“input”).keyup(function () {
$(“#comment”).html(“keyup ” + (++count) );
});
});
</script>
</head>
<body>
<input type=”text” /><div id=”comment”><div>
</body>
</html>