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

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

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

(所要時間４時間！）



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

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

###FAQをアコーディオンで開くー閉じる。
OPENとSlideUPだけで実装できるのだっけ。
いっしょうけんめいOPENというクラスをつくっては詰まっていました。

```javascript
  // アコーディオン

  $('.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の引数の数字と同じインデックス番号の要素を取得できます。

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

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

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

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

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

###最初と最後のスライドの時、ボタンを隠す。
indexでスライドの番号をとってきて、ifで分岐して消す。

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

###共通部分の関数化
Javascriptとおなじようにまとめられる。

###length
要素の数を取得する

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

##フォームを操作しよう

###textメソッド
HTMLやCSSの内容を取得したり書き換えたりできる。すごい！

```javascript
  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()`で入力欄にデフォルト値を書き込んでおく。

```javascript

  // 「.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
ページ内の指定の場所にスクロールする。

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

###ぬるっとスクロール
animateメソッドをはさむと、指定の速度で移動します。

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

###ナビゲーションをつくる
目次をクリックして記事の位置までスクロールします。

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

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

###完成！