前言

jQuery唯一个javascrip库,里面封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。但因为jQuery对象有自己的封装，dom对象不能使用，所以需要选择器将对象选取出来使用

四大选择器

一.jQuery基础选择器

1.ID选择器

语法：$("#id")

案例:

<body>
    <div id="test">123</div>
</body>
<script>
    console.log($("#test"));
</script>

在这里插入图片描述

2.全选选择器

语法:$("*")
案例：

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
    </ol>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            //全部字体变粉色
            $("*").css("color", "pink")
            console.log($('.nav'));
            console.log($('ul li'));
        });
    </script>

在这里插入图片描述

3.类选择器

语法:$(".class")
案例:

<body>
    <div id="test" class="test">123</div>
    <p class="test"></p>
    <span class="no"></span>
</body>
<script>
    console.log($(".test"));
</script>

在这里插入图片描述

4.标签选择器

语法:$(“div”)
案例：

<body>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($('ul li'));
        });
    </script>
</body>

在这里插入图片描述

5.并集选择器

语法:$(“div,p,li”)
案例:

<body>
    <div id="test" class="test">123</div>
    <p class="test"></p>
    <span class="no"></span>
</body>
<script>
    console.log($("p,span"));
 </script>

在这里插入图片描述

6.交集选择器

语法：$(“li.current”)
案例:

<body>
    <div id="test" class="test">123</div>
    <p class=""></p>
    <p class="test"></p>
    <span class="no"></span>
</body>
<script>
    console.log($("p.test"));
</script>

在这里插入图片描述

层级选择器

1.子代选择器

语法:$(“ul>li”)
案例:

<body>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($('ul>li'));
        });
    </script>

在这里插入图片描述

2.后代选择器

语法：$(“div li”)
案例:

<body>
    <div>
        <ul>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
        </ul>
    </div>
    <script>
        $(function() {
            console.log($('div li'));
        });
    </script>