jQuery选择器

例子来自尚硅谷,做记录,备忘。

基本选择器,见注解

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="div1" class="box">div1(class="box")</div>
        <div id="div2" class="box">div2(class="box")</div>
        <div id="div3">div3</div>
        <span class="box">span(class="box")</span>
        <br>
        
        <ul>
            <li>AAAA</li>
            <li title="hello">BBBB(title="hello")</li>
            <li class="box">CCCCC(class="box")</li>
            <li title="hello">DDDD(title="hello")</li>
        </ul>
        <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
        <script type="text/javascript">
            //基本选择器的使用
            
            //选择id为div1的元素
            //调用css,如果css函数中的参数只是'color'的话,那么就是读;写的话应该有对象的形式,比如background:red。
            $("#div1").css('background','burlywood') 
            $("#div1").css({"background":"red"})    //如果有多个的话就应该用对象的形式传参
            
            //选择所有的div
            $('div').css('background','aquamarine')
            
            //选择所有class为box的元素
            $(".box").css('background','chartreuse')
            
            //选择所有的div和span元素
            $('div,span').css('background','darkorange')
            
            //选择所有class为box的div
            $('div.box').css('background','blueviolet')
        </script>
    </body>
</html>
View Code

层次选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--
        作者:969455986@qq.com
        时间:2019-05-10
        描述:层次选择器,查找子元素,后代元素,兄弟元素的选择器
        1.ancestor descendant
        在给定的祖先元素下配所有的子元素
        
        2.parent > child
        在给定的父元素下配所有的子元素
        
        3.prev+next
        匹配所有紧接在prev元素后面的next元素
        
        4.prev~siblings
        匹配prev元素后面的所有siblings元素
    -->
    <body>
        <ul>
            <li>AAAAA</li>
            <li class="box">CCCCC</li>
            <li title="hello"><span>BBBBB</span></li>
            <li title="hello"><span class="box">DDDDD</span></li>
            <span>EEEEE</span>
        </ul>
        
        <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
        <script type="text/javascript">
        //选择ul下的所有的span
    //    $('ul span').css({'background':'red'})
        
        //选择ul下的所有子元素span
        $('ul > span').css('background','aquamarine')
        
        //选中class为box的下一个li
        $('.box+li').css('background','chartreuse')
        
        //选中ul下的class为box的元素后面所有兄弟元素
        //这里需注意, 'ul .box~*'之间需要一个空格,否则就会识别为 class为box的ul元素;后面匹配所有的兄弟元素用的是通配符*
        $('ul .box~*').css('background','darkgreen')
        
        </script>
    </body>
</html>
View Code

过滤选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="div1" class="box">class为box的div1</div>
        <div id="div2" class="box">class为box的div2</div>
        <div id="div3">div3</div>
        <span class="box">class为box的span</span>
        <br />
        
        <ul>
            <li>AAAAA</li>
            <li title="hello">BBBBB</li>
            <li class="box"> CCCCC</li>
            <li title="hello">DDDDD</li>
            <li title="two">BBBBB</li>
            <li style="display: none;">我本来是隐藏的</li>
        </ul>
        
        <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
        <script type="text/javascript">
        //1 选择第一个div元素
        //$('div:first').css('background','aquamarine')
        
        //2 选择最后一个class为box的元素
        //    $('.box:last').css('background','aquamarine')
        
        //3 选择所有的class属性不为box的div
        //$('div:not(.box)').css('background','aquamarine')
        
        //4 选择第二个和第三个li
        //gt(index)选择下标大于index的;lt(index)选择下标小于index的
        //$('li:gt(0):lt(3)')
        //如果按照理解,下面的操作应该选择下标为1,2的li,但是,结果并不是
        //因为先选出所有的li,接着在选出的li中选出下标大于0的li,再在所有下标大于0的li开始重新计算,选择所有下标小于3的li
        //因此,lt中的index不应该是3而应该是2
        $('li:gt(0):lt(2)').css('background','aquamarine')
        
        //再或者如下
        $('li:lt(3):gt(0)').css('background','burlywood')
        
        //多个过滤选择器是依次执行的,本次的过滤的起始是上一次过滤的结果
        
        //5.选择内容为BBBBB的li
        $('li:contains("BBBBB")').css('background','royalblue')
        
        //6 选择隐藏的li
        console.log($('li:hidden').length,$('li:hidden')[0])
        
        //7.选择有title属性的li
        $('li[title]').css('background','red')
        
        //8 选择所有title属性为hello的li
        $('li[title=hello]').css('background','chartreuse')
        
        </script>
        
        
    </body>
</html>
View Code

 

posted @ 2019-05-10 11:24  一去二三浪里小白龙  阅读(254)  评论(0编辑  收藏  举报
//增加一段JS脚本,为目录生成使用