2019/2/27,28学習記録 - 学習ブログ

JS6基本

console.log("hoge");
hogeの出力

let name = "hoge"; これは変数

const name = "hoge" これは定数

if文
if (条件式 ) {
処理
} else if (条件式) {
処理
} else {
処理
}
最後にセミコロンはいらない。
&&は条件式がどちらもtrueならtrue
||はどちらかがtrueならtrue

switch(条件の値) {
case 値:
処理
　break;
case 値:
処理
　break;
}

switch文は条件の数だけ、case文が発生する。
なおbreakを記述しないと、処理が次のcase文が実行され処理が終わらないため、必ずつける。

jquery

基本構文

$(function(){

});

この中に処理を記載する。

$("セレクタ").処理("条件");のような構文。
ex)
$("#name").fadeIn("slow");のような形。
処理が高速になるためできるだけidを使用する。
セレクタには$(".sample"),$("#sample")のような記載をする。
セレクタ記載の際に.や#を忘れないように注意。なぜ動かないん？？とハマる原因になりうる。

clickイベント

$("").click(function()({

$("#name").fadeIn("slow").css("color","red");

});

クリックすると名前が赤文字でフェイドインする。

hoverイベント

カーソルを載せている時と、載せていない時の処理を書く必要がある。

$("#sumple-wrapper").hover(
function(){
$(".sumple-text").fadeIn();
},
function(){
$(".sumple-text").fadeOut();
}

イベントの考え方

何にどうしたことによって、何がどうなるみたいな書き方のイメージ。

if文について

if ($("").method("")) {
trueの処理
} else {
falseの処理
}

このような記載方法で記述。

変数の定義について

var $sample = $("#sample")のような形で定義する。

methodについて

fadeIn
fadeOut

slideIn
slideOut

text("")　文章を変えるmethod
html('')シングルクォーテーションで囲む　html毎変えるmethod

find("a").methodのような形で使用。指定した子孫要素のセレクタ全てに対してmethodを適用
children.("a").methodのような形で使用。親階層の一つ下の階層のセレクタに適用

addClass("class name")　クリックイベントやホバーで使用し、クラスを足すことによって文字を表示させる、消す等の使用方法。なおclass nameには.や#をつけないことに注意する必要がある。
removeClass("class name")

参考: progate javascript, jquery