26日目。jQueryでめっちゃ動くホームページができました！

26日目は、ProgateのjQuery上級編をやっつけました。
めっちゃぬるぬる動くホームページが完成して、面白くってあちこち動かしております。
なるほどこうやって作っていたんですね。いろいろ作れそうで楽しみです。

26日目。にんじゃわんこの部屋
http://appdays.herokuapp.com/Day26/

(所要時間４時間！）

メニューの上にマウスをのっけて表示、外して隠す。

lessonの上にマウスを載せたらaddClass、外れたらremoveClass
元のコードを確認して・・・若干ちがう。やっぱり！ほぼカンニング（汗）

 $('.lesson').hover(
    function() {
      $(this).find('.text-contents').addClass('text-active');
    },
    function() {
      $(this).find('.text-contents').removeClass('text-active');
    }
  );

FAQをアコーディオンで開くー閉じる。

OPENとSlideUPだけで実装できるのだっけ。
いっしょうけんめいOPENというクラスをつくっては詰まっていました。

  // アコーディオン

  $('.faq-list-item').click(function() {
    var $answer = $(this).find('.answer');
    if($answer.hasClass('open')) {
      $answer.removeClass('open');
      $answer.slideUp();

      $(this).find('span').text('+');

    } else {
      $answer.addClass('open');
      $answer.slideDown();

      $(this).find('span').text('-');
    }
  });
});

jQuery上級

にんじゃわんこの紙芝居を作りました！

jQueryオブジェクトの構想

配列の「ような」構造をしており、セレクタに合致した要素が配列のように入っています（実際には配列とは異なるものです）。

インデックス番号

配列と同じように0から順にインデックス番号というものが割り振られています。

eqメソッド

jQueryオブジェクトの中から、eqの引数の数字と同じインデックス番号の要素を取得できます。

  $('#hide-btn').click(function() {
    $('.slide').eq(1).fadeOut();
  }); 

indexメソッド

いま見ている要素が配列の何番目から取得したり、配列の番号を指定したりします。

  $('.index-btn').click(function() {
    $('.active').removeClass('active');
    var clickedIndex = $('.index-btn').index($(this));
    $('.slide').eq(clickedIndex).addClass('active');
  });

prevとnext

いま見ている要素の１つ前、１つ後の要素を取得する。

 if ($(this).hasClass('next-btn')) {
        $displaySlide.next().addClass('active');
        
    } else {
      $displaySlide.prev().addClass('active');
    }

最初と最後のスライドの時、ボタンを隠す。

indexでスライドの番号をとってきて、ifで分岐して消す。

    var slideIndex = $('.slide').index($('.active'));
    $('.change-btn').show();
    
    if(slideIndex==0) {
       $('.prev-btn').hide();
    } else if(slideIndex==3) {
       $('.next-btn').hide();
    }

共通部分の関数化

Javascriptとおなじようにまとめられる。

length

要素の数を取得する

if (slideIndex == $('.slide').length -1) {
      $('.next-btn').hide();
      }

フォームを操作しよう

textメソッド

HTMLやCSSの内容を取得したり書き換えたりできる。すごい！

  var title = $('#title').text();
  $('#title-text').text(title);

attrメソッド

HTMLの属性はattrメソッドを用いて「ゲット」と「セット」ができます。

attrってなんて読むんだろう
アトリ？アトレ？あたたぁ？
http://yomikata.org/word/attr

inputの要素取得

.val()で持ってくる。
var text = $('.input').val();

セレクトボックス

<option value = "xxx"> → SELECT値をvalでとってくる。

フォームの入力チェック

option valueが空だったらエラーを返すようにする。
・空だったら・・・「''」シングルクォート２つ

入力欄への自動入力

val()で入力欄にデフォルト値を書き込んでおく。

  // 「.option-btn」要素のclickイベントをつくってください。
  $('.option-btn').click(function(){
    var optionText = $(this).text();
    $('#text-form').val( optionText +'が好きな理由は、');
  })
``

valとtextの違いがいまいちわからない。。。

### セレクトボックスの自動入力
おなじようにできる。

### カスタムデータ属性
`data-`で始まる属性を任意につける事ができる。

### animateメソッド
アニメーションをつけるにはanimateメソッドを用います。$('セレクタ').animate({'プロパティ':'値'})のように、引数は連想配列で指定します。

```javascript
  // SNSボタン
  $('.social-icon').hover(
    function(){
      $(this).children('span').animate({
        'font-size':'30px'
      }, 300);
    },
    function(){
      $(this).children('span').animate({
        'font-size':'24px'
      }, 300);
    }
  );

クリックするとアイコンの文字がぷりっと大小します。

scrollTop

ページ内の指定の場所にスクロールする。

  $('#top-btn').click(function(){
    $('html, body').scrollTop(0);
                           //上からゼロ、つまり最上部までスクロール。
  });

ぬるっとスクロール

animateメソッドをはさむと、指定の速度で移動します。

'''javascript
$('#top-btn').click(function(){
$('html, body').animate({
'scrollTop':0
//変更するプロパティ
},500);
//アニメーションのはやさ
});
'''

ナビゲーションをつくる

目次をクリックして記事の位置までスクロールします。

offset

要素の表示位置を取得します。

  $('header a').click(function(){
   var id = $(this).attr('href');
   var position = $(id).offset().top;
    $('html,body').animate({ 
      'scrollTop': position
    }, 500);
  })

完成！