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

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

1. jQuery の基本的な書き方

　
jQuery は、基本的に次のような形で書きます。

$(セレクタ).イベント(function(){
　　$(セレクタ).命令
});

セレクタ（ selector ）とは、HTML要素をセレクトするもので、HTML要素を特定します。
HTML要素の名前の他、id名、class名など、色々な種類を対象に指定することができます。

そして、イベントで 動作のタイミングを指定します。
　
jQuery で特徴的に現れる「 $ 」は、 「 jQuery 」を省略した形です。
「 $(document).ready() 」は「 jQuery(document).ready() 」を省略した書き方です。
どちらの書き方でもOKですが、「 $ 」を使用した形で記述するのが一般的です。

▲目次へ戻る

2. jQuery のイベント

　
jQuery のイベントは、主に次のようなものがあります。
　

ロード時のイベント

マウスがクリックされた時のイベント

マウスの動きに応じたイベント

フォームイベント

キーイベント

画面イベント

▲目次へ戻る

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>

▲目次へ戻る

4. まとめ

jQuery の基本的な書き方について、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る