前言

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


四大选择器

一.jQuery基础选择器

1.ID选择器

ID选择器可以选择指定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的元素

语法:$(".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>

在这里插入图片描述


筛选选择器

在这里插入图片描述

筛选方式

在这里插入图片描述
parents():筛选所有上级元素,有参数就是返回指定的上级元素

:checked选择器

:checked查找被选中的表单元素

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐