ホームページ > 記事 > ウェブフロントエンド > jQueryはイベントをリッスンできますか?

jQueryはイベントをリッスンできますか?

青灯夜游オリジナル: 2022-04-28 14:02:271996ブラウズ

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>

jQueryはイベントをリッスンできますか?

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>

jQueryはイベントをリッスンできますか?

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>

jQueryはイベントをリッスンできますか?

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>

jQueryはイベントをリッスンできますか?

他のリスニング方法イベントへ

#メソッド説明bind()イベントハンドラーを要素に追加しますblur()ロストフォーカスイベントを追加/トリガーしますdelegate()現在のイベントに一致する要素の値または将来の子要素の追加ハンドラー die()error()focus()フォーカスイベントの追加/トリガーfocusin()イベントハンドラーを focusin event に追加します。focusout()イベントハンドラーを focusout イベントに追加します# keydown()keypress()keyup()keyup イベントの追加/トリガー live()現在または将来の選択された要素に 1 つ以上のイベントハンドラーを追加します。 load()イベントハンドラーをロードイベントに追加しますmousedown()マウスダウンイベントを追加/トリガーします Mouseenter ()mouseenter イベントの追加/トリガーmouseleave()mouseleave イベントの追加/トリガーmousemove()mousemove イベントを追加/トリガーmouseout イベントを追加/トリガー#mouseover()マウスオーバーイベントの追加/トリガーmouseup()マウスアップイベントの追加/トリガーoff()on() メソッドを通じて追加されたイベントハンドラーを削除しますon()要素に追加イベントHandlerone()選択した要素に 1 つ以上のイベントハンドラーを追加します。このハンドラーは要素ごとに 1 回だけトリガーできますresize()サイズ変更イベントの追加/トリガーscroll () スクロールイベントの追加/トリガー #submit ()送信イベントの追加/トリガー#trigger()triggerHandler()unbind()undelegate()##unload ()イベントハンドラをアンロードイベントに追加しますcontextmenu()イベントハンドラをコンテキストメニューイベントに追加します[推奨される学習: jQuery ビデオチュートリアル Web フロントエンドビデオ





	はバージョン 1.9 で削除されました。 live() メソッドによって追加されたすべてのイベントハンドラーを削除します。
	バージョン 1.8 では非推奨になりました。エラーイベントの追加/トリガー



キーダウンイベントの追加/トリガー
キープレスイベントの追加/トリガー

バージョン 1.9 では削除されました。
バージョン 1.8 では非推奨になりました。



	#mouseout()







#select()	選択イベントの追加/トリガー

選択した要素にバインドされたすべてのイベントをトリガー
選択した要素の指定されたイベントにバインドされたすべての関数をトリガーします
追加されたイベントを削除します選択した要素からのハンドラー
現在または将来の選択した要素からイベントハンドラーを削除します
バージョン 1.8 では非推奨になりました。

、	]

以上がjQueryはイベントをリッスンできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jquery select die Error 指针 Delegate 事件 input

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5のリストとテーブルの違いは何ですか次の記事：HTML5のリストとテーブルの違いは何ですか

続きを見る