jQuery イベント

前のページ jQuery セレクタ
次のページ jQuery 隐藏/显示

jQueryは特にイベント処理に設計されています。

jQueryのイベント関数

jQueryのイベントハンドラはjQueryの核心関数です。

イベントハンドラとは、HTMLで特定のイベントが発生したときに呼び出されるメソッドのことです。この用語は、イベントが「トリガー」または「発火」されるという言葉がよく使われます。

通常、jQueryコードは<head>部分のイベントハンドラに配置されます：

例

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>これは見出しです</h2>
<p>これは段落です。</p>
<p>これは別の段落です。</p>
<button>クリックして</button>
</body>
</html>

自分で試してみる

上記の例では、ボタンのクリックイベントがトリガーされたときに関数が呼び出されます：

$("button").click(function() {  // いくつかのコード... } )

このメソッドはすべての<p>要素を非表示にします：

$("p").hide();

独立したファイル内の関数

あなたのウェブサイトが多くのページを含んでおり、jQueryの関数を簡単にメンテナンスしたい場合は、jQueryの関数を独立した.jsファイルに配置してください。

このチュートリアルで jQuery を説明する際には、関数を直接 <head> 部分に追加します。ただし、それらを独立したファイルに配置することも良いでしょう、例えば以下のように（ファイルを参照するために src 属性を使用します）：

例

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 名前衝突

jQuery は $ シンボルを使用して jQuery のシンプルな紹介方法としています。

他の JavaScript ライブラリ（例えば Prototype）の関数も $ シンボルを使用しています。

jQuery は noConflict() メソッドを使用してこの問題を解決します。

var jq=jQuery.noConflict()、自分の名前（例えば jq）を使用して $ シンボルを置き換えるのに役立ちます。

自分で試してみる

結論

jQuery は HTML イベントを処理するために特別に設計されているため、以下の原則に従うと、コードがより適切で保守しやすくなります：

すべての jQuery コードをイベントハンドラに配置します
すべてのイベントハンドラをドキュメントの読み込み完了イベントハンドラに配置します
jQuery コードを独立した .js ファイルに配置します
名前の衝突が発生した場合は、jQuery ライブラリをリネームします