jQueryの使い方

jQueryの実装方法をまとめました。
`style`は最低限しか書いていないので、調整してください。

# 読み込み
2通りのやり方がありますが、状況に応じて使い分けてください。

- [jQuery](https://jquery.com)でライブラリをダウンロードして読み込む

```html
<script src="./jquery-3.4.1.min.js"></script>
```

- jQueryのCDNを読み込む

```html
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
```

# 基本
## DOMの読み込みを待つ
ページの読み込みの最後に適用する

```javascript
$(function() {
  // 処理を書く
})
```

## 文字の色を変える
idが`test`の要素の文字色を赤にする

```javascript
$('#test').css('color','red')
```

## 背景の色を変える
idが`test`の要素をクリックしたら、背景色を赤にする

```javascript
$('#test').on('click', function() {
  $(this).css('background-color', 'red')
})
```

## フェードアウトする
idが`test`の要素をクリックしたら、2秒かけてフェードアウトする

```javascript
$('#test').on('click', function() {
  $(this).fadeOut(2000)
})
```

## テキストを挿入する
idが`test`の要素をクリックしたら、この要素の前後とこの要素内の前後にテキストを挿入する

```javascript
$('#test').on('click', function() {
  $(this)
    .prepend('要素の中の前')
    .append('要素の中の後')
    .before('要素の前')
    .after('要素の後')
})
```

## クラスを付与する
idが`test`の要素をクリックしたら、この要素に`test`というクラスを付与する

```javascript
$('#test').on('click', function() {
  $(this).addClass('test')
})
```

## アニメーションする
idが`test`の要素をクリックしたら、この要素を2秒かけてmargin-topとmargin-leftを100pxの位置に移動する

```javascript
$('#test').on('click', function() {
  $(this).animate({
    'margin': '100px 0 0 100px'
  }, 2000)
})
```

## クリックイベントを検知する
idが`test`の要素をクリックしたら、その要素のインデックス（何番目か）をconsole.log()とalert()を用いて表示する

```javascript
$('#test').children('li').on('click', function() {
  var index = $(this).index()
  console.log(index)
  alert(index)
})
```

## ホバーしている間クラスを追加する
idが`test`の要素をhoverしたら、`test`というクラスを付与し、hoverが外れたら、クラスを削除する

```javascript
$('#test').hover(
  function() {
    $(this).addClass('test')
  },
  function() {
    $(this).removeClass('test')
  }
)
```

## data属性を取得する
idが`test`の要素をhoverしたら、この要素に設定してあるdata属性をconsoleに表示する

```javascript
$('#test').on('click', function() {
  var data = $(this).data('text')
  console.log(data)
})
```

## 対応する別の要素にクラスを追加する
idが`test`の子要素をクリックしたら、その要素のインデックスと等しいidが`test2`の子要素に`test`というクラスを追加する

```javascript
$('#test').children('li').on('click', function() {
  var index = $(this).index()
  $('#test2').children('li').eq(index).addClass('test')
})
```

# 応用
## モーダルウィンドウ

```html:html
<div class="modal">modal</div>
<div class="modal-open">modal-open</div>
<div class="modal-close">modal-close</div>
```

```javascript:javascript
$('.modal-open').on('click', function() {
  $('.modal').fadeIn(500)
})
$('.modal-close').on('click', function() {
  $('.modal').fadeOut(500)
})
```

## タブメニュー

```html:html
<ul id="test">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<ul id="test2">
  <li class="is-show">item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>
```

```javascript:javascript
$('#test').children('li').on('click', function() {
  var index = $(this).index()
  
  $('#test2')
    .children('li')
    .removeClass('is-show')
    .eq(index)
    .addClass('is-show')
})
```

## ドロップダウンメニュー

```html:html
<ul id="test">
  <li>item1</li>
  <li>
    <p>item2</p>
    <ul id="test2" style="display: none;">
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
    </ul>
  </li>
  <li>item3</li>
</ul>
```

```javascript:javascript
$('#test').children('li').hover(
  function() {
    $(this).children().next().stop().slideDown(400)
  },
  function() {
    $('#test2', this).stop().slideUp(400)
  }
)
```

## ソート機能

```html:html
<select class="select">
  <option value="all">all</option>
  <option value="type1">type1</option>
  <option value="type2">type2</option>
  <option value="type3">type3</option>
</select>
<ul class="list">
  <li data-type="type1">item1</li>
  <li data-type="type2">item2</li>
  <li data-type="type3">item3</li>
  <li data-type="type1">item4</li>
  <li data-type="type1">item5</li>
  <li data-type="type2">item6</li>
</ul>
```

```javascript:javascript
$('.select').on('change', function() {
  var selectVal = $(this).val()
  
  $('.list').children('li').each(function(index, val) {
    var data = $(this).data('type')
  
    if (selectVal === data || selectVal === 'all') {
      $(this).show()
    } else if (selectVal !== data) {
      $(this).hide()
    }
  })
})
```

## 文字数カウント

```html:html
<input type="text" class="input">
<div class="rest-count">10</div>
<style>.red { color: red; }</style>
```

```javascript:javascript
var maxLength = $('.rest-count').html()

$('.input').on('keyup keydown keypress', function(){
  var strLength = $(this).val().replace(/\s+/g,'').length

  $('.rest-count').html(maxLength - strLength)
  if ($('.rest-count').html() <= -1) {
    $('.rest-count').addClass('red')
  } else {
    $('.rest-count').removeClass('red')
  }
})
```

## カルーセル

```html:html
<div class="slider">
  <ul class="slider-list">
    <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=sample" alt=""></li>
    <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=sample" alt=""></li>
    <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=sample" alt=""></li>
  </ul>
</div>
<button class="slider-ctrl-btn" data-ctrl="prev"></button>
<button class="slider-ctrl-btn" data-ctrl="next"></button>

<style>
.slider {
  position: relative;
}
.slider-list {
  display: flex;
  position: absolute;
}
</style>
```

```javascript:javascript
var width = $('.slider-list').children('li').width()
var length = $('.slider-list').children('li').length-1
var index = 0

$('.slider-ctrl-btn').on('click', function() {
  var data = $(this).data('ctrl')
  if (data === 'prev') {
    index--
    if (index < 0) {
      index = length
    }
  } else {
    index++
    if (index > length) {
      index = 0
    }
  }
  $('.slider-list').stop().animate({ left: index * -width })
})
```

## スムーススクロール

```html:html
<button class="scroll-top-btn" style="position: fixed; display: none;">back to top</button>
<button class="menu-btn" data-scroll-place-type="title">anchor</button>
<div class="title" data-scroll-place-type="title">title</div>
```

```javascript:javascript
$(window).scroll(function() {
  if ($(window).scrollTop() >= 50) {
    $('.scroll-top-btn').fadeIn()
  } else {
    $('.scroll-top-btn').fadeOut()
  }
})

$('.scroll-top-btn').on('click', function() {
  $('html, body').animate({ scrollTop: 0 })
})

$('.menu-btn').on('click', function() {
  var data = $(this).data('scroll-place-type')
  var elem = $('.title[data-scroll-place-type='+ data +']').offset().top
  $('html, body').animate({ scrollTop: elem })
})
```

## 非同期処理

```javascript:javascript
$.ajax({
  url: './test.json',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data)
  },
  error: function(data) {
    alert('error')
  }
})
```

# jQueryのメソッド

| メソッド名 | 出来ること |
| --- | --- |
| .index() | 要素のindexを取得する |
| .eq() | 引数に応じたindexの要素を指定する |
| .addClass() | クラスを追加する |
| .removeClass() | クラスを削除する |
| .hover(関数, 関数) | 要素の上にマウスカーソルが乗ると第1引数の関数を実行し、マウスカーソルから離れると第2引数の関数を実行する |
| .slideDown() | 要素がスライドしながら表示する |
| .slideUp() | 要素がスライドしながら非表示する |
| .next() | 要素の隣の要素を取得する |
| .children() | 要素の子要素を取得する |
| .stop() | 現在動作中のアニメーション処理を全て中止する |
| .show() | 要素を表示する |
| .hide() | 要素を隠する |
| .val() | 要素のvalueを取得する |
| .data('') | 要素のdata属性を取得する |
| .change() | セレクトボックスの値の変更をキャッチする |
| $().each() | DOM要素を1つずつループ処理をする（ループ内で$(this)を使うと要素がひとつずつ取得できる） |
| .replace(/\s+/g,'').length | 改行を含まない文字数を取得する |
| .animate({}) | cssのプロパティを一定時間かけて変化する |
| .width() | 要素の幅を取得する |
| .length | 要素の個数を取得する |
| .scrollTop() | 画面のスクロール位置を取得する |
| .animate({ scrollTop: スクロール位置 }) | スクロール位置までアニメーションする |
| .offset().top | 要素の位置を取得する |
| .fadeIn() | 要素をフェードインする |
| .fadeOut() | 要素をフェードアウトする |

# jQueryのイベント

| イベント名 | 概要 |
| --- | --- |
| click | 要素をクリックした時 |
| dblclick | 要素をダブルクリックした時 |
| mousedown | マウスボタンを押した時 |
| mouseup | マウスのボタンを離した時 |
| mouseenter | 要素にカーソルが入った時 |
| mouseleave | 要素からカーソルが出た時 |
| mouseover | 要素にカーソルが乗った時 |
| mouseout | 要素からカーソルが外れた時 |
| mousemove | 要素内をカーソルが移動した時 |
| focus | 要素にフォーカスを当てた時 |
| blur | 要素からフォーカスを外した時 |
| focusin | 要素にフォーカスを当てた時（イベントバブリングあり） |
| focusout | 要素からフォーカスを外した時（イベントバブリングあり） |
| change | 要素の値を変更した（input、selectなど） |
| select | テキストボックス／テキストエリアのテキストを選択した時 |
| submit | フォームから送信した時 |
| keydown | キーを押した時 |
| keypress | キーを押し続けている時 |
| keyup | キーを離した時 |
| resize | ウィンドウのサイズを変更した時 |
| scroll | スクロールした時 |
| contextmenu | コンテキストメニューを表示する前 |