jQuery (ES5) 備忘録

# 前提
ES5のjQueryを触らないといけない、なんてことになった際にとりあえず覚えておこう的最低限メモ  
Jsなんとなーく見たことあるけどほぼ触ったことない、HTML/CSSは最低限の知識がある


## 変数定義
- ES5なので`let`は使えません  
- 下記はHTMLの`tmp`クラスをjQueryオブジェクトとして生成

```javascript
var $tmp = $('.tmp');
```

## CSSとか
- `$tmp`変数にHTML要素があればCSSを適用できる
- HTML属性の中身をセットしたりとか

```javascript
$tmp.css('color','red');
$tmp.html('href=https://xxxxxxx');
```

## モーダルの出現、閉じる
modelの要素は最初は`display: none;`にしておこう！

```javascript
  $('.signup-show').click(function(){
    // モーダル出現
    $('#signup-modal').fadeIn();
  });
  
  $('.close-modal').click(function() {
    // モーダル閉じる
    $('#signup-modal').fadeOut();
  })
```

## Hover
TextなんかをHoverで表示/非表示したい場合はadd/removeのclassに対して`display: block`にしておこう！
`function()`を二つ定義しないといけないのは忘れないように（Hoverしたときのアクション、離された時のアクション）

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

## アコーディオン（FAQなどで使う内容表示、非表示）
```javascript
$('.faq-list-item').click(function() {
    var $answer = $(this).find('.answer');
    // answerクラスがopenになっているかどうか（開いているかどうか、内容が表示されているかどうか）
    if($answer.hasClass('open')) { 
      // open状態を削除
      $answer.removeClass('open');
      // slideUpメソッドを用いて、$answerを隠す
      $answer.slideUp();

      // .faq-list-item子要素のspanタグの中身をtextメソッドを用いて'+'に書き換え
      $(this).find('span').text('+');
    
    // answerクラスがcloseになっている（閉じている、内容が表示されていない）
    } else {
      $answer.addClass('open'); 
      // slideDownメソッドを用いて、$answerを表示
      $answer.slideDown();
      // .faq-list-item子要素のspanタグの中身をtextメソッドを用いて'-'に書き換え
      $(this).find('span').text('-');
```

## eqメソッド
jQueryの`$()`オブジェクトは実は配列らしい  
`<li>`要素が例えば4つある`$('.tmp')`オブジェクトがあれば`$('.tmp').eq(1)`とかしたら要素の取り出しができるみたい  

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

## indexメソッド
クリックされた要素が何番目のindexなのかチェック

```javascript
    var clickedIndex = $('.btn').index(this);
    $('.slide').eq(clickedIndex).addClass('active');
```

## next / prev メソッド
HTML要素の前/後を取得する

```javascript

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

## textメソッド
- `.text()`はHTML要素の内容置換にも使えたりする
- `p`要素の文字列取得

```javascript

$tmp.text('foooooooooo');
var txt = $('p').text;
```

## attrメソッド
HTML属性のゲッター/セッター
属性とは、
- id
- class
- href
- src
- type
など。

```javascript
  // tmpクラスのid属性のpタグの中身を取得
  var id = $('.tmp p').attr('id');
  // linkIDのhref属性の中身を取得
  var href = $('#link').attr('href');
  // pタグのidをtmpにセット
  $(p).attr('id', 'tmp');
```

## val()メソッド、submitファンクション
`input`, `form`要素から入力された値を`val()`で取得
または、`select`要素で選択されたリストの`value`属性を取得

```javascript
  $('#form').submit(function() {
    var textValue = $('#text-form').val();
    $('#output-text').text(textValue);
    return false;
  })
```

## scrollTop メソッド
任意のセクションまで移動させる
ページの一番上のポジションから`offset().top`で指定したセクションの上までの距離を取得し、そこまでスクロール
`$(window)`は現在のwindow

```javascript
var position =  $('.tmp').offset().top;
$(window).scroll(position);
```
もしくは下記のように使う
`header`要素に何かしらジャンプしたい要素がある場合

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


## animateメソッド
`hover`と合わせてアニメーションつけたりする
渡す値は連想配列になってるので注意

```javascript
$('.sns-icon').hover(
  // hover時font-sizeを30pxにする、アニメーション速度は300ミリ秒
  function() {
    $(this).animate({'font-size':'30px'}, 300);
  },
  // hoverから離された時
  function() {
    $(this).animate({'font-size':'24px'}, 300);
  }
)
```