
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
jQuery
2018.03.07
jQuery を使用すると、JavaScript を短いコードで記述することができます。
今回は、jQuery の基本的な書き方を紹介したいと思います。
1.jQuery の基本的な書き方
2.jQuery のイベント
3.クリック時のサンプル
jQuery は、基本的に次のような形で書きます。
$( セレクタ ). イベント( function(){
$( セレクタ ). 命令
});
セレクタ( selector )とは、HTML要素をセレクトするもので、HTML要素を特定します。
HTML要素の名前の他、id名、class名など、色々な種類を対象に指定することができます。
そして、イベントで 動作のタイミングを指定します。
jQuery で特徴的に現れる「 $ 」は、 「 jQuery 」を省略した形です。
「 $(document).ready() 」は「 jQuery(document).ready() 」を省略した書き方です。
どちらの書き方でもOKですが、「 $ 」を使用した形で記述するのが一般的です。
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 | ウィンドウのサイズが変更された時のイベント |
早速、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>
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.