値の取得
メソッドを通して、オブジェクトの持つプロパティなどを取得する。
|
1 |
$(セレクタ).メソッド(引数) |
※引数がない場合もある。
|
1 2 3 4 5 6 |
<h1 id="header">jQueryテスト</h1> <script type="text/coffeescript"> $ -> console.log($("h1").text()) </script> |
オブジェクトの操作
メソッドによりオブジェクトにプロパティを設定したり、動作させたりする。
|
1 |
$(セレクタ).メソッド(引数) |
※引数がない場合もある
|
1 2 3 4 5 6 |
<h1 id="header">jQueryテスト</h1> <script type="text/coffeescript"> $ -> $("h1").hide(3000) </script> |
イベント処理
構文1
オブジェクトに発生したイベントに対応して呼び出されるハンドラで、引数に処理を記述。
この構文では、後から動的に追加された要素には対応できない。
|
1 |
$(セレクタ).イベントハンドラ(コールバック) |
ハンドル用の関数を別に定義して引数に関数名を書いてもよいが、多くの場合無名関数が使われる。
|
1 2 3 |
$ -> $("h1").click -> console.log("click!") |
構文2
動的に追加された要素にも対応するため、イベントが発生するたびに指定された範囲内でセレクタで指定されたオブジェクトを探索する。
この場合のon()メソッドは”イベントハンドラ・アタッチメント”の一つで、特定のイベントとそれに対するハンドラを結び付ける機能を持つ。
|
1 |
$(探索範囲のセレクタ).on(イベント名、セレクタ、ハンドラ) |
イベント名とセレクタは文字列で指定。
以下の例では、body要素の中の任意の要素がクリックされるとalertが立ち上がる。この場合は、H1、H2のいずれをクリックしてもalertが立ち上がる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> <h1>H1</h1> <h2>H2</h2> <script type="text/coffeescript"> $ -> $("body").on "click", (evt) -> alert("click!") </script> </body> |
また、on()メソッドの引数を以下のようにすると、H1をクリックしても反応せず、H2をクリックした時だけalertが立ち上がる。
|
1 |
$("body").on "click", "h2", (evt) -> |
イベントの種類、イベントハンドラ・アタッチメントについては、jQueryのイベントを参照。