ITコラム

プログラミングノウハウ

2018.03.07

#jQuery入門

jQuery【使い方】基本的な書き方とイベント

jQuery を使用すると、JavaScript を短いコードで記述することができます。
今回は、jQuery の基本的な書き方について、解説いたします。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. jQuery の基本的な書き方
2. jQuery のイベント
3. クリック時のサンプル
4. まとめ

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>

▲目次へ戻る