jquery 学习(一) - 选择器

时间：2023-03-09 07:17:34
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'))

相关文章