実務経験で身につけた技術 ～JavaScript・jQuery編～

#はじめに
未経験から実務経験２か月ちょっとを経て、1つのサイトを完成させることができたので（もちろん色々な人の手助けあってですが）、今後に生かすインプットと自分の備忘録としてPHP、JavaScript・jQuery、HTML・CSSの３つに分けて記録していきます。
この記事では、Javascript・jQueryについて書いていきます。
なお、身につけた技術は随時、記録・更新していきます。
他の記事については、下記のリンク先からご覧ください。

別の記事のリンク

[実務経験で身につけた技術　～PHP編～](https://qiita.com/hx_kei/items/cc31823dfc2425ac0688 "実務経験で身につけた技術　～PHP編～") [実務経験で身につけた技術　～HTML・CSS編～](https://qiita.com/hx_kei/items/2079aa122f779081271c "実務経験で身につけた技術　～HTML・CSS編～")

#JavaScript・jQuery

###$(function() {});
HTMLの読み込みが全て完了した後実行するという指定。
基本的にjqueryの記述は、HTMLが読み込まれた後に実行する必要があるので、上記の記述は必須。
jqueryを使うときには必ず書くと認識しておく。また、下記の処理も一緒のこと。（処理あればわかりやすい上記に書き換える）
参照
【jQuery】$(function() {...}) について　「意味や実行されるタイミング」

$(document).ready(function{
 //処理
});

jQuery(document).ready(function(){
 //処理
});

jQuery(function(){
 //処理
});

###チェックボックスの処理

//チェックボックス操作時
$('#check').click(function(){
if($(this).prop('checked')) {
	$('#btn').removeClass('disable'); //disableを外す
	$('#btn input').prop('disabled',false);　//disabledを外す
	//$('#btn').html('<input type="submit" value="">');

} else {
	$('#btn').addClass('disable');　//disableをつける
	$('#btn input').prop('disabled',true); //disabledをつける
	//$('#btn').html('<input type="button" value="">');
}
});

チェックボックスがクリックされたときの処理。
prop()でチェックボックスのcheckedプロパティの状態を取得。
removeClassでcssを外す。addClassでcssをつける。（黒→オレンジ）
htmlで('#btn')タグ内のHTML要素の書き換え。

prop()は、input typeの情報も取得できるし、チャックをつけたりも可能。
下記の記事がすごくわかりやすい。
jQueryのprop()でプロパティの設定･取得

下記の記事を参考にしてinputタグ内のdisabledを外したりつけたりすることで、制御を書き換えた。
disabledはinput要素を無効にする。
jQueryのprop()でdisabled属性を切り替える

###CSSの要素をつける

$(function() {
  // 「.test」要素に対するclickイベントを作成してください
  $('.test').click(function(){
    $(this).css('color','red');
  }); 
});

クリックした時、.testにcssをつけて赤色にする。

###aタグにsubmitを持たせて、hiddenの値も含めて送信

<form action="test.php" method="post" name="test" id="test">
  <input type="hidden" name="page" id="page" value="form" />
<中略>
<p><a href="javascript:void(0);" onclick="$('#page').val('form');$('#test').submit();return false;"></a></p>
</form>

formのidをonclickでsubmit()することでformの中身を送信可能。
('').val('');でhiddenの値も一緒に送信できる。

###セレクトボックスにはonclickではなく、onchangeを使う

<select onchange="location.href=value;">
    <option value="">default</option>
    <option value="./sample1.html">sample1</option>
    <option value="./sample2.html">sample2</option>
    <option value="./sample3.html">sample3</option>
    <option value="https://google.com/">Awesome Blog</option>
</select>

location.href=value;でセレクトボックスを操作した時、aタグをクリックした時と同じように指定先に遷移することが可能。
遷移先はoptionのvalueに記述する。

###fadeIn()・fadeOut()

$(function() {
 $('.test_open').click(function() {
   $('.test,.testLay,.test_close>.contents,.test>.note').fadeIn(500);
 });
});

test_openクラスを持つボタンがクリックされた時、グループセレクタで.test,.testLay,.test_closeの複数を指定することで
一度にfadeIn(display:blockと同じ）することが可能（使いたい要素を追加することもできる）。出したい要素を簡単に指定して表示・非表示することができる。
>.noteはその下。>.contents,.testはその下のcontentsあるいはtestの下にある要素という指定。
fadeIn(500)は0.5秒間で表示という指定。

$(function() {
 $('.test>.test_close').click(function() {
   $('.test,.test2,.overLay').fadeOut(500);
   //$('.test>.note').css('display','block');　//別のモーダルを表示させたい時に利用
 });
});

fadeOutも同様。test_close直下のtestをクリックした時にfadeOutする。
さらに/$('.test>.note').css('display','block');で続けて別の要素を表示させることが可能。

###背景固定

$(function(){
	var scrollPosition;
	$(".test_open").on("click", function() {
		scrollPosition = $(window).scrollTop();
		$('body').addClass('fixed').css({'top': -scrollPosition});
	});
	$(".test,.test2>.test_close").on("click", function() {
		$('body').removeClass('fixed').css({'top': 0});
		window.scrollTo( 0 , scrollPosition );
	});
});

scrollPositionに現在のスクロール位置を記録。
.addClass('fixed')で画面を固定。(.css('postion','fixed')でも可)
'top': -scrollPositionで現在位置まで移動。
クローズ時は要素を外して、現在のスクロール位置まで移動。

###toggleClass

//フォームのチェックボックス開閉
$(function(){
    $('.trig input').on("change", function () {
        if (this == true) {
           $(this).parents('.Wrap').find('.Targ').slideToggle();
           $(this).parents('.Wrap').find('.Trig').toggleClass('-active');
        }else {
           $(this).parents('.Wrap').find('.Targ').slideToggle();
           $(this).parents('.Wrap').find('.Trig').removeClass('-active');
        }
    });
});

toggleClassを利用したチェックボックス開閉。チェックを付けたり外したリするたびにonchangeイベントが発生する。
checkがあればthis == true下の処理になる。.trig下のcheckboxクリック時にその上の親要素である.Wrapをparentsで特定する。
.findでその下の要素の.Targを特定してslideToggle()する。(display:none→display:block)
toggleClassは-activeがあれば削除、なければ追加。

#最後に
まとめることでなんとなく理解していた箇所をクリアに理解することができました。
まだ全然書ききれていないので、随時更新します。
今後もアウトプットした分だけインプットするよう心掛けていきます。