jQuery的选择器和筛选器-优快云博客

本文链接：https://blog.youkuaiyun.com/jjjndk1314/article/details/79689076

本文详细介绍了jQuery中的各种选择器用法，包括基本选择器、层级选择器、筛选器及属性选择器等，并通过实例展示了如何使用这些选择器来操作DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery基本选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello</div>

<a href="">click</a>

<p id="p1" alex="sb">pppp</p>
<p id="p2" alex="sb">pppp</p>
<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>
    <p>alex</p>
</div>
<div class="outer2">Yuan</div>
<p>xialv</p>

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>4444</li>
    <li>4444</li>
    <li>4444</li>
</ul>

<input type="text">
<input type="checkbox">
<input type="submit">

<script src="jquery-3.1.1.js"></script>
<script>
    // 基本选择器
    $("div").css("color","red")
    $("*").css("color","red")
    $("#p1").css("color","red")

    $(".outer").css("color","red")

    $(".inner,p,div").css("color","red")


    // 层级选择器

    $(".outer p").css("color","red")
    $(".outer>p").css("color","red")
    $(".outer+p").css("color","red")
    $(".outer~p").css("color","red")

    // 基本筛选器

    $("li:first").css("color","red")
   $("li:eq(0)").css("color","red")
    $("li:gt(2)").css("color","red")
    $("li:lt(2)").css("color","red")

    // 属性选择器
    $("[alex='sb'][id='p1']").css("color","red")

    // 表单选择器，下面两行等价
     $("[type='text']").css("width","200px")
     $(":text").css("width","400px")

</script>
</body>
</html>

筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<a href="">click</a>

<p id="p1" alex="sb">pppp</p>
<p id="p2" alex="sb">pppp</p>

<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>
    <p>alex</p>
</div>
<div class="outer2">Yuan</div>
<p>xialv</p>

<ul>
    <li class="begin">1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>4444</li>
    <li id="end">4444</li>
    <li>4444</li>
</ul>

<input type="text">
<input type="checkbox">
<input type="submit">


<script src="jquery-3.1.1.js"></script>
<script>
    //筛选器
    $("li").eq(2).css("color","red");   索引筛选，起始为0
    $("li").first().css("color","red");   第一个
    $("li").last().css("color","red");   最后一个

    //查找筛选器

    $(".outer").children("p").css("color","red");  子代
    $(".outer").find("p").css("color","red");    后代

    $("li").eq(2).next().css("color","red");  下一个
    $("li").eq(2).nextAll().css("color","red");下面所有
    $("li").eq(2).nextUntil("#end").css("color","red");指定下面区间筛选

    $("li").eq(4).prev().css("color","red");  上一个
    $("li").eq(4).prevAll().css("color","red");上面所有
    $("li").eq(4).prevUntil("li:eq(0)").css("color","red");指定上面区间筛选

    console.log($(".outer .inner p").parent().html())
   $(".outer .inner p").parents().css("color","red");
   $(".outer .inner p").parentsUntil("body").css("color","red");

    $(".outer").siblings().css("color","red")

</script>
</body>
</html>