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

colmun_main941

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>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です