JQuery選擇器詳解

Posted on by

選擇器類似於CSS的選擇器，可以幫助我們獲取元素

基本選擇器：

選擇器：類似於 CSS 的選擇器，可以幫助我們獲取元素。

例如：id 選擇器、類選擇器、元素選擇器、屬性選擇器等等。

jQuery 中選擇器的語法：$();

在這裡插入圖片描述

代碼實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本選擇器</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.元素選擇器   $("元素的名稱")
    let divs = $("div");
    //alert(divs.length);
    //2.id選擇器    $("#id的屬性值")
    let div1 = $("#div1");
    //alert(div1);
    //3.類選擇器     $(".class的屬性值")
    let cls = $(".cls");
    alert(cls.length);
</script>
</html>

層級選擇器：

在這裡插入圖片描述

代碼實現：

<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. 後代選擇器 $("A B");      A下的所有B(包括B的子級)
    let spans1 = $("div span");
    // alert(spans1.length);
    // 2. 子選擇器   $("A > B");    A下的所有B(不包括B的子級)
    let spans2 = $("div > span");
    // alert(spans2.length);
    // 3. 兄弟選擇器 $("A + B");    A相鄰的下一個B
    let ps1 = $("div + p");
    // alert(ps1.length);
    // 4. 兄弟選擇器 $("A ~ B");    A相鄰的所有B
    let ps2 = $("div ~ p");
    alert(ps2.length);
</script>

屬性選擇器：

在這裡插入圖片描述

代碼實現：

<body>
<input type="text">
<input type="password">
<input type="password">
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    //1.屬性名選擇器   $("元素[屬性名]")
    let in1 = $("input[type]");
    //alert(in1.length);
    //2.屬性值選擇器   $("元素[屬性名=屬性值]")
    let in2 = $("input[type='password']");
    alert(in2.length);
</script>

過濾器選擇器：

在這裡插入圖片描述

代碼實現

<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.首元素選擇器	$("A:first");
    let div1 = $("div:first");
    //alert(div1.html());
    // 2.尾元素選擇器	$("A:last");
    let div4 = $("div:last");
    //alert(div4.html());
    // 3.非元素選擇器	$("A:not(B)");
    let divs1 = $("div:not(#div2)");
    //alert(divs1.length);
    // 4.偶數選擇器	    $("A:even");
    let divs2 = $("div:even");
    //alert(divs2.length);
    //alert(divs2[0].innerHTML);
    //alert(divs2[1].innerHTML);
    // 5.奇數選擇器	    $("A:odd");
    let divs3 = $("div:odd");
    //alert(divs3.length);
    //alert(divs3[0].innerHTML);
    //alert(divs3[1].innerHTML);
    // 6.等於索引選擇器	 $("A:eq(index)");
    let div3 = $("div:eq(2)");
    //alert(div3.html());
    // 7.大於索引選擇器	 $("A:gt(index)");
    let divs4 = $("div:gt(1)");
    //alert(divs4.length);
    //alert(divs4[0].innerHTML);
    //alert(divs4[1].innerHTML);
    // 8.小於索引選擇器	 $("A:lt(index)");
    let divs5 = $("div:lt(2)");
    alert(divs5.length);
    alert(divs5[0].innerHTML);
    alert(divs5[1].innerHTML);
</script>

表單屬性選擇器：

在這裡插入圖片描述

代碼實現：

<body>
    <input type="text" disabled>
    <input type="text" >
    <input type="radio" name="gender" value="men" checked>男
    <input type="radio" name="gender" value="women">女
    <input type="checkbox" name="hobby" value="study" checked>學習
    <input type="checkbox" name="hobby" value="sleep" checked>睡覺
    <select>
        <option>---請選擇---</option>
        <option selected>本科</option>
        <option>專科</option>
    </select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.可用元素選擇器  $("A:enabled");
    let ins1 = $("input:enabled");
    //alert(ins1.length);
    // 2.不可用元素選擇器  $("A:disabled");
    let ins2 = $("input:disabled");
    //alert(ins2.length);
    // 3.單選/復選框被選中的元素  $("A:checked");
    let ins3 = $("input:checked");
    //alert(ins3.length);
    //alert(ins3[0].value);
    //alert(ins3[1].value);
    //alert(ins3[2].value);
    // 4.下拉框被選中的元素   $("A:selected");
    let select = $("select option:selected");
    alert(select.html());
</script>

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：