jqueryのタグまとめ

# 初めに
jQueryを使う上で最低限知ってないと読めない知識の寄せ集めです。
HTMLの代わりに、 jQueryオブジェクトが反映される
# html要素・jQueryの指定
###① （div）ディブオブジェクト

html要素）

```html
<div>
    <p>サンプルテキスト</p>
    <div>ディブ</div>
</div>
```

 ↓　jQueryオブジェクトに変換する

```javascript

//divオブジェクトに変換する
var $divParent = $("<div>"); 

//pオブジェクトに変換する
var $p = $("<p>").html("サンプルテキスト");

//divオブジェクトに変換する
var $divChild = $("<div>").html("ディブ");

//親オブジェクトに子オブジェクトを追加
$divParent.append($p).append($divChild);
```
結果
![スクリーンショット 2020-12-24 8.37.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/b4b23f87-1bc4-ff57-3250-33102e6f1be6.png)

###②（input）インプットオブジェクト

html要素）

```html
<div>
    <p>サンプルテキスト１</p>
    <span>サンプルテキスト２</span>
    <input type="text" />
</div>
```

 ↓　jQueryオブジェクトに変換する

```javascript

//divオブジェクトに変換する
var $div = $("<div>");  

//pオブジェクトに変換する
var $p = $("<p>").html("サンプルテキスト１");

//spanオブジェクトに変換する
var $span = $("<span>").html("サンプルテキスト２");

//inputオブジェクトに変換する
var $input= $("<input>");

//親オブジェクトに子オブジェクトを追加
$div.append($p).append($span).append($input);
```
結果
![スクリーンショット 2020-12-24 8.42.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/96cf5d2c-ab3d-32e5-8cf3-0fed683ea223.png)

###③（link）リンクオブジェクト

html要素）

```html
<div>
    <h1>タイトル</h1>
    <p>サンプルテキスト</p>
    <a href="#">リンク</a>
</div>
```

↓　jQueryオブジェクトに変換する

```javascript

//divオブジェクトに変換する
var $div = $("<div>");

//h1オブジェクトに変換する
var $h1 = $("<h1>").html("タイトル");

//pオブジェクトに変換する
var $p = $("<p>").html("サンプルテキスト");

//inputオブジェクトに変換する
var $a = $("<a href='#'>").html("リンク");

//親オブジェクトに子オブジェクトを追加
$div.append($h1).append($p).append($a);
```
結果
![スクリーンショット 2020-12-24 8.44.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/8408e4ed-9c7e-e5e3-c451-436b565a2d58.png)

###④（ table）テーブルオブジェクト

html要素）

```html
<div>
    <table>
        <tr>
            <td>
                 サンプルテキスト
            </td>
        <tr>
    </table>
</div>
```

↓　jQueryオブジェクトに変換する

```javascript

//divオブジェクトに変換する
var $div = $("<div>");

//tableオブジェクトに変換する
var $table = $("<table>");

//trオブジェクトに変換する
var $tr = $("<tr>");

//tdオブジェクトに変換する
var $td = $("<td>").html("サンプルテキスト");

//親オブジェクトに子オブジェクトを追加
$div.append($table.append($tr.append($td)));
```
結果
![スクリーンショット 2020-12-24 8.48.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/c56f7547-749d-0694-1cbb-924810be5d04.png)

###⑤ ulオブジェクト

html要素）

```html
<div>
    <ul>
        <li>サンプルテキスト１</li>
        <li>サンプルテキスト２</li>
    </ul>
</div>
```

↓　jQueryオブジェクトに変換する

```javascript

//divオブジェクトに変換する
var $div = $("<div>");

//ulオブジェクトに変換する
var $ul = $("<ul>");

//liオブジェクトに変換する
var $li1 = $("<li>").html("サンプルテキスト１");

//liオブジェクトに変換する
var $li2 = $("<li>").html("サンプルテキスト２");

//親オブジェクトに子オブジェクトを追加
$div.append($ul.append($li1).append($li2));
```
結果
![スクリーンショット 2020-12-24 8.50.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/dd1507ef-7c49-d3c0-ef55-449745fb4bec.png)

###⑥（combobox）選択ボックスオブジェクト

html要素）

```html
<div>
   <select class="select">
       <option>サンプルテキスト１</option>
       <option>サンプルテキスト２</option>
   </select>
</div>
```

↓　jQueryオブジェクトに変換する

```javascript

//divオブジェクトに変換する
var $div = $("<div>");  

//selectオブジェクトに変換する
var $select = $("<select>").addClass("select");

//optionオブジェクトに変換する
var $option1 = $("<option>").html("サンプルテキスト１");

//optionオブジェクトに変換する
var $option2 = $("<option>").html("サンプルテキスト２");

//親オブジェクトに子オブジェクトを追加
$div.append($select.append($option1).append($option2));
```
結果
![スクリーンショット 2020-12-24 8.52.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/e03aa83b-3a0c-1543-96a7-48853ee32f28.png)

以上