Progate「jQuery 初級編、中級編、上級編」に登場するメソッド、イベント

備忘録として、Progate[「jQuery 初級編」](https://prog-8.com/lessons/jquery/study/1)、[「jQuery 中級編」](https://prog-8.com/lessons/jquery/study/2)、[「jQuery 上級編」](https://prog-8.com/lessons/jquery/study/3)に登場するメソッド、イベントをまとめてみました。

# メソッド

## showメソッド
隠れた要素を表示する

```
$('セレクタ').show();
```

## hideメソッド
要素を隠す
  
```
$('セレクタ').hide();
```

## fadeInメソッド
要素を徐々に表示するアニメーション

```
$('セレクタ').fadeIn();
```

引数でアニメーションの速度を「ゆっくり」に指定

```
$('セレクタ').fadeOut('slow');
```

## fadeOutメソッド
要素を徐々に隠すアニメーション

```
$('セレクタ').fadeOut();
```

引数でアニメーションの速度を1500ミリ秒（1.5秒）に指定

```
$('セレクタ').fadeOut(1500);
```

## sliedInメソッド
要素を上から下へ徐々に表示するアニメーション

```
$('セレクタ').slideIn();
```

引数でアニメーションの速度を「ゆっくり」に指定

```
$('セレクタ').slideIn('slow');
```

## sliedUpメソッド
要素を下から上へ徐々に隠すアニメーション

```
$('セレクタ').slideUp();
```

引数でアニメーションの速度を1500ミリ秒（1.5秒）に指定

```
$('セレクタ').slideUp(1500);
```

## scrollTopメソッド
リンク先への移動にアニメーションをつけることができる
※通常$('html, body')に対して用いる

```
$('html, body').scrollTop(値);
```

## animateメソッド
アニメーションを設定できる

```
$('セレクタ').animate({'プロパティ':'値'}, 時間);
```

CSSの値だけでなく、scrollTopなどの値も変更できる

```
$('セレクタ').animate({'scrollTop': 0}, 'slow');
```

## offsetメソッド
要素の表示位置（top, left）を取得できる

```
$('セレクタ').offset();
```

offset().topとすると、ページの上端からの距離が取得できる

```
$('セレクタ').offset().top;
```

## textメソッド

### ゲット
要素の文字列を取得する

```
$('セレクタ').text();
```

### セット
要素の文字列を変更する

```
$('セレクタ').text('文字列');
```

## htmlメソッド

### ゲット
要素のHTMLを取得する

```
$('セレクタ').html();
```

### セット
要素のHTMLを変更する

```
$('セレクタ').html('HTML');
```

## cssメソッド

### ゲット
CSSを取得できる

```
$('セレクタ').css('プロパティ名');
```

### セット
CSSを変更できる

```
$('セレクタ').css('プロパティ名', '値');
```

## attrメソッド

### ゲット
HTMLの属性を取得できる

```
$('セレクタ').attr('属性名');
```

### セット
HTMLの属性を変更できる

```
$('セレクタ').attr('属性名', '値');
```

## valメソッド

### ゲット
要素のvalue属性を取得できる

```
$('セレクタ').val();
```

### セット
要素のvalue属性を変更できる

```
$('セレクタ').val('value属性', '値');
```

## findメソッド
すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得

```
$('セレクタ').find('取得したいセレクタ');
```

## childrenメソッド
指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得

```
$('セレクタ').children('取得したいセレクタ');
```

## eqメソッド
指定したセレクタの中から、eqの引数の数字と同じインデックス番号の要素を取得する  
※インデックス番号は0から始まる

```
$('セレクタ').eq(インデックス番号);
```

## indexメソッド
指定したセレクタの中から、検索する要素のインデックス番号を取得する  

```
$('セレクタ').index('検索する要素');
```

## prevメソッド
指定したセレクタの兄弟要素（同じ階層の要素）の中から一つ前の要素を取得する

```
$('セレクタ').prev();
```

## nextメソッド
指定したセレクタの兄弟要素（同じ階層の要素）の中から一つ次の要素を取得する

```
$('セレクタ').next();
```

## lengthメソッド
指定したセレクタの要素の個数を取得する

```
$('セレクタ').length;
```

## addClassメソッド
指定した要素にclassを追加する

```
$('セレクタ').addClass('追加するクラス名');
```

## removeClassメソッド
指定した要素にclassを削除する

```
$('セレクタ').removeClass('削除するクラス名');
```

## hasClassメソッド
引数に指定したクラスを、オブジェクトが持っているか判定する

```
$('セレクタ').hasClass('判定するクラス名'); // true or false を返す
```

# メソッドチェーン
1つのjQueryオブジェクトに連続してメソッドが利用できる構文

```
$('セレクタ').css('color', 'red').html('jQuery');
```

---

# イベント
イベントを用いると、ある処理を行うタイミングを設定できる

```
$('セレクタ').イベント名(function(){
  // イベント発生時に実行したい処理
});
```

## clickイベント
セレクタがclickされた時に処理をする

```
$('クリックされるセレクタ').click(function(){
    // クリックされた時に #text を隠す
    $('#text').hide();
});
```

## hoverイベント
要素にマウスが乗った時、外れた時に指定した処理を行う

```
$('セレクタ').hover(
    function(){
        // マウスをのせた時の処理
    },
    function(){
        // マウスをはずした時の処理
    }
);
```

## submitイベント
送信ボタンがクリックされた時や「Enter」キーでフォームが送信された時に指定した処理を行う

```
$('セレクタ').submit(funtion(){
    // 処理
});
```