问答详情
源自:2-7 jQuery选择器之基本筛选选择器

大神您好,我是菜鸟。想问一下为何我直接复制你的代码就可以使用CSS样式?

大神您好,我是菜鸟。想问一下为何我直接复制你的代码就可以使用CSS样式?而且将引入的CSS样式代码删掉后还是能用CSS效果。求解答。

提问者:慕容0597372 2017-09-05 15:53

个回答

  • Zzmkiv
    2017-09-10 20:01:52
    已采纳

    这个是通过jq代码设置的css样式,那就不需要再通过引入css样式了,如果你不要效果,把jq那个引入删除就可以了,哈哈

  • 点赞狂魔
    2017-09-07 16:32:47

    $(".div:first").css("color", "red");

     $(".div:last").css("color", "#CD00CD");

     $(".div:even").css("border", "3px groove red");

     $(".div:odd").css("border", "3px groove blue");

     ?.css("border", "3px groove blue");

    ?.css("border", "3px groove blue");

     ?.css("color", "#CD00CD");

    ?.css("background-color", "#CD00CD");

    这些代码就是通过jquery设置html样式的语句了,删掉的话样式就没了。而且设置样式不一定非得有个css文件,样式也可以用<style>标签写在<head>里啊

  • 慕容0597372
    2017-09-05 17:14:18

    <!DOCTYPE html>

    <html>


    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title></title>

        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

    </head>


    <body>

        <h2>基本筛选器</h2>

        <h3>:first/:last/:even/:odd</h3>

        <div class="left">

            <div class="div">

                <p>div:first</p>

                <p>:even</p>

            </div>

            <div class="div">

                <p>:odd</p>

            </div>

            <div class="div">

                <p>:even</p>

            </div>

            <div class="div">

                <p>:odd</p>

            </div>

            <div class="div">

                <p>:even</p>

            </div>

            <div class="div">

                <p>div:last</p>

                <p>:odd</p>

            </div>

        </div>

        <script type="text/javascript">

        //找到第一个div

        $(".div:first").css("color", "red");

        </script>

        

        <script type="text/javascript">

        //找到最后一个div

        $(".div:last").css("color", "#CD00CD");

        </script>

        

        <script type="text/javascript">

        //:even 选择所引值为偶数的元素,从 0 开始计数

        $(".div:even").css("border", "3px groove red");

        </script>

        

        <script type="text/javascript">

        //:odd 选择所引值为奇数的元素,从 0 开始计数

        $(".div:odd").css("border", "3px groove blue");

        </script>

        

        

        <h3>:eq/:gt/:lt</h3>

        <div class="left">

            <div class="aaron">

                <p>:lt(3)</p>

            </div>

            <div class="aaron">

                <p>:lt(3)</p>

            </div>

            <div class="aaron">

                <p>:eq(2)</p>

            </div>

            <div class="aaron">

            </div>

            <div class="aaron">

                <p>:gt(3)</p>

            </div>

            <div class="aaron">

                <p>:gt(3)</p>

            </div>

        </div>

        <script type="text/javascript">

        //:eq

        //选择单个

        ?.css("border", "3px groove blue");

        </script>

        

        <script type="text/javascript">

        //:gt 选择匹配集合中所有索引值大于给定index参数的元素

        ?.css("border", "3px groove blue");

        </script>

        

         <script type="text/javascript">

        //:lt 选择匹配集合中所有索引值小于给定index参数的元素

        //与:gt相反

        ?.css("color", "#CD00CD");

        </script>

        

        <h3>:not</h3>

        <div class="left">

            <div>

                <input type="checkbox" name="a" />

                <p>Aaron</p>

            </div>

            <div>

                <input type="checkbox" name="b" />

                <p>慕课</p>

            </div>

            <div>

                <input type="checkbox" name="c" checked="checked" />

                <p>其他</p>

            </div>

        </div>

        <script type="text/javascript">

            //:not 选择所有元素去除不匹配给定的选择器的元素

            //选中所有紧接着没有checked属性的input元素后的p元素,赋予颜色

            ?.css("background-color", "#CD00CD");

        </script>

    </body>


    </html>


  • lnvv
    2017-09-05 16:48:39

    同时菜鸟 求附代码