jQuery学习:选择器

Merbng · 简书 · · 2019-04-29 18:44

$

$其实就是一个函数，用 $的时候，记得跟小括号$ ();

参数不同，功能就不同

三种用法：

参数是一个function，入口函数

        $(function(){

        });
        console.log(typeof $);

$(domoj) 把dom对象转换成jQuery对象

        $(document).ready(function(){

        });

参数是一个字符串，用来找对象

$("div") 
$("div ul") 
$(".current")

console.log(typeof $); //function

基本选择器

jQuery设置样式 .css(name,value); name:样式名,value:样式值

id选择器 $("#id");
类选择器: $(".id");
标签选择器: $("div");

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li id="four">4</li>
            <li>5</li>
            <li class="green yellow">6</li>
            <li class="green">7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>

        <div class="green">111</div>
        <div class="green">111</div>
        <div class="green">111</div>
        <div class="green">111</div>

        $("#four").css("backgroundColor", "red");
        $(".green").css("backgroundColor", "green");
        $("li").css("color","yellow");
        // 并集
        $("#four,.green").css("backgroundColor","blue");
        // 交集
        $("li.green").css("backgroundColor", "blue");
        $(".green.yellow").css("backgroundColor", "blue");

子类选择器和后代选择器

并集选择器
$("s1,s2")
后代选择器
$("s1 s2")
子代选择器
$("s1>s2")
交集选择器
$("s1s2")
子类选择器
$("#father>p").css("backgroundColor","red");
后代选择器
$("#father p").css("backgroundColor","red");

过滤选择器

        <script type="text/javascript">
            $(function() {
                //下标为偶数的过滤
                $("li:even").css("backgroundColor", "red");
                //下标为奇数的过滤
                $("li:odd").css("backgroundColor", "blue");
                // 第一个
                $("li:first").css("backgroundColor","pink");
                //下标为1
                $("li:eq(1)").css("backgroundColor","black");
                
                $("li:lt(1)").css("fontSize","32px");
            });
        </script>

index() 方法

        <ul>
            <li><a href="#">我是链接</a></li>
            <li><a href="#">我是链接</a></li>
            <li><a href="#">我是链接</a></li>
            <li><a href="#">我是链接</a></li>
            <li><a href="#">我是链接</a></li>
            <li><a href="#">我是链接</a></li>
            <li><a href="#">我是链接</a></li>
            <li><a href="#">我是链接</a></li>
        </ul>
        <script src="jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function() {
                // index()会返回当前元素在所有兄弟元素里面的索引
                $("li").click(function() {
                    console.log($(this).index());
                })
            });
        </script>

案例：隔行变色

<body>
        <ul>
            <li>我是第1个li</li>
            <li>我是第2个li</li>
            <li>我是第3个li</li>
            <li>我是第4个li</li>
            <li>我是第5个li</li>
            <li>我是第6个li</li>
            <li>我是第7个li</li>
            <li>我是第8个li</li>
            <li>我是第9个li</li>
            <li>我是第10个li</li>
        </ul>
        <script type="text/javascript">
            $(function() {
                var lis = $("li");
                for (i = 0; i < lis.length; i++) {
                    if (i % 2 == 0) {
                        lis[i].style.backgroundColor = "pink";
                    } else {
                        lis[i].style.backgroundColor = "hotpink";
                    }
                }
            });
        </script>
    </body>

案例：淘宝精品

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-size: 12px;
            }

            ul {
                list-style: none;
            }

            a {
                text-decoration: none;
            }

            .wrapper {
                width: 298px;
                height: 248px;
                margin: 100px auto 0;
                border: 1px solid pink;
                overflow: hidden;
            }

            #left,
            #center,
            #right {
                float: left;
            }

            #left li,
            #right li {
                background: url(imgs/lili.jpg) repeat-x;
            }

            #left li a,
            #right li a {
                display: block;
                width: 48px;
                height: 27px;
                border-bottom: 1px solid pink;
                line-height: 27px;
                text-align: center;
                color: black;
            }

            #left li a:hover,
            #right li a:hover {
                background-image: url(imgs/abg.gif);
            }

            #center {
                border-left: 1px solid pink;
                border-right: 1px solid pink;
            }
        </style>

    </head>
    <body>
        <script src="jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function() {
                /*  写法1:            $("#left>li").mouseenter(function() {
                                    // 让center中对应下标的li显示,其他li隐藏
                                    var idx = $(this).index();
                                    $("#center>li:eq(" + idx + ")").show().siblings().hide();
                                });
                                $("#right>li").mouseenter(function(){
                                    var idx =$(this).index()+9;
                                    $("#center>li").eq(idx).show().siblings().hide();
                                }); */
                $("#left>li").mouseenter(function() {
                    $("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();
                });
                $("#right>li").mouseenter(function() {
                    $("#center>li").eq($(this).index() + 9).show().siblings().hide();
                });

            });
        </script>
        <div class="wrapper">

            <ul id="left">
                <li><a href="#">女靴</a></li>
                <li><a href="#">雪地靴</a></li>
                <li><a href="#">冬裙</a></li>
                <li><a href="#">呢大衣</a></li>
                <li><a href="#">毛衣</a></li>
                <li><a href="#">棉服</a></li>
                <li><a href="#">女裤</a></li>
                <li><a href="#">羽绒服</a></li>
                <li><a href="#">牛仔裤</a></li>
            </ul>
            <ul id="center">
                <li><a href="#"><img src="imgs/女靴.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/雪地靴.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/冬裙.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/呢大衣.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/毛衣.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/棉服.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/女裤.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/羽绒服.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/牛仔裤.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/女包.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/男靴.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/登山鞋.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/皮带.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/围巾.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/皮衣.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/男毛衣.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/男棉服.jpg" width="200" height="250" /></a></li>
                <li><a href="#"><img src="imgs/男包.jpg" width="200" height="250" /></a></li>

            </ul>
            <ul id="right">
                <li><a href="#">女包</a></li>
                <li><a href="#">男靴</a></li>
                <li><a href="#">登山鞋</a></li>
                <li><a href="#">皮带</a></li>
                <li><a href="#">围巾</a></li>
                <li><a href="#">皮衣</a></li>
                <li><a href="#">男毛衣</a></li>
                <li><a href="#">男棉服</a></li>
                <li><a href="#">男包</a></li>
            </ul>

        </div>

    </body>
</html>

案例：下拉菜单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }

            .wrap {
                width: 330px;
                height: 30px;
                margin: 100px auto 0;
                padding-left: 10px;
                background-image: url(imgs/bg.jpg);
            }

            .wrap li {
                background-image: url(imgs/libg.jpg);
            }

            .wrap>ul>li {
                float: left;
                margin-right: 10px;
                position: relative;
            }

            .wrap a {
                display: block;
                height: 30px;
                width: 100px;
                text-decoration: none;
                color: #000;
                line-height: 30px;
                text-align: center;
            }

            .wrap li ul {
                position: absolute;
                top: 30px;
                display: none;
            }
        </style>

    </head>
    <body>
        <div class="wrap">
            <ul>
                <li>
                    <a href="javascript:void(0);">一级菜单1</a>
                    <ul class="ul">
                        <li><a href="javascript:void(0);">二级菜单11</a></li>
                        <li><a href="javascript:void(0);">二级菜单12</a></li>
                        <li><a href="javascript:void(0);">二级菜单13</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">一级菜单2</a>
                    <ul>
                        <li><a href="javascript:void(0);">二级菜单21</a></li>
                        <li><a href="javascript:void(0);">二级菜单22</a></li>
                        <li><a href="javascript:void(0);">二级菜单23</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">一级菜单3</a>
                    <ul>
                        <li><a href="javascript:void(0);">二级菜单31</a></li>
                        <li><a href="javascript:void(0);">二级菜单32</a></li>
                        <li><a href="javascript:void(0);">二级菜单33</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <script src="jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function() {
                var $li = $(".wrap>ul>li");
                $li.mouseenter(function() {
                    $(this).children("ul").show(100);
                });
                $li.mouseleave(function() {
                    $(this).children("ul").hide(100);
                });
            });
        </script>
    </body>
</html>

案例：突出展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }

            body {
                background: #000;
            }

            .wrap {
                margin: 100px auto 0;
                width: 630px;
                height: 394px;
                padding: 10px 0 0 10px;
                background: #000;
                overflow: hidden;
                border: 1px solid #fff;
            }

            .wrap li {
                float: left;
                margin: 0 10px 10px 0;

            }

            .wrap img {
                display: block;
                border: 0;
            }
        </style>

    </head>
    <body>

        <div class="wrap">
            <ul>
                <li><a href="#"><img src="imgs/01.jpg" alt="" /></a></li>
                <li><a href="#"><img src="imgs/02.jpg" alt="" /></a></li>
                <li><a href="#"><img src="imgs/03.jpg" alt="" /></a></li>
                <li><a href="#"><img src="imgs/04.jpg" alt="" /></a></li>
                <li><a href="#"><img src="imgs/05.jpg" alt="" /></a></li>
                <li><a href="#"><img src="imgs/06.jpg" alt="" /></a></li>
            </ul>
        </div>
        <script src="jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function() {
                $(".wrap>ul>li").mouseenter(function() {
                    // 让自己透明度是1,  让兄弟 透明度是0.4
                    $(this).css("opacity", "1").siblings().css("opacity", "0.4");

                });
                $(".wrap").mouseleave(function() {
                    // 让所有的li都变亮
                    // $("li")
                    // $(".wrap li")
                    // $(".wrap>ul>li")
                    // $(this).children().children().
                    $(this).find("li").css("opacity", "1");
                });
            });
        </script>
    </body>
</html>

案例：手风琴

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }

            ul {
                list-style-type: none;
            }

            .parentWrap {
                width: 200px;
                text-align: center;

            }

            .menuGroup {
                border: 1px solid #999;
                background-color: #e0ecff;
            }

            .groupTitle {
                display: block;
                height: 20px;
                line-height: 20px;
                font-size: 16px;
                border-bottom: 1px solid #ccc;
                cursor: pointer;
            }

            .menuGroup>div {
                height: 200px;
                background-color: #fff;
                display: none;
            }
        </style>

    </head>
    <body>
        <ul class="parentWrap">
            <li class="menuGroup">
                <span class="groupTitle">标题1</span>
                <div>我是弹出来的div1</div>
            </li>
            <li class="menuGroup">
                <span class="groupTitle">标题2</span>
                <div>我是弹出来的div2</div>
            </li>
            <li class="menuGroup">
                <span class="groupTitle">标题3</span>
                <div>我是弹出来的div3</div>
            </li>
            <li class="menuGroup">
                <span class="groupTitle">标题4</span>
                <div>我是弹出来的div4</div>
            </li>
        </ul>
        <script src="jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function() {
                // 给所有的span注册点击事件,让当前span的兄弟div显示出来
                $(".groupTitle").click(function() {
                    //下一个兄弟:nextElementSibling
                    // 在jQuery中方法可以一直调用下去
                    $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
                });
            });
        </script>
    </body>
</html>

原文地址：访问原文地址
快照地址：访问文章快照

分享到微博