jQueryはクリックイベントをボタンにバインドできますか?-フロントエンドQ&A-php.cn

jQueryはクリックイベントをボタンにバインドできますか?

青灯夜游

リリース： 2023-01-04 09:15:34

オリジナル

3091 人が閲覧しました

jquery はクリックイベントをボタンにバインドできます。バインド方法: 1. セレクターを使用してボタン要素オブジェクトを選択し、構文 "$("selector")" は指定されたボタン要素を含む jquery オブジェクトを返します; 2. click() または dblclick() 関数を使用してバインドしますボタンの Click イベント、構文「ボタン要素 object.click(function(){//Run code});」または「Button element object.dblclick(function(){//Run code});」。

jQueryはクリックイベントをボタンにバインドできますか?

このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。

jquery では、click() 関数または dblclick() 関数を使用して、クリックイベントをボタンにバインドできます。

#jquery はクリックイベントをボタンにバインドします

ステップ 1: セレクターを使用してボタン要素オブジェクトを選択します

構文:

$("选择器")

ログイン後にコピー

Example

$("button")、ドキュメント内のすべてのボタン要素を選択できます。

戻り値: 指定されたボタン要素を含む jquery オブジェクトを返します

ステップ 2: click() または dblclick() 関数を使用して、クリックイベントをボタンにバインドします

クリックイベントは、マウスをクリックするとトリガーされます。
click() メソッドは、クリックイベントをトリガーするか、クリックイベントの発生時に実行する関数を指定します。

按钮元素对象.click(function(){
    //运行代码
});

ログイン後にコピー

dblclick イベントは、マウスがダブルクリックされるとトリガーされます。onclick イベントとの違いは、このイベントは 2 回連続してクリックする必要があることです。
dblclick() メソッドは、dblclick イベントをトリガーするか、dblclick イベントの発生時に実行する関数を指定します。

按钮元素对象.dblclick(function(){
    //运行代码
});

ログイン後にコピー

例 1: click() を使用してクリックイベントをボタンにバインドします

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log("发生了单击事件");
				});
			});
		</script>
	</head>
	<body>

		<button>点击按钮</button>

	</body>
</html>

ログイン後にコピー

jQueryはクリックイベントをボタンにバインドできますか?

例 2: dblclick() を使用して、ダブルクリックイベントをボタンにバインドします。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").dblclick(function() {
					console.log("发生了双击事件");
				});
			});
		</script>
	</head>
	<body>

		<button>双击按钮</button>

	</body>
</html>

ログイン後にコピー

jQueryはクリックイベントをボタンにバインドできますか?