jQuery：クリックイベントの定義と使い方を詳しく解説-jsチュートリアル-php.cn

jQuery：クリックイベントの定義と使い方を詳しく解説

黄舟

リリース： 2017-06-27 09:50:56

オリジナル

2287 人が閲覧しました

この記事では、jQueryにおけるclickeventの定義と使い方を主に、jQueryにおけるclickイベントの具体的な定義方法やパラメータ、使用例などをサンプル形式で詳しく解説しています。必要な場合は、こちらを参照してください。

この記事の例では、jQuery でのクリックイベントの定義と使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです:

概要

一致する各要素のクリックイベントをトリガーします。

この関数は、クリックイベントにバインドされているすべての関数を呼び出して実行します。

Parameters

fnFunctionV1.0

一致する各要素のクリックイベントにバインドされたハンドラー関数。

[data],fnString,FunctionV1.4.3

data:click([Data], fn) は、処理する関数 fn のデータを渡すことができます。

fn: 一致する各要素のクリックイベントにバインドされたハンドラー関数。

例

説明:

ページ内のすべての段落のクリックイベントをトリガーします

jQuery コード:

$("p").click();

ログイン後にコピー

説明:

クリック後にページ内のすべての段落を非表示にします。

jQuery コード:

$("p").click( function () { $(this).hide(); });

ログイン後にコピー

マウスポインターが一致する要素の上にあるときに、マウスの左ボタンを押して放すか、click() メソッドを呼び出すと、クリックイベントがトリガーされます。

click() メソッドは、イベント処理メソッドにバインドすることもできます。

文法構造 1:
クリックイベントをトリガーします。

$(selector).click()

ログイン後にコピー

文法構造2:
クリックイベントのイベント処理メソッドをバインドします。

$(selector).click(data,function)

ログイン後にコピー

パラメータリスト:

パラメータ	説明
データ	オプション。関数が処理するために渡されるデータを定義します。
function	クリックイベントがトリガーされたときに実行される関数を定義します。

コード例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>click事件-脚本之家</title>
<style type="text/css">
p{
  width:200px;
  height:200px;
  border:5px solid green;
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(
document
).ready(function(){
  $("button").click(function(){
    $("p").text("这是后来添加的内容");
  })
  $("p").dblclick(function(){
    $("button").click();
  })
})
</script>
</head>
<body>
<p></p>
<p>双击我触发click事件</p>
<button>点击触发事件</button>
</body>
</html>

ログイン後にコピー

上記のコードは、p 要素をダブルクリックするか、ボタンをクリックすると、p に新しいテキストを設定します。

以上がjQuery：クリックイベントの定義と使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。