直接查找

基本选择器 ```javascript
id # id选择符
element # 元素选择符 .class # class选择符
selector1, selector2, selectorN # 同时获取多个元素的选择符

$(“#id”)
$(“.class”)
$(“element”)
$(“.class,p,div”)


- 组合选择器
```javascript
ancestor descendant  // 包含选择符 
parent > child       // 父子选择符 
prev + next          // 下一个兄弟选择符 
prev ~ siblings      // 兄弟选择符 
$(".outer div")  
$(".outer>div")  
$(".outer+div")  
$(".outer~div")

属性选择器

[attribute=value]    // 获取拥有指定数据attribute,并且置为value的元素 
$('[type="checked"]')  
$('[class*="xxx"]')

表单选择器

$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")
同样适用表单的以下属性
:enabled
:disabled
:checked
:selected

筛选器

:first               //  从已经获取的元素集合中提取第一个元素
:even                //  从已经获取的元素集合中提取下标为偶数的元素 
:odd                 //  从已经获取的元素集合中提取下标为奇数的元素
:eq(index)           //  从已经获取的元素集合中提取指定下标index对应的元素
:gt(index)           //  从已经获取的元素集合中提取下标大于index对应的元素
:last                //  从已经获取的元素集合中提取最后一个元素
:lt(index)           //  从已经获取的元素集合中提取下标小于index对应的元素
:first-child         //  从已经获取的所有元素中提取他们的第一个子元素
:last-child          //  从已经获取的所有元素中提取他们的最后一个子元素
:nth-child           //  从已经获取的所有元素中提取他们的指定下标的子元素
// 筛选器方法
$().first()          //  从已经获取的元素集合中提取第一个元素
$().last()           //  从已经获取的元素集合中提取最后一个元素
$().eq()             //  从已经获取的元素集合中提取指定下标index对应的元素

<!-- 案例一 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    远程导入-->
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <!--本地导入-->
    <script src="jquery3.6.js"></script>
</head>
<body>
<div class="c1" id="i1">DIV</div>
<p>P</p>
<div class="c1">
    <div class="c2">
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>
<div class="links">
    <a href="1.png">click1</a>
    <a href="2.jpg">click1</a>
    <a href="3.png">click1</a>
    <a href="4.jpg">click1</a>
    <a>click1</a>
</div>
<input type="text">
<input type="password">
<script>
    // 1、基本选择器
    // $(".c1").css("color","red");
    // $("#i1").css("color","red");
    // $("div").css("color","red");
    // 2、组合选择器
    // $(".c1,p").css("color","red");
    // $(".c1 .c2 ul li").css("color","red");
    // $(".c1 ul").css("color","red");
    // $(".c1 > ul").css("color","red");
    // 3、属性选择器
    // $(".links [href]").css("color","red");
    // $(".links [href$='png']").css("color","red");
    // $("[type='text']").css("border","1px solid red");
    // 4、表单选择器
    // $(":password").css("border","1px solid red");
</script>
</body>
</html>

<!-- 案例二 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    远程导入-->
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <!--本地导入-->
    <script src="jquery3.6.js"></script>
</head>
<body>
<ul class="c1">
    <li>111</li>
    <li class="c2">222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
</ul>
<script>
        // 5.筛选器
    // $(".c1 li").css("color","red");
    // $(".c1 li:first").css("color","red");
    // $(".c1 li:last").css("color","red");
    // $(".c1 li:eq(3)").css("color","red");
    // $(".c1 li:gt(1)").css("color","red");
    // $(".c1 li:lt(4)").css("color","red");
    // $(".c1 li:even").css("color","red");
    // $(".c1 li:odd").css("color","red");
    var index = 2;
    // $(".c1 li:eq(index)").css("color","red");
    $(".c1 li").eq(index).css("color", "red");
    $(".c1 li").first().css("color", "red");
    $(".c1 li").last().css("color", "red");
</script>
</body>
</html>

导航查找

// 查找子代标签：         
 $("div").children(".test")     
 $("div").find(".test")  
 // 向下查找兄弟标签 
$(".test").next()               
$(".test").nextAll()     
$(".test").nextUntil() 
// 向上查找兄弟标签  
$("div").prev()                  
$("div").prevAll()       
$("div").prevUntil() 
// 查找所有兄弟标签  
$("div").siblings()  
// 查找父标签：         
$(".test").parent()              
$(".test").parents()     
$(".test").parentUntil()

<!-- 案例 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    远程导入-->
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <!--本地导入-->
    <script src="jquery3.6.js"></script>
</head>
<body>
<div class="c1">
    <div class="c2">
        <div class="c3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>
<ul class="c4">
    <li>111</li>
    <li class="c5">222</li>
    <li>333</li>
    <li>444</li>
    <li id="i1">555</li>
    <li>666</li>
</ul>
<!--<div class="c5">666</div>-->
<!--<div>777</div>-->
<script>
    // 查询儿子选择器
    // console.log($(".c1").children());
    // console.log($(".c1").children("p"));
    // 查询后代
    // console.log($(".c1").find());
    // console.log($(".c1").find(".c3"));
    // 查询兄弟
    // $(".c5").next().css("color","red")
    // $(".c5").nextAll().css("color","red")
    // $(".c5").nextUntil("#i1").css("color","red");
    // $("#i1").prev().css("color","red");
    // $("#i1").prevAll().css("color","red");
    // $("#i1").prevUntil(".c5").css("color","red")
    // $(".c5").siblings().css("color","red");
    // 查找父标签
    console.log($(".c3").parent());
    console.log($(".c3").parent().parent());
    // console.log($(".c3").parents());//
    // console.log($(".c3").parentsUntil("body"))
</script>
</body>
</html>

Python 全栈开发与分析电子书(上)-V2022

02 jQuery选择器

直接查找

id # id选择符

导航查找