jQueryを学び始めて約1ヶ月。
見よう見まねで以下のWebサイトを作成することができた。
・架空のゲーム販促サイト
Man in the Mirror
※某King of Popの曲に感化され命名
今回の活動の中で、私が学んだ内容(かなり初歩的な内容)について残しておく。
1. jQueryとは
javascriptのライブラリ。
javascriptよりもシンプルで簡単なコードで複雑な動きをするWebページを作成できる。
他のjavascriptのライブラリ(prototype.js、MooTools)と比較し、最も普及している。
jQueryが広く使用されている理由としては以下のようなものが考えられる。
・HTML、CSSの要素を簡単に操作できる
・対応しているブラウザの種類が多い = クロスブラウザ対応が可能
・アニメーションやマウス操作に対するインタラクティブな処理が簡単に実現できる
・プラグインが豊富
2. jQueryの使用方法
jQueryはオープンソースであるため、誰でも使用できる。
使用する際は適用させたいHTMLファイルでjQueryのjsファイルを読み込む。
具体的な手順は以下の通り。
(1)以下のサイトからダウンロードした「jquery-x.x.x.min.js」をプロジェクトに配置する。
http://jquery.com/
【サイト内での手順】
(1)サイト内の「Download jQuery」をクリック
(2)遷移先のサイトで「Download the compressed, production jQuery x.x.x」を
右クリックし、「リンク先を別名で保存」
(2)HTMLのhead要素内で読み込む
（jQueryを使用するjsファイルはjQueryの後に読み込むこと！）
<head>
<meta charset="utf-8">
<title>初めてのjQuery</title>
// jQueryの読み込み
<script type="text/javascript" src="./js/vendor/jquery-3.3.1.min.js"></script>
// jQueryを使用するjsファイルの読み込み
<script type="text/javascript" src="./js/main.js"></script>
</head>
3. jQueryの基本(最初に学んだこと)
###①$(function() { // htmlファイル読み込み後に実行したい処理 });
$(function() {
$("h1").css("color", "white");
});
→$(function()内に記載した処理を予約状態にする。
(上記の例では「$("h1").css("color", "white");」が予約状態となる)
予約状態の処理はHTMLの読み込みが最後まで終了したのちに実行される。
HTMLファイルの読み込みが完了していないため、jQueryの処理が実行できないことを防ぐ。
###②$("セレクタ")
$(“h1”).css(“color”, “#ff0”);
→HTML要素(div、h1 など)からjQueryオブジェクトを生成する関数。
jQueryでは基本的に以下の流れに沿って処理を実行する。
(1)$()関数で命令の対象となるHTML要素をjQueryオブジェクトに変換する。
(2)そのjQueryオブジェクトにメソッドを呼び出して変更を加える
上記の例では以下の処理が発生する。
(1)$()関数でh1要素をjQueryオブジェクトに変換する。
(2)cssメソッドを呼び出してcolorプロパティを#ff0(黄色)に変更する。
###③メソッドチェーン
→メソッドを鎖(チェーン)のようにつなげて記載し、実行するプログラム手法
jQueryオブジェクトに対して「$(“セレクタ”).メソッドA().メソッドB().メソッドC()…」
と記載すると、左から順にメソッドA、メソッドB、メソッドC…を実行する。
例えば、マウスを乗せた時(mouseover)はxxの処理、マウスを離した時(mouseout)は〇〇の処理を
$(~).on(“mouseover”, function() { xx });
$(~).on(“mouseout”, function() { 〇〇 });
から
$(~).on(“mouseover”, function() { xx }).on(“mouseout”, function() { 〇〇 });
と簡潔に記載できる！
メリット
・$(“セレクタ”)の記載が1回で良い！
・処理速度が向上する！
4. jQueryのメソッドについて
jQueryには様々なメソッドが存在する。
その中でも最初に学んだメソッドのいくつかを紹介する。
###①css(“cssプロパティ”, “設定値”)
$(“.wrapper”).css(“width”, “1000px”);
→cssプロパティに変更を加えるメソッド。
上記の例ではwrapperクラスを持つ要素のwidthプロパティを1000pxに変更する。
###②animate({“cssプロパティ”: “設定値”}, アニメーションの時間(ミリ秒) );
$(“#btn”).animate({
“color”: “white”
}, 500);
→指定したcssプロパティに指定したアニメーション時間をかけて変更するメソッド。
上記の例では、btnIDを持つ要素のcolorプロパティを500ミリ秒かけてwhite(白)に変更する。
また、cssプロパティは複数設定可能＆全て同時に実行される。
###③on(“イベントの種類”, イベント発生時に実施したい関数)
$("#btn")
.on("mouseover", function() {
$("#typo").animate({
"backgroundcolor": "#80FF00"
}, 500);
});
→イベント発生時に関数を実行する処理
javascriptのaddEventListener(〜, function() { });とほぼ同じ。
上記の例ではbtnIDを持つ要素にマウスオーバーした時(マウスのカーソルを乗せた時)、
イベントを検知してbtnIDを持つ要素のbackgroundcolorプロパティを#80ff00(緑)に変更する。
###④stop(true | false)
$("#btn")
.on("mouseover", function() {
$("#btn").stop(true).animate({
"backgroundcolor": "#80FF00"
}, 500);
})
.on“mouseout”, function() {
$(“h1”).stop(true).animate({
“color”: “red”
}, 200);
});
→実行中のアニメーションを中止可能か(true) or 不可能か(false)を設定するメソッド。
animateメソッドには以下の仕様が存在する。
アニメーション中の同じ要素に対して、別のanimateメソッドを
実行した場合、途中段階のアニメーションはキャンセルされず、順番待ちをする
stopメソッドを使用すると、アニメーションの順番待ちを回避できる。
上記の例ではbtnIDを持つ要素にマウスをのせる→マウスを離すを素早く繰り返し実施する場合、
各アニメーションの時間(マウスをのせる場合は500ミリ秒、マウスを離す場合は200ミリ秒)が
経過していなくても次のアニメーションを実施できる。
最後に
jQueryを学ぶ上では以下の書籍を活用していた。
jQuery 最高の教科書
こちらはHTML,CSSの知識は多少あるが、jQueryは全く使用者経験がない方を対象に
最終的には実際の業務で使用できるレベルになることを目的としている。
これからjQueryを学ぶ方は一度手に取っていただきたい。