jQueryでのイベントバインディング

JavaScriptのほとんどすべてのイベントには、 jQueryの対応するメソッドがあります。例えば、要素のクリックは次のように捕捉できます: $(セレクター).click(関数)。

次のHTMLコードを考えてみましょう:

<ul>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
</ul>

次のCSSが適用されています:

li {
	width: 100px;
	cursor: pointer;
}

どの li をクリックしても感嘆符が表示されるようにしてみましょう。リストの項目をクリックして動作を確認してください:

$('li').click(function() {
	alert('!');
});

バインドされた関数内では、イベントが発生した要素（この場合はクリックされた li）を参照する this が利用できます。この this は、 JavaScriptのスタイル、例えば this.innerHTML や jQueryのスタイルで使用できます。後者の場合はこの this を $ でラップする必要があります。このように: $(this)。

HTMLコードを見てみましょう:

<ul>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
</ul>

このコードには次のCSSスタイルが適用されています:

li {
	width: 100px;
}
li:hover {
	color: red;
	cursor: pointer;
}

li をクリックすると、その末尾に '!' が追加されるようにしてみましょう。動作を確認するために、リスト項目をクリックしてください:

$('li').click(function() {
	$(this).append('!');
});

各 li をクリックすると、その先頭に '?' が追加されるようにしてください。

段落が与えられています。各段落をクリックすると、その内容が画面に表示されるようにしてください。

数字を含む段落が与えられています。段落をクリックすると、その段落に含まれる数字の2乗が表示されるようにしてください。