ホームページ >ウェブフロントエンド >フロントエンドQ&A >jQueryはイベントをリッスンできますか?
jQueryはイベントをリッスンできますか?
- 青灯夜游オリジナル
- 2022-04-28 14:02:272046ブラウズ
jquery はイベントをリッスンできます。 jquery は、さまざまなイベント監視メソッドを提供します: 1. click() クリック イベントを監視し、イベント処理関数を指定できます; 2. change() 変更イベントを監視し、イベント処理関数を指定できます; 3. dblclick()ダブルクリックイベントを監視できます; 4. hover() など。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
jquery はイベントをリッスンできます。
jquery は、click()、on()、その他のメソッドなど、イベントをリッスンするためのさまざまなメソッドを提供します。ここではいくつかの方法を紹介します。
1. Click() メソッド:
click() メソッドは、クリック イベントの発生時に実行される関数を指定します。
例: Click< ; p> アラートテキストの場合の要素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("p").click(function() {
alert("段落被点击了。");
});
});
</script>
</head>
<body>
<p>点击这个段落。</p>
</body>
</html>
2.change() メソッド
change() メソッドは、変更イベントが発生するタイミングを指定します。実行する関数が発生します。
例: フィールドが変更されたときのアラート テキスト
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("文本已被修改");
});
});
</script>
</head>
<body>
<input type="text">
<p>在输入框写一些东西，然后按下 enter 键或点击输入框外部。</p>
</body>
</html>
3, dblclick()
dblclick() メソッドは、ダブルクリック イベントが発生したときに実行する関数を指定します。
例:
要素をダブルクリックしたときの警告テキスト
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("p").dblclick(function() {
alert("这个段落被双击。");
});
});
</script>
</head>
<body>
<p>双击这个段落。</p>
</body>
</html>
4、hover() メソッド
hover() メソッドは、マウス ポインターが選択された要素上にあるときに実行する 2 つの関数を指定します。
メソッドは、mouseenterイベントとmouseleaveイベントをトリガーします。
例: マウス ポインターが上にあるときに
要素の背景色を変更します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("p").hover(function() {
$("p").css("background-color", "yellow");
}, function() {
$("p").css("background-color", "pink");
});
});
</script>
</head>
<body>
<p>鼠标移动到该段落。</p>
</body>
</html>
他のリスニング方法イベントへ
| 説明 | |
|---|---|
| イベント ハンドラーを要素に追加します | |
| ロストフォーカスイベントを追加/トリガーします | |
| 現在のイベントに一致する要素の値または将来の子要素の追加ハンドラー | |
| はバージョン 1.9 で削除されました。 live() メソッドによって追加されたすべてのイベント ハンドラーを削除します。 | |
| バージョン 1.8 では非推奨になりました。 エラー イベントの追加/トリガー | |
| フォーカス イベントの追加/トリガー | |
| イベント ハンドラーを focusin event に追加します。 | |
| イベント ハンドラーを focusout イベントに追加します | |
| キーダウン イベントの追加/トリガー | |
| キープレス イベントの追加/トリガー | keyup() |
| live() | |
| バージョン 1.9 では削除されました。 | 現在または将来の選択された要素に 1 つ以上のイベント ハンドラーを追加します。load() |
| バージョン 1.8 では非推奨になりました。 | イベント ハンドラーをロード イベントに追加しますmousedown() |
| Mouseenter () | |
| mouseleave() | |
| mousemove() | |
| #mouseout() | |
| #mouseover() | マウスオーバー イベントの追加/トリガー |
| mouseup() | マウスアップ イベントの追加/トリガー |
| off() | on() メソッドを通じて追加されたイベント ハンドラーを削除します |
| on() | 要素に追加イベントHandler |
| one() | 選択した要素に 1 つ以上のイベント ハンドラーを追加します。このハンドラーは要素ごとに 1 回だけトリガーできます |
| resize() | サイズ変更イベントの追加/トリガー |
| scroll () | スクロール イベントの追加/トリガー |
| #select() | 選択イベントの追加/トリガー |
| 送信イベントの追加/トリガー | |
| 選択した要素にバインドされたすべてのイベントをトリガー | |
| 選択した要素の指定されたイベントにバインドされたすべての関数をトリガーします | |
| 追加されたイベントを削除します選択した要素からのハンドラー | |
| 現在または将来の選択した要素からイベント ハンドラーを削除します | ##unload () |
| バージョン 1.8 では非推奨になりました。 | イベント ハンドラをアンロード イベントに追加します|
| イベント ハンドラをコンテキストメニュー イベントに追加します | |
| 、 | Web フロントエンド ビデオ] |
以上がjQueryはイベントをリッスンできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。