Detailed explanation of JQuery selector

Basic selectors:
Level selector:
Attribute selectors:
Filter selector:
Form attribute selectors:
Summarize

The selector is similar to the CSS selector and can help us get the element

Basic selectors:

Selector: Similar to the CSS selector, it can help us get elements.
For example: id selector, class selector, element selector, attribute selector, etc.
The syntax of selector in jQuery: $();

insert image description here

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Selector</title>
</head>
<body>
    <div id="div1">div1</div>
    <div class="cls">div2</div>
    <div class="cls">div3</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1. Element selector $("element name")
    let divs = $("div");
    //alert(divs.length);
    //2.id selector $("#id's attribute value")
    let div1 = $("#div1");
    //alert(div1);
    //3. Class selector $(".class attribute value")
    let cls = $(".cls");
    alert(cls.length);
</script>
</html>

Level selector:

insert image description here

Code implementation:

<body>
<div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
    <span>s2</span>
</div>
<div></div>
<p>p1</p>
<p>p2</p>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 1. Descendant selector $("AB"); all B under A (including B's children)
    let spans1 = $("div span");
    // alert(spans1.length);
    // 2. Child selector $("A > B"); all B under A (excluding B's children)
    let spans2 = $("div > span");
    // alert(spans2.length);
    // 3. Brother selector $("A + B"); the next B adjacent to A
    let ps1 = $("div + p");
    // alert(ps1.length);
    // 4. Brother selector $("A ~ B"); all B adjacent to A
    let ps2 = $("div ~ p");
    alert(ps2.length);
</script>

Attribute selectors:

insert image description here

Code implementation:

<body>
<input type="text">
<input type="password">
<input type="password">
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    //1. Attribute name selector $("element [attribute name]")
    let in1 = $("input[type]");
    //alert(in1.length);
    //2. Attribute value selector $("element [attribute name = attribute value]")
    let in2 = $("input[type='password']");
    alert(in2.length);
</script>

Filter selector:

insert image description here

Code Implementation

<body>
<div>div1</div>
<div id="div2">div2</div>
<div>div3</div>
<div>div4</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 1. First element selector $("A:first");
    let div1 = $("div:first");
    //alert(div1.html());
    // 2. Tail element selector $("A:last");
    let div4 = $("div:last");
    //alert(div4.html());
    // 3. Non-element selector $("A:not(B)");
    let divs1 = $("div:not(#div2)");
    //alert(divs1.length);
    // 4. Even selector $("A:even");
    let divs2 = $("div:even");
    //alert(divs2.length);
    //alert(divs2[0].innerHTML);
    //alert(divs2[1].innerHTML);
    // 5. Odd selector $("A:odd");
    let divs3 = $("div:odd");
    //alert(divs3.length);
    //alert(divs3[0].innerHTML);
    //alert(divs3[1].innerHTML);
    // 6. Equal index selector $("A:eq(index)");
    let div3 = $("div:eq(2)");
    //alert(div3.html());
    // 7. Greater than index selector $("A:gt(index)");
    let divs4 = $("div:gt(1)");
    //alert(divs4.length);
    //alert(divs4[0].innerHTML);
    //alert(divs4[1].innerHTML);
    // 8. Less than index selector $("A:lt(index)");
    let divs5 = $("div:lt(2)");
    alert(divs5.length);
    alert(divs5[0].innerHTML);
    alert(divs5[1].innerHTML);
</script>

Form attribute selectors:

insert image description here

Code implementation:

<body>
    <input type="text" disabled>
    <input type="text" >
    <input type="radio" name="gender" value="men" checked>Male<input type="radio" name="gender" value="women">Female<input type="checkbox" name="hobby" value="study" checked>Study<input type="checkbox" name="hobby" value="sleep" checked>Sleep<select>
        <option>---Please select---</option>
        <option selected>Undergraduate</option>
        <option>Diploma</option>
    </select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1. Available element selector $("A:enabled");
    let ins1 = $("input:enabled");
    //alert(ins1.length);
    // 2. Unavailable element selector $("A:disabled");
    let ins2 = $("input:disabled");
    //alert(ins2.length);
    // 3. Radio/checkbox selected element $("A:checked");
    let ins3 = $("input:checked");
    //alert(ins3.length);
    //alert(ins3[0].value);
    //alert(ins3[1].value);
    //alert(ins3[2].value);
    // 4. The element selected in the drop-down box $("A:selected");
    let select = $("select option:selected");
    alert(select.html());
</script>