JQuery（六） -- 基本选择器、层级选择器、属性选择器

普雅^0^雷蒙达

已于 2023-05-14 12:49:35 修改

阅读量124

点赞数 1

分类专栏： # JQuery 文章标签： jquery 前端 javascript

于 2023-05-14 10:15:00 首次发布

本文链接：https://blog.csdn.net/PUYALEI/article/details/130665869

版权

JQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. 基本选择器

2. 层级选择器

3. 属性选择器

1. 基本选择器

示例代码：

<!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.元素选择器   $("元素的名称")
    var divs = $("div");
    //alert(divs.length);

    //2.id选择器    $("#id的属性值")
    var div1 = $("#div1");
    //alert(div1);

    //3.类选择器     $(".class的属性值")
    var cls = $(".cls");
    alert(cls.length);

</script>
</html>

2. 层级选择器

示例代码：

<!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的子级)
    var spans1 = $("div span");
    //alert(spans1.length);

    // 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)
    var spans2 = $("div > span");
    //alert(spans2.length);

    // 3. 兄弟选择器 $("A + B");    A相邻的下一个B
    var ps1 = $("div + p");
    //alert(ps1.length);

    // 4. 兄弟选择器 $("A ~ B");    A相邻的所有B
    var ps2 = $("div ~ p");
    alert(ps2.length);
    
</script>
</html>

3. 属性选择器

示例代码：

<!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>
    <input type="text">
    <input type="password">
    <input type="password">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.属性名选择器   $("元素[属性名]")
    var in1 = $("input[type]");
    //alert(in1.length);


    //2.属性值选择器   $("元素[属性名=属性值]")
    var in2 = $("input[type='password']");
    alert(in2.length);

</script>
</html>