jQueryイベント
イベントとは何ですか?
さまざまな訪問者に対するページの応答はイベントと呼ばれます。
イベント ハンドラーは、HTML で特定のイベントが発生したときに呼び出されるメソッドを指します。
例:
要素上でマウスを移動します。
ラジオ ボタンを選択します
要素をクリックします
「トリガー」(または「起動」) という用語は、「キーを押すと keypress イベントが起動する」などのイベントでよく使用されます。 ： 一般的な DOM イベント: d マウス イベント CLICK DBLCLICK MOUSEENTER
Mouseleave
Keypress Keydown Keyup Blur Resize Scroll
jQuery では、ほとんどの DOM イベントに同等の jQuery メソッドがあります。
ページ上でクリック イベントを指定します:$("p").click();
次のステップは、イベントがいつトリガーされるかを定義することです。これは、イベント関數(shù)を通じて実現(xiàn)できます:
$("p").click(function(){
// アクションがトリガーされた後に実行されるコード!!});
一般的に使用される jQuery イベント メソッド$ (document).ready()
$(document).ready() メソッドを使用すると、ドキュメントが完全にロードされた後に関數(shù)を?qū)g行できます。このイベント メソッドは、jQuery 構(gòu)文の章で説明されています。 click()click() メソッドは、ボタンのクリック イベントがトリガーされたときに呼び出される関數(shù)です。
この関數(shù)は、ユーザーが HTML 要素をクリックすると実行されます。
以下の例では、<p> 要素で click イベントが発生すると、現(xiàn)在の <p> 要素が非表示になります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>dblclick()
要素がダブルクリックされると、dblclick イベントが発生します。
dblclick() メソッドは、dblclick イベントをトリガーするか、dblclick イベントの発生時に実行する関數(shù)を指定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>雙擊鼠標(biāo)，我就消失。</p>
<p>雙擊我消失！</p>
<p>雙擊我也消失！</p>
</body>
</html>mouseenter()
Mouseenter イベントは、マウス ポインターが要素を通過するときに発生します。
mouseenter() メソッドは、mouseenter イベントをトリガーするか、mouseenter イベントの発生時に実行する関數(shù)を指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("您的鼠標(biāo)移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠標(biāo)指針進入此處，會看到彈窗。</p>
</body>
</html>mouseleave()
Mouseleave イベントは、マウス ポインターが要素から離れると発生します。
mouseleave() メソッドは、mouseleave イベントをトリガーするか、mouseleave イベントの発生時に実行する関數(shù)を指定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("再見，您的鼠標(biāo)離開了該段落。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落。</p>
</body>
</html>mousedown()
マウス ポインターが要素上に移動し、マウス ボタンが押されると、mousedown イベントが発生します。 。
mousedown() メソッドは、mousedown イベントをトリガーするか、mousedown イベントの発生時に実行する関數(shù)を指定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠標(biāo)在該段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落</p>
</body>
</html>mouseup()
要素上でマウス ボタンが離されると、mouseup イベントが発生します。
mouseup() メソッドは、mouseup イベントをトリガーするか、mouseup イベントの発生時に実行される関數(shù)を指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("鼠標(biāo)在段落上松開。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落。</p>
</body>
</html>hover()
hover() メソッドは、カーソル ホバー イベントをシミュレートするために使用されます。
マウスが要素上に移動すると、指定された最初の関數(shù) (mouseenter) がトリガーされ、マウスが要素の外に移動すると、指定された 2 番目の関數(shù) (mouseleave) がトリガーされます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("你進入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落。</p>
</body>
</html>focus()
要素がフォーカスを取得すると、focus イベントが発生します。
マウスをクリックして要素を選択するか、タブキーで配置すると、その要素にフォーカスが置かれます。
focus() メソッドは、フォーカス イベントをトリガーするか、フォーカス イベントの発生時に実行する関數(shù)を指定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br><br>
Email: <input type="text" name="email">
</body>
</html>blur()
要素がフォーカスを失うと、blur イベントが発生します。
blur() メソッドは、blur イベントをトリガーするか、blur イベントの発生時に実行する関數(shù)を指定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
