一步一步学jQuery(二)

最新推荐文章于 2022-08-29 16:56:37 发布

黎明的蜗牛

最新推荐文章于 2022-08-29 16:56:37 发布

阅读量893

点赞数

分类专栏： Java 文章标签： jquery

本文链接：https://blog.csdn.net/XUJIAOlf/article/details/48770277

版权

Java 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

Jquery提供的选择器，用来获取页面中DOM对象。利用这篇博客，系统的来认识下Jquery的选择器.

Jquery获取DOM对象的语法和CSS语法类似。但是CSS获取对象，编辑DOM对象的样式，而Jquery是操作DOM对象的方法。

Jquery分为：简单选择器，进阶选择器，高级选择器

简单选择器
jquery分别可以通过id，class，标签元素获取对象。
这里写图片描述

值得说明的是：
1.页面中每个标签元素的ID值是唯一的，class值可以是多个。
2.jquery提供length属性，size()方法，获取对象的个数。

<body>
    <div>简单选择器1</div>
    <div class="pox">简单选择器2</div>
    <div id="box">简单选择器3</div>
</body>
<script>
    $(function(){
        var box1 = $("div");    //通过页面元素获取
        var box2 = $(".pox");    //通过id获取
        var box3 = $("#box");    //通过id获取

        Var count1 = box1.length;   //获取div元素标签的个数，3个
        Var count2 = box2.size();  //获取类名“pox”元素的个数，1个  
    })
</script>

进阶选择器
进阶选择器分为三种：群组选择器、后代选择器、通配符选择器
这里写图片描述

Jquery还提供了其它的选择器：
1.限定选择器：选择器用ID、class之前可以添加限定
2.多类选择器：一个元素标签上有多个类，选择器都使用

值得说明的是：
1.通配选择器如果用户获取所有的元素，是相当耗费资源的。所以通配符“*”用在局部路径下
2.遵从“追求必要的确定性”原则，因为选择器中的路径是从右向左解析的，路径越长，解析起来效率很低。

<body>
    <div id="userInfo">
        <ul><span id="category">个人信息</span></ul>
        <ul>
            <li> <a href="##">昵称</a></li>
            <li> <a href="##">积分</a></li>
            <li> <a href="##">排名</a></li>
        </ul>
    </div>
    <div id="article">
        <ul><span class="article category">文章分类</span></ul>
        <ul>
            <li> <a href="##">架构设计</a></li>
            <li> <a href="##">编程语言</a></li>
            <li> <a href="##">互联网</a></li>
        </ul>
    </div>
    <div id="comment">
        <ul><span class="comment category">评论排行</span></ul>
        <ul>
            <li> <a href="##">XXX</a></li>
            <li> <a href="##">XXX</a></li>
            <li> <a href="##">XXX</a></li>
        </ul>
    </div>
</body>
<script>
    //群组选择器，span、a标签的字为红色
    $('span, a').css('color','red');
    //后代选择器，a标签的字为蓝色
    $('div li a').css('color','blue'); 
    //通配选择器，将所有对象的颜色都编程橘色，不建议用在全局范围
    $('*').css('color', 'orange');  
    //建议将通配符"*"，用在局部范围
    $('ul li *').css('color','yellow'); 
    //限定选择器，将“个人信息”字体变成绿色
    $('span#category').css('color','green'); 
    //多累选择器，将“文档分类”字体编程紫色
    $('.article.category').css('color','purple'); 
</script>

高级选择器
IE7以后才支持高级选择器.

1.层次选择器

这里写图片描述

后代选择器，Jquery提供了等价的方法find();
子选择器，Jquery提供了等价的方法children();
next选择器，Jquery提供了等价的方法next();
nextAll选择器，Jquery提供了等价的方法nextALL();

此外，Jquery还提供了其它的方法：
prev()、prevAll()：向前获取同级对象
sibling()：前、后都获取对象
prevUntil()：向上非指定元素，遇到指定元素就停止
nextUntil()：向下非指定元素，遇到指定元素就停止

值得说明的是：
1.Jquery的方法，要比高级选择器，执行的速度快。

    <body>
        <div id="userInfo">
            <ul><span id="category">个人信息</span></ul>
            <ul>
                <li> <a href="##">昵称</a></li>
                <li> <a href="##">积分</a></li>
                <li> <a href="##">排名</a></li>
            </ul>
        </div>
        <div id="article">
            <ul><span class="article category">文章分类</span></ul>
            <ul>
                <li> <a href="##">架构设计</a></li>
                <li> <a href="##">编程语言</a></li>
                <li> <a href="##">互联网</a></li>
            </ul>
        </div>
        <div id="comment">
            <ul><span class="comment category">评论排行</span></ul>
            <ul>
                <li> <a href="##">XXX</a></li>
                <li> <a href="##">XXX</a></li>
                <li> <a href="##">XXX</a></li>
            </ul>
        </div>
    </body>
    <script>
        $(function(){
            $('div ul li a').css('color','red');  //后代选择器
            $('#userInfo').find('a').css('color','red');  //等价于后代选择器

            $("li> a").css("color",'blue');      //子选择器
            $('li').children('a').css('color','blue'); //等价于子选择器

            $('#userInfo + div').css('backgroundColor','red');              //next选择器
            $('#userInfo').next('div').css('backgroundColor','blue');    //等价于next选择器

            $('#userInfo ~ div').css('backgroundColor','red');                  //nextAll选择器
            $('#userInfo').nextAll('div').css('backgroundColor','blue');    //等价于next选择器

            $('#comment').prev('div').css('backgroundColor','red');         //向上选择器
            $('#comment').prevAll('div').css('backgroundColor','blue');   //向上选择器

            $('#article').siblings('div').css('backgroundColor','red');         //向上、向下选择器
        })
    </script>

2.属性选择器
这里写图片描述

    <body>
        <div>
            <ul>
                <li><a href="##" title="num">首页</a></li>
                <li><a href="##" title="num2">第一项</a></li>
                <li><a href="##" title="num-ccc">第二项</a></li>
                <li><a href="##" title="444num">第三项</a></li>
                <li><a href="##" title="num5">第四项</a></li>
                <li><a href="##" title="num6 fff">第五项</a></li>
                <li><a href="##" title="num6">第六项</a></li>
                <li><a href="##" title="gggnum7hhh">第七项</a></li>
                <li><a href="##" kkk="fff" title="num8">第八项</a></li>
            </ul>
        </div>
    </body>
    <script>
    $(document).ready(function(){
        $("a[title]").css("color","red");  //具有title属性的对象
        $("a[title=num1]").css("color","blue"); //title值为num1的对象
        $("a[title^=num]").css("color","yellow"); //title值以num开头的对象
        $("a[title|=num]").css("color","green");  //title值为num，或者num后边跟着“-”
        $("a[title$=num]").css("color","blue");  //title值，以num结尾
        $("a[title!=num5]").css("color","pink"); //title值，不等于num5的
        $("a[title~=num6]").css("color","blue");  //title值，等于num6，或者num6后边跟着一个空格
        $("a[title*=num7]").css("color","green");  //title值，包含num7这个串
        $("a[kkk][title=num8]").css("color","brown");  //具有kkk属性，且title值为num8
    })
    </script>