jQueryを用いたHTML, CSS要素の操作の基本

この記事は以下のUdemyの講座のSection58~65の内容をまとめたものです（お世話になってます、、

1. 要素内の文字の取得、書き換え

// 文字列はtextメソッドを用いる
$("h1").text(); //=> "Template"  // 取得
$("h1").text("aaa"); //=> <h1>aaa</h1>  // 変更

2. 要素内の HTML の取得、書き換え

// HTMLはhtmlメソッドを用いる（以下ではclass="form-group"が複数個あるページを扱う
$(".form-group").eq(0).html(); //=>  '\n<label>名前</label> \n<input type="text" id="name" name="name" value="Mike" class="form-control">\n'
// 指定の要素のページ内の数を求める
$(".form-group").size();
// 要素の置き換え
$(".form-group").eq(0).html("<h2>置き換える</h2>") //=> "<h2>置き換える</h2>"

注意点としては、置き換えられるのは、以下のように指定したhtml要素の内側の部分のみ

$(".form-group").eq(0).html("<h2>置き換える</h2>");
/*
<div class="form-group">
    <h2>書き換える</h2>
</div>
*/

3. 要素の属性の取得、書き換え

$("input").eq(0).attr("id"); //=> btn1
$("input").eq(0).attr("id", "btnX"); //=> btnX(btn1がbtnXに変わる

4. 要素の CSS の取得、書き換え

$("input").eq(0).css("backgroud"); //=> #fff
$("input").eq(0).css("backgroud", "#f00"); //=> #f00（#fffが#f00に変わる

5. Webページのタイトルを取得、書き換え

document.title; // 現状のタイトルの文字列を得る
document.title = "書き換え"; // タイトルを変更する

6. jQuery で要素を作り、末尾や先頭に追加

const element = $("<h1>New Title</h1>");
$("body").append(element); // bodyタグ内の末尾に追加
$("body").prepend(element); // bodyタグ内の先頭に追加
// "body"部分以外にも、指定できるセレクターであれば、先頭・末尾に追加可能

7. 要素の絞りこみ

$("div").filter(".form-group");
$("div.form-group") // 上記と同じ

8. 子要素を探す

$("div").eq(0).children(); // 1つ目のdivタグ内の、一階層目の子要素を検出する（それ以下は検出されない
$("div").eq(0).children("button"); // 1つ目のdivタグ内の、一階層目の子要素の内buttonタグのみを検出
$("div").eq(0).find("button"); // 1つ目のdivタグ内の、子要素の内全てのbuttonタグを検出
// $("div").eq(0).find(); この返り値は空

9. 親要素を探す

$("label").eq(0).parent(); // 引数を指定することも可能
$("label").eq(0).parents(); // 親要素全てを取得
$("label").eq(0).parents("body"); // 全ての親要素のうちbodyタグのみ指定