jQueryの理解を深める

# 基本的な考え方

JQueryの基本的な考え方は、`イベント発生時に、要素を指定して、変更を加える`。
なので、`イベント系メソッド`、`要素取得系メソッド`、`変更を加えるメソッド`を把握しておけば、自在に操ることができる。

#基本的な公式

```javascript:jQueryの公式
対象要素.on( イベント名, 要素, データ ,関数 )
```

```javascript:append後でも処理可能
$(document).on(イベント名, '要素', function ()
 {
 // 何かの処理
});
```
## 関数

###関数名を定義

```javascript:関数を定義
// 関数を定義
function 関数名 () {
  //処理を記述する
}

//関数を呼び出す・使う
関数名（）

```

```javascript:例
function add () {
  //処理を記述
}
add()
```

### 関数に引数を使う

```javascript:引数を使う
function 関数名 (引数1, 引数2...) {
    //処理を記述
}

関数名( 引数1, 引数2 ...);
```

```javascript:例
function add (num1, num2) {
    return num1 + num2;
}

add(1,2);
```

## function(e){}
e = eventの略
eventの情報を確認できる

```javascript:eの情報を確認する
$("#sample").click(function(e){
  console.log(e);
});
```
``jQuery.event``をクリックして、中身を確認

```:eの情報
altKey: false
bubbles: true
button: 0
buttons: undefined
cancelable: true
clientX: 99 //座標: x軸
clientY: 47 //座標: y軸
ctrlKey: false
currentTarget: input#sample
data: null
delegateTarget: input#sample
...(省略)
```
eから情報を取得するなら

```javascript:eの情報を取得
e.取得したい項目

//例
alert(e.clientX);
```

# 読み込み
redy と loadの２つの方法がある。

## redy

ready: DOMツリーの構築が完了したら実行される。
readyは画像などが表示されるより前に実行され、loadは画像などが表示された後に実行されます。

```javascript:読み込み
$(function(){
    alert('Hello');
});

//または
$(document).ready(function() {
    alert('Hello');
});

//または
jQuery(function() {
    alert('Hello');
});

//または
jQuery(document).ready(function(){
    alert('Hello');
});

//JavaScript
document.addEventListener('DOMContentLoaded', function(){
    alert('Hello');
}, false);
```


jQueryの書き方は、省略しているだけなので、どの書き方をしても同じです。


### 使い道
- htmlを置き換えるものや、表示するかしないかを制御するもの ex)ラジオボタンが選ばれていたら、表示する など
- ウインドウサイズによって決まるもの ex)スムーススクロールのコンテンツのポジション取得 など(場合によっては、rezsizeイベントも必要)
- 読み込み時間をカモフラージュするためのアニメーションなど


## load

load: 画像、動画などの関連データの全ての読み込みが完了したら実行される。

```javascript
$(window).on('load',function(){
    alert('Hello');
});

//または
$(window).load(function(){
    alert('Hello');
});

//JavaScript
window.onload = function(){
    alert('Hello');
}
```

### 使い道

- 画像の大きさを取得するものや、画像の大きさによって可変するもの
- ページ遷移時に表示するアニメーション(特にスマホは、readyにしてしまうと、ページが表示されたときにはもう終わっていたりする…)

## イベントの順番
イベントの順番は下記のようになる。

1. ページの読み込みが始まる
2. HTMLの読み込みが終わる
3. $(document).readyが実行
4. 画像など含めすべてのコンテンツの読み込みが終わる
5. $(window).loadが実行


#イベント一覧
<table>
<tbody>
<tr><th>	click	</th>
<td>	クリックされた時	</td></tr>
<tr><th>	dblclick	</th>
<td>	ダブルクリックされた時	</td></tr>
<tr><th>blur</th>
<td>	要素がフォーカスを失った時に発生	</td></tr>
<tr><th>	focus	</th>
<td>	要素がフォーカスを得た時に発生	</td></tr>
<tr><th>	load	</th>
<td>	ドキュメント内の全リソースの読み込みが完了したときに発生	</td></tr>
<tr><th>	resize	</th>
<td>	windowの大きさが変更された時に発生	</td></tr>
<tr><th>	scroll	</th>
<td>	ドキュメントがスクロールした時に発生	</td></tr>

<tr><th>	mousedown	</th>
<td>	要素上でマウスが押された時に発生	</td></tr>
<tr><th>	mouseup	</th>
<td>	要素上でマウスが押され、上がった時に発生	</td></tr>
<tr><th>	mousemove	</th>
<td>	要素上でマウスが移動している時に発生	</td></tr>
<tr><th>	mouseover	</th>
<td>	マウスが要素に入った時に発生。子要素でも発生	</td></tr>
<tr><th>	mouseout	</th>
<td>	マウスが要素から外れた時に発生。子要素でも発生	</td></tr>
<tr><th>	mouseenter	</th>
<td>	マウスが要素に入った時に発生。子孫要素に入った時には発生しない	</td></tr>
<tr><th>	mouseleave	</th>
<td>	マウスが要素から外れた時に発生。子孫要素から外れた時には発生しない	</td></tr>
<tr><th>	change	</th>
<td>	要素がフォーカスを得て値の修正が完了した時に発生	</td></tr>
<tr><th>	select	</th>
<td>	type属性値が”text”のinput要素、textarea要素のテキストが選択された時に発生	</td></tr>
<tr><th>	submit	</th>
<td>	フォームが送信された時に発生	</td></tr>
<tr><th>	keydown	</th>
<td>	キーが押し下げられた時に発生	</td></tr>
<tr><th>	keypress	</th>
<td>	キーが押された時に発生	</td></tr>
<tr><th>	keyup	</th>
<td>	キーが上がった時に発生	</td></tr>
<tr><th>	error	</th>
<td>	javascriptのエラーが発生した時に発生	</td></tr>
<tbody>
</table>

## keypress


```javascript:エンターを押した際に処理
$(document).keypress(function(event){
    var key = (event.key ? event.key : event.which);
    // もしも入力したkeyがエンター（13)だった場合
    if(keycode == '13'){
        alert('You pressed a "enter" key in somewhere');
    }

});
```

### キーコード一覧

|対応キー|キーコード|
|:--|---:|
| 1 | 49 |
| 2 | 50 |
| 3 | 51 |
| 4 | 52 |
| 5 | 53 |
| 6 | 54 |
| 7 | 55 |
| 8 | 56 |
| 9 | 57 |
| 0 | 48 |
| A | 65 |
| B | 66 |
| C | 67 |
| D | 68 |
| E | 69 |
| F | 70 |
| G | 71 |
| H | 72 |
| I | 73 |
| J | 74 |
| K | 75 |
| L | 76 |
| M | 77 |
| N | 78 |
| O | 79 |
| P | 80 |
| Q | 81 |
| R | 82 |
| S | 83 |
| T | 84 |
| U | 85 |
| V | 86 |
| W | 87 |
| X | 88 |
| Y | 89 |
| Z | 90 |
| - | 173 |
| ^ | 160 |
| \ | 220 |
| @ | 64 |
| [ | 219 |
| ] | 221 |
| ; | 59 |
| : | 58 |
| , | 188 |
| . | 190 |
| / | 191 |
| テンキー1 | 97 |
| テンキー2 | 98 |
| テンキー3 | 99 |
| テンキー4 | 100 |
| テンキー5 | 101 |
| テンキー6 | 102 |
| テンキー7 | 103 |
| テンキー8 | 104 |
| テンキー9 | 105 |
| テンキー0 | 96 |
| テンキー/ | 111 |
| テンキー* | 106 |
| テンキー- | 109 |
| テンキー+ | 107 |
| テンキー. | 110 |
| テンキーEnter | 13 |
| F1 | 112 |
| F2 | 113 |
| F3 | 114 |
| F4 | 115 |
| F5 | 116 |
| F6 | 117 |
| F7 | 118 |
| F8 | 119 |
| F9 | 120 |
| F10 | 121 |
| F11 | 122 |
| F12 | 123 |
| ↑ | 38 |
| ↓ | 40 |
| ← | 37 |
| → | 39 |
| Enter | 13 |
| Shift | 16 |
| Ctrl | 17 |
| Alt | 18 |
| Space | 32 |
| BackSpace | 8 |
| Esc | 27 |
| Tab | 9 |
| CapsLock | 20 |
| NumLock | 144 |
| Insert | 45 |
| Delete | 46 |
| Home | 36 |
| End | 35 |
| PageUp | 33 |
| PageDown | 34 |
| ScrollLock | 145 |
| Windows | 91 |
| 英数 | 240 |
| 半角/全角 | 243 |
| 漢字 | 244 |
| 無変換 | 29 |
| 変換 | 28 |
| カタカナ/ひらがな/ローマ字 | 242 |

# メソッド

## メソッド一覧
<table>
<tbody>
<tr>
<th>メソッド</th>
<th>意味</th>
<th>パラメータ追加時</th>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-css.html">.css()</a></th>
<td>CSSの値を取得or書き換え</td>
<td>指定のCSSスタイルに変更</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-html.html">.html()</a></th>
<td>要素の値をHTMLとして取得or書き換え</td>
<td>指定のhtmlに書き換える</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-text.html">.text()</a></th>
<td>要素の値をテキストとして取得or書き換え</td>
<td>指定のテキストに書き換える</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-prepend.html">.prepend()</a></th>
<td>要素内の先頭にHTMLを挿入</td>
<td>【必須】 挿入するhtmlの指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-append.html">.append()</a></th>
<td>要素内の末尾にHTMLを挿入</td>
<td>【必須】 挿入するhtmlの指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-prepend.html">.prependTo()</a></th>
<td>要素内の先頭にHTMLを挿入</td>
<td>【必須】 移動先の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-append.html">.appendTo()</a></th>
<td>要素内の末尾にHTMLを挿入</td>
<td>【必須】 移動先の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-before.html">.before()</a></th>
<td>指定した要素の前にHTMLを挿入</td>
<td>【必須】 挿入するhtmlの指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-after.html">.after()</a></th>
<td>指定した要素の後にHTMLを挿入</td>
<td>【必須】 挿入するhtmlの指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-insertbefore.html">.insertBefore()</a></th>
<td>指定した要素を、任意の要素の前に移動</td>
<td>【必須】 移動先の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-insertafter.html">.insertAfter()</a></th>
<td>指定した要素を、任意の要素の後に移動</td>
<td>【必須】 移動先の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-wrap.html">.wrap()</a></th>
<td>指定した要素を、任意の要素で包む</td>
<td>【必須】 包む要素の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-unwrap.html">.unwrap()</a></th>
<td>指定した要素を囲んでいるタグを削除する</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-wrapall.html">.wrapAll()</a></th>
<td>指定した要素が複数ある場合に、任意の要素で包む</td>
<td>【必須】 包む要素の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-wrapinner.html">.wrapInner()</a></th>
<td>指定した要素の子要素やテキストを、任意の要素で包む</td>
<td>【必須】 包む要素の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-replacewith.html">.replaceWith()</a></th>
<td>指定した要素そのものを、任意の要素に置き換える</td>
<td>【必須】置き換える要素を指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-replacewith.html">.replaceAll()</a></th>
<td>指定した要素そのものを、任意の要素に置き換える</td>
<td>【必須】置き換える対象をセレクタで指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-remove.html">.remove()</a></th>
<td>指定した要素を削除</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-attr.html">.attr()</a></th>
<td>属性値の取得or設定</td>
<td>指定の値に設定・変更</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-val.html">.vall()</a></th>
<td>指定した要素のvalueの値を取得or設定する</td>
<td>指定の値に設定・変更</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-prop.html">.prop()</a></th>
<td>指定した要素のプロパティを取得or設定する</td>
<td>指定の値に設定・変更</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-removeattr.html">.removeAttr()</a></th>
<td>指定した要素の任意の属性を削除</td>
<td>【必須】削除する属性を指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-addclass.html">.addClass()</a></th>
<td>クラスを追加</td>
<td>【必須】追加するクラスを指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-removeclass.html">.removeClass()</a></th>
<td>クラスの削除</td>
<td>【必須】削除するクラスを指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-toggleclass.html">.toggleClass()</a></th>
<td>クラスの追加・削除を切り替える</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-reverse.html">.reverse()</a></th>
<td>指定した配列の順序を逆順にする</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-makearray.html"><span>.makeArray()</span></a></th>
<td>jQueryオブジェクトを配列に変換する</td>
<td>【必須】変換するjQueryオブジェクトを指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-has.html">.has()</a></th>
<td>指定した要素が子要素を持っているかを判定する</td>
<td>【必須】判定する子要素を指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-length.html">length</a></th>
<td>指定した要素の数を取得する</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-parent.html">.parent()</a><br>
<a href="https://stand-4u.com/web/javascript/jquery-parent.html">.parents()</a></th>
<td>親要素を取得する</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-children-find.html">.find()</a></th>
<td>指定した要素の子要素をすべて取得する</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-children-find.html">.children()</a></th>
<td>指定した要素の直下の子要素を取得する</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-clone.html">.clone()</a></th>
<td>指定した要素のコピーを作成する</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-eq.html">.eq()</a></th>
<td>指定した要素において、その順番で指定して取得する</td>
<td>要素の順番を０から始まる数字で指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-get.html">.get()</a></th>
<td>指定した要素をDOMオブジェクトとして取得する</td>
<td>指定した順番の要素を取得</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-prev.html">.prev()</a></th>
<td>指定した要素の直前の兄弟要素を取得</td>
<td>さらに限定して要素の条件を指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-prev.html">.prevAll()</a></th>
<td>指定した要素の前にある兄弟要素を全て取得する</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-prevuntil-nextuntil.html">.prevUntil()</a></th>
<td>指定した要素の前にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得</td>
<td>どこまで取得するかの条件を指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-next.html">.next()</a></th>
<td>指定した要素の直後の兄弟要素を取得</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-next.html">.nextAll()</a></th>
<td>指定した要素の後にある兄弟要素を全て取得する</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-prevuntil-nextuntil.html">.nextUntil()</a></th>
<td>指定した要素の後にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得</td>
<td>どこまで取得するかの条件を指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-siblings.html">.siblings()</a></th>
<td>指定した要素の兄弟要素を全て取得</td>
<td>
<p>さらに限定して要素の条件を指定</p>
</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-parent.html">.closest()</a></th>
<td>指定した要素から最も近い指定の親要素を取得</td>
<td>【必須】要素の条件を指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-contents.html">.contents()</a></th>
<td>指定した要素の子要素・テキストノードを全て取得</td>
<td></td>
</tr>
<tr>
<th>.hide()</th>
<td>要素を非表示にする</td>
<td>ミリ秒でスピードを指定</td>
</tr>
<tr>
<th>.show()</th>
<td>非表示要素を表示する</td>
<td>ミリ秒でスピードを指定</td>
</tr>
<tr>
<th>.fadeTo()</th>
<td>透明度を変更する</td>
<td>【必須】ミリ秒でスピードを指定、変更する透明度を指定</td>
</tr>
<tr>
<th>.sildeUp()</th>
<td>スライドアップさせて非表示にする</td>
<td>ミリ秒でスピードを指定</td>
</tr>
<tr>
<th>.slideDown()</th>
<td>スライドダウンさせて表示させる</td>
<td>ミリ秒でスピードを指定</td>
</tr>
<tr>
<th>.slideToggle()</th>
<td>スライドアップ・ダウンを切り替えて表示・非表示させる</td>
<td>ミリ秒でスピードを指定</td>
</tr>
</tbody>
</table>

### 要素取得系

#### 上の階層（親要素）を取得
.parent()
.parents('指定')
.closest()

|メソッド|意味|
|----|----|
|.parent()|1階層上の親要素を取得する|
|.parents()|複数階層上の親要素を取得する。取得したい要素引数で指定する|
|.closest()|----|

#### 同じ階層（兄弟要素）を取得

|メソッド|意味|
|----|----|
|.siblings()|指定した要素の兄弟要素を全て取得|
|.prev()|指定した要素の直前の兄弟要素を取得|
|.prevAll()|指定した要素の前にある兄弟要素を全て取得する|
|.prevUntil()|指定した要素の前にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得|
|.next()|指定した要素の直後の兄弟要素を取得|
|.nextAll())|指定した要素の後にある兄弟要素を全て取得する|
|.nextUntil()|指定した要素の後にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得|

#### 下の階層（子要素）を取得

|メソッド|意味|
|-----|-----|
|.find()|指定した要素の子要素をすべて取得する|
|.children()|指定した要素の直下の子要素を取得する|
|.wrapInner()|指定した要素の子要素やテキストを、任意の要素で包む|


### 要素追加・削除系

<table>
<tbody>
<tr>
<th>メソッド</th>
<th>意味</th>
<th>パラメータ追加時</th>
</tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-prepend.html">.prepend()</a></th>
<td>要素内の先頭にHTMLを挿入</td>
<td>【必須】 挿入するhtmlの指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-append.html">.append()</a></th>
<td>要素内の末尾にHTMLを挿入</td>
<td>【必須】 挿入するhtmlの指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-prepend.html">.prependTo()</a></th>
<td>要素内の先頭にHTMLを挿入</td>
<td>【必須】 移動先の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-append.html">.appendTo()</a></th>
<td>要素内の末尾にHTMLを挿入</td>
<td>【必須】 移動先の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-before.html">.before()</a></th>
<td>指定した要素の前にHTMLを挿入</td>
<td>【必須】 挿入するhtmlの指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-after.html">.after()</a></th>
<td>指定した要素の後にHTMLを挿入</td>
<td>【必須】 挿入するhtmlの指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-insertbefore.html">.insertBefore()</a></th>
<td>指定した要素を、任意の要素の前に移動</td>
<td>【必須】 移動先の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-insertafter.html">.insertAfter()</a></th>
<td>指定した要素を、任意の要素の後に移動</td>
<td>【必須】 移動先の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-wrap.html">.wrap()</a></th>
<td>指定した要素を、任意の要素で包む</td>
<td>【必須】 包む要素の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-unwrap.html">.unwrap()</a></th>
<td>指定した要素を囲んでいるタグを削除する</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-wrapall.html">.wrapAll()</a></th>
<td>指定した要素が複数ある場合に、任意の要素で包む</td>
<td>【必須】 包む要素の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-wrapinner.html">.wrapInner()</a></th>
<td>指定した要素の子要素やテキストを、任意の要素で包む</td>
<td>【必須】 包む要素の指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-replacewith.html">.replaceWith()</a></th>
<td>指定した要素そのものを、任意の要素に置き換える</td>
<td>【必須】置き換える要素を指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-replacewith.html">.replaceAll()</a></th>
<td>指定した要素そのものを、任意の要素に置き換える</td>
<td>【必須】置き換える対象をセレクタで指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-remove.html">.remove()</a></th>
<td>指定した要素を削除</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-attr.html">.attr()</a></th>
<td>属性値の取得or設定</td>
<td>指定の値に設定・変更</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-val.html">.vall()</a></th>
<td>指定した要素のvalueの値を取得or設定する</td>
<td>指定の値に設定・変更</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-prop.html">.prop()</a></th>
<td>指定した要素のプロパティを取得or設定する</td>
<td>指定の値に設定・変更</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-removeattr.html">.removeAttr()</a></th>
<td>指定した要素の任意の属性を削除</td>
<td>【必須】削除する属性を指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-addclass.html">.addClass()</a></th>
<td>クラスを追加</td>
<td>【必須】追加するクラスを指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-removeclass.html">.removeClass()</a></th>
<td>クラスの削除</td>
<td>【必須】削除するクラスを指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-toggleclass.html">.toggleClass()</a></th>
<td>クラスの追加・削除を切り替える</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-reverse.html">.reverse()</a></th>
<td>指定した配列の順序を逆順にする</td>
<td></td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-makearray.html"><span>.makeArray()</span></a></th>
<td>jQueryオブジェクトを配列に変換する</td>
<td>【必須】変換するjQueryオブジェクトを指定</td>
</tr>
<tr>
<th><a href="https://stand-4u.com/web/javascript/jquery-clone.html">.clone()</a></th>
<td>指定した要素のコピーを作成する</td>
<td></td>
</tr>
</tbody>
</table>

###form系
[form系あれこれ](https://qiita.com/noqua/items/b81222c0352aecaf31ea)