[jQuery] 内容や属性を変更するメソッド

## text/html
要素の内容をまるごと書き換えるメソッド。

text は要素のテキストを、
html は要素のHTMLを丸ごと書き換える。

### 書き方
```js
jQueryObject.text('書き換え後のテキストを入力');
jQueryObject.html('<span>書き換え後のHTMLを入力</span>');
```

### サンプル
```js
$('.className').text('textメソッドでテキストを書き換えたよ');
$('.className').html('<span>書き換え後のHTMLを入力</span>');
```
htmlメソッドは要素のHTMLを書き換える事が可能な為、
慎重に扱わないと悪意のあるscriptを埋め込まれる、
脆弱性がある設計になってしまう可能性がある。
取扱いには慎重になるべき。

### ドキュメント
- [html() リファレンス](http://semooh.jp/jquery/api/attributes/html/_/)
- [html(val) リファレンス](http://semooh.jp/jquery/api/attributes/html/val/)
- [XSSの傾向と対策](https://app.codegrid.net/entry/security-xss)



## empty
要素の中身を空っぽにするメソッド。
内容を丸ごと消したい時に使う。

指定した要素の中に入っている要素を全て（テキストもHTMLも）消す。
同時にイベントハンドラや内部でキャッシュしているデータも削除する。

### 書き方
```js
jQueryObject.empty();
```

### サンプル
```js
$('.className').empty();
```

### ドキュメント
- [empty() リファレンス](http://semooh.jp/jquery/api/manipulation/empty/_/)



## attr
要素の属性値を変更するメソッド。

### 出来ることの一例
- 要素のclass属性を変更する
- input要素などのdisabled属性を変更して、コントロールの制御を行う
- a要素のhref属性を変更して、リンク先を変更する
- a要素のtarget属性を変更して、別ウィンドウで開くなどの制御を行う
- スタイルシートを読み込んでいるlink要素のhref属性を変更して、別のスタイルシートに切り替える



### 書き方
```js
jQueryObject.attr('属性名', '変更後の値');
```

### サンプル
```js
// 読み込んでいる画像を img1.png から img2.png に変更
$('.className').attr('src', 'img2.png');

// リンク先をGoogleに変更
$('.className').attr('href', 'https://www.google.co.jp');

// class名を classNameChange に変更
$('.className').attr('class', 'classNameChange');
```

### ドキュメント
- [attr(name) リファレンス](http://semooh.jp/jquery/api/attributes/attr/name/)
- [attr(properties) リファレンス](http://semooh.jp/jquery/api/attributes/attr/properties/)
- [attr(key,value) リファレンス](http://semooh.jp/jquery/api/attributes/attr/key%2Cvalue/)
- [attr(key,fn) リファレンス](http://semooh.jp/jquery/api/attributes/attr/key%2Cvalue/)



## val
input要素やtextarea に入力されたvalue属性の値を変更する事ができるメソッド。

### 出来ることの一例
- テキストエリアの初期テキストを任意の物に変更する
- セレクトメニュー（プルダウン）の初期選択を任意の物に変更する

### 書き方
```js
jQueryObject.val('変更後の値');
```

### サンプル
```js
// input要素のテキストを変更
$('#input1').val('書き換えたよ');

// select要素（プルダウンメニュー）で任意のvalue属性値（'tokyo'）を持つ項目を選択する
$('#select1').val('tokyo');

// select要素（リストメニュー）で任意のvalue属性値（'tokyo'）を持つ項目を複数選択する
$('#select2').val(['shinjukuku' , 'chiyodaku']);
```



## addClass / removeClass
要素のclass属性の値を操作するメソッド。

addClass 指定した値（class）を追加する。
removeClass 指定した値（class）を削除する。

※jQueryに依存しないで、ほぼ同様のことが行える「classList」という機能もある。

### 出来ることの一例
- 状態ごとに違う見栄えを表現したい場合などに、予めその為のclassにスタイルをあてたものを用意し、classの追加／削除を行う事で見栄えの変化を表現する。

### 書き方
```js
jQueryObject.addClass('クラス名');
jQueryObject.removeClass('クラス名');
```

### サンプル
```js
// 要素がアクティブになった時のための見栄えのclass 'is-active' に予めスタイルシートを作成しておき、classの追加／削除で状態変化を再現する
$('.className').addClass('is-active');
$('.className').removeClass('is-active');
```

### ドキュメント
- [addClass(class) リファレンス](http://semooh.jp/jquery/api/attributes/addClass/class/)
- [removeClass(class) リファレンス](http://semooh.jp/jquery/api/attributes/removeClass/class/)
- [toggleClass(class) リファレンス](http://semooh.jp/jquery/api/attributes/toggleClass/class/)
- [toggleClass(class, switch) リファレンス](http://semooh.jp/jquery/api/attributes/toggleClass/class%2C+switch/)
- [element.classList | MDN Web docs](https://developer.mozilla.org/ja/docs/Web/API/Element/classList)


### ドキュメント
- [val() リファレンス](http://semooh.jp/jquery/api/attributes/val/_/)
- [val(val) リファレンス](http://semooh.jp/jquery/api/attributes/val/val/)

## 参考ドキュメント
- [jQuery日本語リファレンス | Attributes](http://semooh.jp/jquery/api/attributes/)
- [jQuery日本語リファレンス | Manipulation](http://semooh.jp/jquery/api/manipulation/)
- [jQueryでDOM要素を削除する：remove(), empty(), unwrap(), detach()](http://uxmilk.jp/10889)
- [改訂版　WebデザイナーのためのjQuery入門](http://gihyo.jp/book/2014/978-4-7741-6944-6)