JQueryセレクターの詳細な説明

基本的なセレクター:

セレクター: CSS セレクターと同様に、要素を取得するのに役立ちます。
たとえば、ID セレクター、クラスセレクター、要素セレクター、属性セレクターなどです。
jQuery のセレクターの構文: $();

ここに画像の説明を挿入

コード実装:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>基本セレクター</title>
</head>
<本文>
    <div id="div1">div1</div>
    <div class="cls">div2</div>
    <div class="cls">div3</div>
</本文>
<script src="js/jquery-3.3.1.min.js"></script>
<スクリプト>
    //1. 要素セレクター $("要素名")
    divs = $("div"); とします。
    //アラート(divs.length);
    //2.idセレクター$("#idの属性値")
    div1 = $("#div1") とします。
    //アラート(div1);
    //3. クラスセレクター $(".class 属性値")
    cls = $(".cls"); とします。
    アラート(cls.長さ);
</スクリプト>
</html>

レベルセレクター:

ここに画像の説明を挿入

コード実装:

<本文>
<div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
    <span>s2</span>
</div>
<div></div>
<p>p1</p>
<p>p2</p>
</本文>
<script src="jquery-3.3.1.min.js"></script>
<スクリプト>
    // 1. 子孫セレクタ $("AB"); A の下にあるすべての B (B の子を含む)
    spans1 = $("div span"); とします。
    // アラート(spans1.length);
    // 2. 子セレクタ $("A > B"); A の下にあるすべての B (B の子は除く)
    spans2 = $("div > span"); とします。
    // アラート(spans2.length);
    // 3. 兄弟セレクタ $("A + B"); A に隣接する次の B
    ps1 = $("div + p");とします。
    // アラート(ps1.length);
    // 4. 兄弟セレクタ $("A ~ B"); A に隣接するすべての B
    ps2 = $("div ~ p");とします。
    アラート(ps2.長さ);
</スクリプト>

属性セレクター:

ここに画像の説明を挿入

コード実装:

<本文>
<入力タイプ="テキスト">
<input type="パスワード">
<input type="パスワード">
</本文>
<script src="jquery-3.3.1.min.js"></script>
<スクリプト>
    //1. 属性名セレクター $("要素 [属性名]")
    in1 = $("input[type]"); とします。
    //アラート(in1.長さ);
    //2. 属性値セレクター $("要素 [属性名 = 属性値]")
    in2 = $("input[type='password']");
    アラート(in2.長さ);
</スクリプト>

フィルターセレクター:

ここに画像の説明を挿入

コードの実装

<本文>
<div>div1</div>
<div id="div2">div2</div>
<div>div3</div>
<div>div4</div>
</本文>
<script src="jquery-3.3.1.min.js"></script>
<スクリプト>
    // 1. 最初の要素セレクター $("A:first");
    div1 = $("div:first"); とします。
    //アラート(div1.html());
    // 2. 末尾要素セレクター $("A:last");
    div4 = $("div:last"); とします。
    //アラート(div4.html());
    // 3. 非要素セレクター $("A:not(B)");
    divs1 = $("div:not(#div2)"); とします。
    //アラート(divs1.長さ);
    // 4. 偶数セレクター $("A:even");
    divs2 = $("div:even"); とします。
    //アラート(divs2.length);
    //アラート(divs2[0].innerHTML);
    //アラート(divs2[1].innerHTML);
    // 5. 奇数セレクター $("A:odd");
    divs3 = $("div:odd"); とします。
    //アラート(divs3.length);
    //アラート(divs3[0].innerHTML);
    //アラート(divs3[1].innerHTML);
    // 6. 等価インデックスセレクター $("A:eq(index)");
    div3 = $("div:eq(2)");とします。
    //アラート(div3.html());
    // 7. より大きいインデックスセレクター $("A:gt(index)");
    divs4 = $("div:gt(1)"); とします。
    //アラート(divs4.length);
    //アラート(divs4[0].innerHTML);
    //アラート(divs4[1].innerHTML);
    // 8. インデックスセレクター $("A:lt(index)");
    divs5 = $("div:lt(2)"); とします。
    アラート(divs5.長さ);
    アラート(divs5[0].innerHTML);
    アラート(divs5[1].innerHTML);
</スクリプト>

フォーム属性セレクター:

ここに画像の説明を挿入

コード実装:

<本文>
    <input type="text" 無効>
    <入力タイプ="テキスト">
    <input type="radio" name="gender" value="men" チェック済み>男性<input type="radio" name="gender" value="women">女性<input type="checkbox" name="hobby" value="study" チェック済み>勉強<input type="checkbox" name="hobby" value="sleep" チェック済み>睡眠<選択>
        <option>---選択してください---</option>
        <オプションを選択>学部</オプション>
        <option>卒業証書</option>
    </選択>
</本文>
<script src="js/jquery-3.3.1.min.js"></script>
<スクリプト>
    // 1. 利用可能な要素セレクター $("A:enabled");
    ins1 = $("input:enabled"); とします。
    //アラート(ins1.長さ);
    // 2. 利用できない要素セレクター $("A:disabled");
    ins2 = $("入力:無効");
    //アラート(ins2.長さ);
    // 3. ラジオボタン/チェックボックスが選択された要素 $("A:checked");
    ins3 = $("入力:チェック済み");
    //アラート(ins3.長さ);
    //アラート(ins3[0].値);
    //アラート(ins3[1].値);
    //アラート(ins3[2].値);
    // 4. ドロップダウン ボックスで選択された要素 $("A:selected");
    let select = $("select オプション:selected");
    アラート(select.html());
</スクリプト>