よく使われているjQueryの単語の意味や使い方の事例をまとめました。
条件分岐
●条件を比較し、処理を分岐する
if{ //条件を比較 } else if{ //さらに条件を比較 } else{ //それ以外 }
if(scroll >= 100){ //上から100pxスクロールしたら
$(‘#page-top’).removeClass(‘DownMove’);//#page-topについているDownMoveというクラス名を除く
$(‘#page-top’).addClass(‘UpMove’); //#page-topについているUpMoveというクラス名を付与
}else{
if($(‘#page-top’).hasClass(‘UpMove’)){//すでに#page-topにUpMoveというクラス名がついていたら
$(‘#page-top’).addClass(‘DownMove’); //DownMoveというクラス名を#page-topに付与
}
}
●ウィンドウの横幅を取得し、画面サイズにあわせて処理を条件分岐する
var width = $(window).width(); if(width <= 768 ){ //横幅が768px以下の場合 }else{ //横幅が768pxより大きい場合 }
function mediaQueriesWin(){
var width = $(window).width();
if(width <= 768) {
$(“.navi”).addClass(‘active’); //横幅が768px以下の場合 naviというクラスにactiveを追加
}else{
$(“.navi”).removeClass(‘active’); //横幅が768pxより大きい場合、naviというクラスについているactiveを削除
}
}
//画面がリサイズされたら動かす
$(window).resize(function(){
mediaQueriesWin(); /*関数を呼ぶ */
});
//画面が読み込まれたらすぐに動かす
$(window).on(‘load’,function(){
mediaQueriesWin(); /* 画面が読み込まれたらすぐに動かす */
});
※ウィンドウの横幅を取得し、画面サイズに合わせて処理する条件分岐をする際にはresizeとloadイベントをセットで使用する。
計算や比較をする
●計算する
| 記号 | 意味 |
| ＝ | 値を変数に代入 |
| += | 値を加算して変数に代入する |
| + | 足し算 |
| – | 引き算 |
| / | 割り算 |
| * | 掛け算 |
| ++ | 変数の値を１つ増やす |
●値を比較する
| 記号 | 意味 |
| > | 大なり |
| < | 小なり |
| >= | 以上 |
| <= | 以下 |
| == | 等しい |
| === | 厳密に等しい |
| != | 等しくない |
| !=== | 厳密に等しくない |
| && | ２つとも一致すればTrue |
| || | どちらか一致すればTrue |
| ! | ●●ではない（否定） |
