jQueryの基本まとめ - HTMLを操作しよう -


ゆるっとまとめ


### テキストの変更取得
|操作|使用例|備考|
|:-----------|:------------|:-------------|
|テキストの変更|$('A').text('hoge');|Aのテキストを`hoge`に変更|
|テキストの取得|$('A').text();|Aのテキストを取得|

### HTMLの変更取得
|操作|使用例|備考|
|:-----------|:------------|:-------------|
|HTMLの変更|$('A').html('HTMLを記述');|AのHTMLを`記述したHTML`に変更|
|HTMLの取得|$('A').html();|AのHTMLを取得|

### HTMLの挿入
|操作|使用例|備考|
|:-----------|:------------|:-------------|
|要素内の先頭にHTMLを挿入|$('A').prepend('HTMLを記述');|A要素内の先頭に`記述したHTML`を挿入
|要素内の最後にHTMLを挿入|$('A').append('HTMLを記述');|A要素内の最後に`記述したHTML`を挿入
|要素の前にHTMLを挿入(同階層)|$('A').before('HTMLを記述');|Aの前に`記述したHTML`を挿入
|要素の後にHTMLを挿入(同階層)|$('A').after('HTMLを記述');|Aの後に`記述したHTML`を挿入


### HTMLの移動
|操作|使用例|備考|
|:-----------|:------------|:-------------|
|要素内の先頭にHTMLを移動|$('A').prependTo('B');|A要素内の先頭に指定した要素Bを移動
|要素内の最後にHTMLを移動|$('A').appendTo('B');|A要素内の最後に指定した要素Bを移動
|要素の前にHTMLを移動(同階層)|$('A').insertBefore('B');|Aの前に指定した要素Bを移動
|要素の後にHTMLを移動(同階層)|$('A').insertAfter('B');|Aの後に指定した要素Bを移動

### 要素の置き換え
|操作|使用例|備考|
|:-----------|:------------|:-------------|
|指定した要素を他の要素に置き換える|$('A').replaceWith('B');|A要素をB要素に置き換え

### 要素の削除
|操作|使用例|備考|
|:-----------|:------------|:-------------|
|指定した要素を削除|$('A').remove();|A要素を削除

### 他の要素で包む
|操作|使用例|備考|
|:-----------|:------------|:-------------|
|要素を指定した要素で個別に包む|$('A').wrap('B');|A要素をBで個別に包む
|要素を指定した要素でまるっと包む|$('A').wrapAll('B');|A要素をBでまるっと包む
|要素の中身を別の要素で包む|$('A').wrapInner('B');|A要素の中身がBで包まれる

### 属性値の操作
|操作|使用例|備考|
|:-----------|:------------|:-------------|
|要素の属性値を取得|$('A').attr('B');|A要素の属性値Bを取得
|要素の属性値を変更|$('A').attr('B', 'C');|A要素の属性値BをCに変更
|要素の属性値を削除|$('A').removeAttr('B');|A要素の属性値Bを削除

### class属性の操作
|操作|使用例|備考|
|:-----------|:------------|:-------------|
|class属性の追加|$('A').addClass('B');|A要素にBというclassを追加
|class属性の削除|$('A').removeClass('B');|A要素からBというclassを削除

### CSSの操作
|操作|使用例|備考|
|:-----------|:------------|:-------------|
|CSSの設定|$('A').css('color', 'red');|A要素の色を赤に設定
|CSSの取得|$('A').css('color');|A要素の色を取得

<br>

# テキストの変更取得
## text

### テキストの変更 
```js
$(function(){
  $('#target').text('fuga');
});
```

### テキストの取得

```js
$(function(){
  var hoge = $('#target').text();
  console.log(hoge);
});
```
<br>

# HTMLの変更取得
## html
### HTMLの変更

```js
$(function(){
  $('#target').html('aaaa<span>hogehoge</span>');
});
```

### HTMLの取得

```js
$(function(){
  var hoge = $('#target').html();
  console.log(hoge);
});
```
<br>
# HTMLの挿入
## prepend
### 指定した要素内の先頭にHTMLを挿入

```js
$(function(){
  $('#target').prepend('<span>要素内の先頭に挿入</span>');
});
```

```html
<p id="target"><span>要素内の先頭に挿入</span>ターゲットだゆん</p>
```
## append
### 指定した要素内の最後にHTMLを挿入
```js
$(function(){
  $('#target').append('<span>要素内の最後に挿入</span>');
});
```
```html
<p id="target">ターゲットだゆん<span>要素内の最後に挿入</span></p>
```

## before
### 指定した要素の前にHTMLを挿入 (同階層)
```js
$(function(){
  $('#target').before('<p>前に挿入</p>');
});
```
```html
<p>前に挿入</p>
<p id="target">ターゲットだゆん</p>
```

## after
### 指定した要素の後にHTMLを挿入 (同階層)
```js
$(function(){
  $('#target').after('<p>後ろに挿入</p>');
});
```
```html
<p id="target">ターゲットだゆん</p>
<p>後ろに挿入</p>
```
<br>
# HTMLの移動
## prependTo
### 指定した要素を他の要素内の先頭に移動
```js
$(function(){
  $('#target').prependTo('#hoge');
});
```
```html
[ before ]
<p id="hoge">テキストテキスト</p>
<span id="target">要素内の先頭に移動される要素</span>


[ after ]
<p id="hoge"><span id="target">先頭に移動される要素</hoge>テキストテキスト</p>
```

## appendTo
### 指定した要素を他の要素内の最後に移動
```js
$(function(){
  $('#target').appendTo('#hoge');
});
```
```html
[ before ]
<p id="hoge">テキストテキスト</p>
<span id="target">要素内の最後に移動される要素</span>


[ after ]
<p id="hoge">テキストテキスト<span id="target">要素内の最後に移動される要素</hoge></p>
```

## insertBefore
### 指定した要素を他の要素の前に移動 (同階層)
```js
$(function(){
  $('#target').insertBefore('#hoge');
});
```
```html
[ before ]
<p id="hoge">テキストテキスト</p>
<span id="target">前に移動される要素</span>


[ after ]
<span id="target">前に移動される要素</span>
<p id="hoge">テキストテキスト</p>

```
## insertAfter
### 指定した要素を他の要素の後に移動 (同階層) 
```js
$(function(){
  $('#target').insertAfter('#hoge');
});
```
```html
[ before ]
<span id="target">後に移動される要素</span>
<p id="hoge">テキストテキスト</p>


[ after ]
<p id="hoge">テキストテキスト</p>
<span id="target">後に移動される要素</span>
```
<br>

## replaceWith
### 指定した要素を他の要素に置き換える
```js
$(function(){
  $('#target').replaceWith('<h1></h1>');
});
```
```html
[ before ]
<span id="target">テキスト</span>

[ after ]
<h1>テキストテキスト</h1>
```
<br>
# 要素の削除
## remove
### 指定した要素を削除する
```js
$(function(){
  $('h1 #target').remove();
});
```
```html
[ before ]
<h1>
	テキストテキスト
	<span id="target">削除される要素</span>
</h1>

[ after ]
<h1>テキストテキスト</h1>
```

<br>
# 他の要素で包む
## wrap
### 要素を指定した要素で包む
複数の要素が存在する場合は、各要素が個別にそれぞれ包まれる
※ 既にDOMに存在する要素で包むことも出来る

```js
$(function(){
  $('.hoge').wrap('<div class="wrap"></div>');
});
```

```html
[ before ]
<p class="hoge">テキストテキスト</p>
<p class="hoge">テキストテキスト</p>

[ after ]
<div class="wrap">
	<p class="hoge">テキストテキスト</p>
</div>
<div class="wrap">
	<p class="hoge">テキストテキスト</p>
</div>
```


## wrapAll
### 複数存在する要素を指定した要素でまるっと包む
※ 既にDOMに存在する要素で包むことも出来る

```js
$(function(){
  $('.hoge').wrapAll('<div class="wrap"></div>'); 
});
```
```html
[ before ]
<p class="hoge">テキストテキスト</p>
<p class="fuga">間にある別の要素やテキストは除外され、下に移動する</div>
<p class="hoge">テキストテキスト</p>

[ after ]
<div class="wrap">
	<p class="hoge">テキストテキスト</p>
	<p class="hoge">テキストテキスト</p>
</div>
<p class="fuga">間にある別の要素やテキストは除外され、下に移動する</div>
```

## wrapInner
### 指定した要素の中身(子要素)を別の要素で包む
※ 既にDOMに存在する要素で包むことも出来る

```js
$(function(){
  $('.hoge').wrapInner('<strong></strong>'); 
});
```
```html
[ before ]
<p class="hoge">テキストテキスト</p>
<p class="hoge">テキストテキスト</p>

[ after ]
<p class="hoge"><strong>テキストテキスト</strong></p>
<p class="hoge"><strong>テキストテキスト</strong></p>
```

<br>

# 属性値の操作
## attr
### 要素の属性値を取得する

> attr('属性名');

```js
$(function(){
  $(a.targetLink).attr('href'); // リンク先を取得
});
```

### 要素の属性値を変更する
> attr('属性名', '属性値');

```js
$(function(){
  $(a.targetLink).attr('href', 'https://www.google.co.jp/'); // リンク先をGoogleに変更
});
```

## removeAttr
### 要素の属性値を削除する
> removeAttr('属性名');

```js
$(function(){
  $(a.targetLink).removeAttr('href'); // リンクを削除
});
```
<br>
# class属性の操作
## addClass
### class属性の追加
複数のクラスを追加したい場合は、スペース区切り

```js
$(function(){
  $('.target').addClass('fuga hoge'); // target要素に新たにfuga,hogeのクラスを追加
});
```

## removeClass
### class属性の削除
複数のクラスを削除したい場合は、スペース区切り

```js
$(function(){
  $('.target').removeClass('fuga hoge'); // target要素からfuga,hogeのクラスを削除
});
```

<br>
# CSSの操作
### CSSの設定
> css('プロパティ名', '値');

```js
$(function(){
  $('.target').css('color', 'red'); // target要素の色を赤に設定
});
```
<br>
### ※ 複数のCSSを同時に設定したい場合
ここではプロパティ名にシングルクォーテーション(ダブルクォーテーション)はつかない
> css({
>  プロパティ名, '値',
>  プロパティ名, '値',
>  プロパティ名, '値'
> });

```js
$(function(){
  $('.target').css({
  	color: 'white',
  	fontWeight: 'bold',
  	backgroundColor: 'black'  	
  });
});
```
<br>
### CSSの取得
> css('プロパティ名');

```js
$(function(){
  $('.target').css('color'); // target要素の色を取得
});
```