【JavaScript授業十七日目】JQuery(続き)
●$：読み ドル/ダラー
※阿久津さんはダラーと言っているので「ダラー」推奨
●widthとhightの書き方3種類
widthとhightはよく使うので書き方増えて優遇されている
例）ID名「content3」に幅50%を設定してみる
1.通常の書き方
$('#content3').css('width', '50%');
2.複数指定するときに便利
$('#content3')
'width': '50%',
});
$('#content3').width('50%');
問題：三秒後、幅を200px減らして画像表示し、コンソールにも表示する
let width = $("#mountain").width();
setTimeout(function () {
$("#mountain").width(width - 200);
console.log("写真の幅:" + $("#mountain").width());
}, 3000);
https://taneppa.net/jquery-event-list/
◆イベント駆動モデル
イベント：ユーザの操作（他もある）
・ユーザの操作をきっかけに関数を呼び出して処理する
★必ず確認すべき3つ
1.イベントが発生する場所
2.イベントの種類（例：クリック、ダブルクリック）
3.イベント発生場所に呼び出される処理（関数）
・場所：$('.btn1') → クラス名「btn1」要素
・種類：'click' → クリック
・処理（関数）：function () {$('.box1').css('color', 'red');}
クラス名「btn1」の文字色を赤に変更
$('.btn1-1').on('click', function () {
$('.box1').hide(500);
});
・場所：クラス名「btn1-1」
・種類：クリック
・処理：box1を0.5秒をかけて表示「$('.box1').hide(500); 」
●fadeToで表示切替
$('.btn8').on('click', function () {
if (res == 1) { 表示されている時は(不透過度1)
$('.box8').fadeTo(500, 0); 非表示(不透過度0)にする
} else { 非表示の時は(不透過度0)
$('.box8').fadeTo(500, 1); 表示(不透過度1)する
}
});
・fadeToメソッド：任意の透明度に変更
非表示(display:none;)されないので要素の高さが維持される
toggleがないので必要な場合は自前実装
・第1引数：期間
・第2引数：透明度(opacity)指定
●JQueryのメソッドの種類（公式ページ）
●コールバック関数
・この記述は、表示が終わった後に文字色を赤くする
$('.btn2-2').on('dblclick', function () {
$('.box2').show(5000, function () {
$('.box2').css("color", "red");
});
});
赤い部分：コールバック関数
・表示・非表示用（show,hide）のメソッドは処理完了後に呼び出す関数を指定できる
例) $("場所").show(時間,関数);
・処理完了後に呼び出す関数をコールバック関数という
●右に10px移動させるアニメーション
$('.btn1-1').on('click', function () {
let animeElm = $('.box1');
アニメーションさせる要素オブジェクトを取得
変数animeElmに代入（文字列を数字にする「0px」→「0」）
アニメーションさせる要素のleftプロパティを
取得して数値に変換後に変数animeLeftに代入
animeElm.animate({ 'left': animeLeft + 10 }, 500,
アニメーションさせる要素のleftプロパティを+10してアニメーション
function () {
});
});
●イージイイグプラグイン：イージングキーワード
http://gsgd.co.uk/sandbox/jquery/easing/
↓ソース読み込んでる
<script src=
</script>
●Easing/jQuery
