jquery 学习(一) - 选择器

基本选择器(html)

        <div>123</div>
        <div id="n1">123</div>
        <span>321</span>
        <div class="n2"><span>ABC</span>123</div>
        <div>123</div>    

jquery:

        // 基本语法:
        // $(select).action()
            
        //基本选择器:
                //所有匹配
                $('*').css('color','#C0FF3E');
                //id匹配
                $('#n1').css('color','#CD00CD');
                //标签匹配
                $('span').css('color','#68228B');
                //class匹配
                $('.n2').css('color','#338b0e');
                //组合匹配
                $('.n2 span').css('color','#54FF9F');        

 

 

层级选择器(html)

　　　　<!--层级选择器-->
        <p>XXXXX0</p>
        <div class="n10">
            <div><p>XXXXXX1</p></div>
            <p>XXXXXX2</p>
        </div>
        <p>XXXXX3</p>
        <div>aaaaaa</div>
        <p>XXXXX4</p>

jquery

         // 层级选择器
            　// 子类选择器
                $('.n10>p').css('color','#54FF9F');
           　　// 兄弟选择器
                $('.n10+p').css('color','#54FF9F');
          　　// 多个兄弟选择器
                $('.n10~p').css('color','#54FF9F');

 

 

筛选器(html)

<!--筛选器-->
        <ul>
            <li>111111</li>
            <li>222222</li>
            <li>333333</li>
            <li>444444</li>
            <li>555555</li>
            <li>666666</li>
            <li>777777</li>
            <li>888888</li>
        </ul>

jquery

        // 筛选器
                $('li:first').css('color','#54FF9F');
                $('li:last').css('color','#54FF9F');
                $('li:eq(2)').css('color','#54FF9F');
                $('li:gt(2)').css('color','#54FF9F');
                $('li:lt(6)').css('color','#54FF9F');

                $('li').eq(2).css('color','#54FF9F');
                $('li').first().css('color','#54FF9F');
                $('li').last().css('color','#54FF9F');

                // 单数行
                $('li:even').css('color','#54FF9F');
                // 双数行
                $('li:odd').css('color','#54FF9F');    

 

 

 

属性/表单(HTML)

    <!--属性选择器-->
            <p n1="n1">this n1 !!! </p>
            <p n2="n2">this n2 !!!</p>
            <p id="idx" n2="n2">this n3 !!!</p>

        <!--表单选择器-->
        <form>
            <input type="text">
            <input type="password">
            <input type="submit">
        </form>    

jquery

            //属性选择器
                $('[n1]').css('color','#54FF9F');
                $('[n2="n2"]').css('color','#ff2727');
                $("[n2='n2'][id='idx']").css('color','#fb00ff');

            // 表单选择器
            $("[type='text']").css('width',"300px")
            $(":text").css('width',"400px")    

 

 

查询筛选器

    <!--查询筛选器    -->
        <div id="AA">AA</div>
        <div class="BB">BB
            <div class="BB1">BB1
                <p>BB-BB1-BBB1</p>
                <p>BB-BB1-BBB2</p>
                <p>BB-BB1-BBB3</p>
            </div>
            <div class="BB2">BB2
                <p>BB-BB2-BBB1</p>
                <p>BB-BB2-BBB2</p>
                <p>BB-BB2-BBB3</p>
            </div>
            <div class="BB3">BB3
                <p class="BB3-p1">BB-BB3-BBB1</p>
                <p class="end">BB-BB3-BBB2</p>
                <p>BB-BB3-BBB3</p>
                <p>BB-BB3-BBB3</p>
                <p>BB-BB3-BBB3</p>
                <p>BB-BB3-BBB3</p>
                <p class="end">BB-BB3-BBB3</p>
                <p>BB-BB3-BBB3</p>
            </div>
        </div>
        <div id="CC">CC</div>

jquery

            // 查询筛选器
            $('.BB').children('.BB1').css('color','#ff2727');
            $('.BB').find('div').css('color','#ff2727');

            $('.BB').next().css('color','#ff2727');
            $('.BB1').nextAll().css('color','#ff2727');
            $('.BB1').nextAll().css('color','#ff2727');
            $('.BB3').children('p').eq(4).nextUntil().css('color','#ff2727');

             $('.BB3').children('p').eq(4).prev().css('color','#ff2727');
             $('.BB3').children('p').eq(4).prevAll().css('color','#ff2727');
             $('.BB3').children('p').eq(6).prevUntil('.end').css('color','#ff2727');

            $('.BB3-p1').parent().css('color','#ff2727');
            $('.BB3-p1').parents().css('color','#ff2727');
            $('.BB3-p1').parentsUntil('body').css('color','#ff2727');

            $('.BB2').siblings().css('color','#ff2727');

            // 判断一个标签内是否有classname
            console.log($('.BB3').children('p').hasClass('BB3-p1'))