[TOC]

JQuery选择器

3.1、基本选择器

  • 选择器：类似于 CSS 的选择器，可以帮助我们获取元素。
  • 例如：id 选择器、类选择器、元素选择器、属性选择器等等。

  • jQuery 中选择器的语法：$();
    基本选择器.png
    代码实现
    ```html <!DOCTYPE html>

    div1
    div2
    div3

    
<a name="0d56a672"></a>
## 3.2、层级选择器

![层级选择器.png](https://cdn.nlark.com/yuque/0/2021/png/1455470/1629611585170-9ad35922-b7b9-4e6b-a740-d6b25f300563.png#clientId=uaab3a99c-2417-4&from=drop&id=u7d7578b6&margin=%5Bobject%20Object%5D&name=%E5%B1%82%E7%BA%A7%E9%80%89%E6%8B%A9%E5%99%A8.png&originHeight=225&originWidth=729&originalType=binary&ratio=1&size=36127&status=done&style=none&taskId=u99971ea1-a539-437c-a26f-e9aa6cf77f0)

-  **代码实现**  
```html
<!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>
        <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="js/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>
</html>

    3.3、属性选择器

    属性选择器.png

    • 代码实现
      ```html <!DOCTYPE html> 

      
<a name="ef78d9e7"></a>
## 3.4、过滤器选择器

![过滤器选择器.png](https://cdn.nlark.com/yuque/0/2021/png/1455470/1629611605685-3d33f56f-36ca-49f6-9375-80df3c4553d9.png#clientId=uaab3a99c-2417-4&from=drop&id=u760b0856&margin=%5Bobject%20Object%5D&name=%E8%BF%87%E6%BB%A4%E5%99%A8%E9%80%89%E6%8B%A9%E5%99%A8.png&originHeight=373&originWidth=731&originalType=binary&ratio=1&size=77598&status=done&style=none&taskId=u146830be-3db0-4501-b19e-20a4d27e0ae)

-  **代码实现**  
```html
<!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>div1</div>
    <div id="div2">div2</div>
    <div>div3</div>
    <div>div4</div>
</body>
<script src="js/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>
</html>

      3.5、表单属性选择器

      表单属性选择器.png

      • 代码实现
        ```html <!DOCTYPE html> 男 女 学习 睡觉 ```

        3.6、小结

        • 选择器：类似于 CSS 的选择器，可以帮助我们获取元素。
        • jQuery 中选择器的语法：$();
        • 基本选择器
          • $(“元素的名称”);
          • $(“#id的属性值”);
          • $(“.class的属性值”);
        • 层级选择器
          • $(“A B”);
          • $(“A > B”);
        • 属性选择器
          • $(“A[属性名]”);
          • $(“A[属性名=属性值]”);
        • 过滤器选择器
          • $(“A:even”);
          • $(“A:odd”);
        • 表单属性选择器
          • $(“A:disabled”);
          • $(“A:checked”);
          • $(“A:selected”);