jQuery--选择器

张0x0

于 2021-12-06 09:44:03 发布

阅读量247

点赞数 1

分类专栏： web前端基础学习 JavaScript学习文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/zxn200125/article/details/121740427

版权

本文详细介绍了jQuery的各种选择器，包括基本选择器、层次选择器、过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单选择器及表单对象属性过滤选择器。通过实例展示了如何使用这些选择器来操作HTML元素。

摘要由CSDN通过智能技术生成

使用jQuery选择器可以对HTML元素组成或者单个元素进行操作。我们之前已经有了html、css、javascript的基础，故学习jQuery选择器就会轻松很多，与我们之前所学过的选择器类似。

基本选择器

我们可以发现，相对于JavaScript来说，jQuery的写法就简洁许多。

●$('*')：全选选择器，表示选择所有的元素

●$('#id属性名')：id选择器，选择特定id属性名的元素，相同id只能使用一次

●$('.class属性名')：类选择器，选择特定class属性名的元素

●$('Tag标签名')：标签名选择器，选择特定标签元素

测试代码：

    <div>content1</div>
    <div  id="idName">content2</div>
    <div class="className">content3</div>
    <div>content4</div>
    <script>
        $(function(){
            $('*').css('color','green');
            $('#idName').css({'backgroundColor':'pink','color':'red'});
            $('.className').css({'backgroundColor':'lightblue','color':'blue'});
            $('div').css('color','orange');
        })
    </script>

页面渲染效果：

层次选择器

在之前讲解css的时候我们就有讲过层次选择器，这里也是一样的。也同样分为后代元素、子元素、相邻元素、兄弟元素等。

●$('ancestor descendant')：后代元素选择器，选取ancestor所有后代元素

●$('parent > child')：子元素选择器，选取parent元素下的子元素

●$('pre + next')：相邻元素选择器，选择pre元素下一个next元素

●$('pre ~ sibling')：兄弟元素选择器，选择pre元素后的所有sibling元素

测试代码：

    <p id="ancestor">
        content1
        <p class="parent">
            content2
            <p id="child1">content3</p>
        </p>
        <p class="parent">
            content4
            <p id="child2">content5</p>
        </p>
    </p>
    <script>
        $(function(){
            $('body .parent').css('backgroundColor','blue');
            $('body>.parent').css('backgroundColor','red');
            $('.parent+p').css('backgroundColor','green');
            $('.parent~p').css('backgroundColor','pink');
        })
    </script>

页面渲染效果：