一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

jquery层次选择器

子代选择器

用法：$("ul>li");

描述：使用>号，获取亲儿子层级的元素；注意,并不会获取孙子层级的元素

后代选择器

用法：$("ul li");

描述：使用空格，代表后代选择器，获取ul以下的所有元素，包括孙子等

jquery隐式迭代：

遍历内部DOM元素（伪数组形式存储）的过程

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

jquery设置样式

$("div").css("属性值","值")

代码展示：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery-3.6.0.js"></script>
    <title>隐式迭代</title>
</head>
<body>
    <div>我爱学习</div>
    <div>我爱学习</div>
    <div>我爱学习</div>
    <div>我爱学习</div>
    <ul>
        <li>学习使我快乐</li>
        <li>学习使我快乐</li>
        <li>学习使我快乐</li>
    </ul>
    <script>
        //1.获取4个div元素
        console.log($("div"));
        //2.给4个div设置背景颜色为粉色.jquery
        $("div").css("background","pink");
       //3设置ul里面的li颜色为蓝色
        $("ul li").css("color","blue")
    </script>
</body>
</html>

jquery筛选选择器

代码展示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.6.0.js"></script>
</head>
<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function(){
            $("ul li:first").css("color","pink");
            $("ul li:last").css("color","red");
            $("ul li:eq(2)").css("color","blue");
            $("ol li:odd").css("color","green");
        })
    </script>
</body>
</html>

jquery层次+筛选选择器