jQuery【 使い方 】基本的な書き方とイベント
jQuery を使用すると、JavaScript を短いコードで記述することができます。
今回は、jQuery の基本的な書き方を紹介したいと思います。
目次
1. jQuery の基本的な書き方
2. jQuery のイベント
3. クリック時のサンプル
1. jQuery の基本的な書き方
jQuery は、基本的に次のような形で書きます。
$(セレクタ).イベント(function(){
$(セレクタ).命令
});
セレクタ（ selector ）とは、HTML要素をセレクトするもので、HTML要素を特定します。
HTML要素の名前の他、id名、class名など、色々な種類を対象に指定することができます。
そして、イベントで 動作のタイミングを指定します。
jQuery で特徴的に現れる「 $ 」は、 「 jQuery 」を省略した形です。
「 $(document).ready() 」は「 jQuery(document).ready() 」を省略した書き方です。
どちらの書き方でもOKですが、「 $ 」を使用した形で記述するのが一般的です。
▲目次へ戻る
2. jQuery のイベント
jQuery のイベントは、主に次のようなものがあります。
ロード時のイベント
| ready |
ページが表示された時のイベント |
| unload |
他のページに遷移する時のイベント |
| load |
データの読み込みが完了した時のイベント |
| error |
データの読み込みに失敗した時のイベント |
マウスがクリックされた時のイベント
| click |
左クリック時のイベント |
| dblclick |
ダブルクリック時のイベント
（ clickイベントも発生 ） |
| contextmenu |
マウスの右ボタンを押した時のイベント
コンテキストメニューを表示させない場合は、このイベントで「return false」や「preventDefault」を記述 |
| mousedown |
マウスのボタンを押した時のイベント |
| mouseup |
マウスのボタンを離した時のイベント |
マウスの動きに応じたイベント
| mousemove |
マウスカーソルが動いた時のイベント |
| mouseover/mouseenter |
マウスカーソルが入った時のイベント |
| mouseout/mouseleave |
マウスカーソルが離れた時のイベント |
フォームイベント
| focus/focusin |
フォーカスが当たった時のイベント |
| blur/focusout |
フォーカスが外れた時のイベント |
| change |
要素の内容が変更された時のイベント
（input(type=text)やtextareaは、フォーカスが外れたタイミングでイベント発生） |
| select |
input(type=text)やtextarea内のデータを選択した時のイベント |
| submit |
フォームが送信される時のイベント |
キーイベント
| keydown/keypress |
キーを押した時のイベント |
| keyup |
キーを離した時のイベント |
画面イベント
| scroll |
画面がスクロールした時のイベント |
| resize |
ウィンドウのサイズが変更された時のイベント |
▲目次へ戻る
3. クリック時のサンプル
早速、jQuery を使って 入力内容を表示させるサンプルを作成します。
入力欄に メッセージを入力して、表示ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("#btn").click(function(){
$("#out_dat").html($("#in_dat").val());
});
});
//-->
</script>
<div style="background-color : #CCC; padding : 20px 20px 0px;">
<input type="text" id="in_dat" placeholder="メッセージを入力して下さい。">
<nobr><input type="button" id="btn" value="表示"></nobr>
<div id="out_dat" style="padding : 0px 10px;"></div>
</div>
因みに、上のサンプルをJavaScriptで作成すると 次のようになります。
<script type="text/javascript">
<!--
function disp() {
document.getElementById("out_dat").innerHTML
= document.getElementById("in_dat").value;
}
//-->
</script>
<div style="background-color : #CCC; padding : 20px 20px 0px;">
<input type="text" id="in_dat" placeholder="メッセージを入力して下さい。">
<nobr><input type="button" value="表示" onClick="disp()"></nobr>
<div id="out_dat" style="padding : 0px 10px;"></div>
</div>
▲目次へ戻る
