ホームページ > 記事 > ウェブフロントエンド > jQuery：クリックイベントの定義と使い方を詳しく解説
jQuery：クリックイベントの定義と使い方を詳しく解説
- 黄舟オリジナル
- 2017-06-27 09:50:562286ブラウズ
この記事では、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 サイトの他の関連記事を参照してください。