ITコラム

colmun_main941

jQuery

2018.03.07

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>

▲目次へ戻る

SHARE

最新記事

DSC_0657

卒業生インタビュー

2019.07.11

【卒業生の声:ヒロタさん】事務職からプログラマーに転身!仕事と夜間スクールを両立し、WEB系自社開発会社へ内定。

受講スクール 夜間プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 EMTG株式会社 夜間プログラマカレッジ卒業生のヒロタさんにお話しをお伺いしました! 目次 新卒で入社した会社で事務を7年 専門性があって、も […]

続きを見る

img_top_001

卒業生インタビュー

2019.07.02

【卒業生の声:直江さん】1年間のプログラミング独学後、沖縄から上京し、更にプログラマカレッジで学習。希望していた会社に内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社アイティートゥモロー プログラマカレッジ卒業生の直江さんにお話しをお伺いしました! 目次 手を動かす仕事に就くという強い決意を持ち、会社を […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.