美文网首页
jQuery-选择器的使用一

jQuery-选择器的使用一

作者: charlotte2018 | 来源:发表于2017-11-16 14:02 被阅读28次

    01-体验jquery.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            height: 100px;
            background-color: pink;
            margin: 10px;
            display: none;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>

        //原生js
//        window.onload = function () {
//            var btn = document.getElementsByTagName("button")[0];
//            var divArr = document.getElementsByTagName("div");
//
//            btn.onclick = function () {
//                for(var i=0;i<divArr.length;i++){
//                    divArr[i].style.display = "block";
//                    divArr[i].innerHTML = "明日中秋！";
//                }
//            }
//        }

        //jquery版
        $(document).ready(function () {
            //获取元素
            var jQbtn = $("button");//根据标签名获取元素
            var jQdiv = $("div");//根据标签名获取元素
            //绑定事件
            jQbtn.click(function () {
                //事件驱动程序
//                jQdiv.show(1000);//显示盒子。
//                jQdiv.html("tomorrow中秋！");//设置内容
                jQdiv.show(3000).html(1111);
                //1.链式编程。  2.隐式迭代。

            });//事件绑定是通过方法绑定的。


        });

    </script>
</head>
<body>

    <button>显示盒子和设置内容</button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

</body>
</html>

    02-如何使用jquery.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //入口函数
        $(document).ready(function () {
            //获取元素和绑定事件（通过方法实现）

//            div.click(function () {
//
//            });
        });

    </script>
</head>
<body>

</body>
</html>

    03-入口函数.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //原生js，入口函数。页面上所有内容加载完毕，会执行。
        //不仅文本加载完毕，而且图片也要加载完毕，在执行函数。
//        window.onload = function () {
//            alert(1);
//        }

//        //jquery的入口函数。  1.文档加载完毕，图片不加载的时候就可以执行这个函数。
//        $(document).ready(function () {
//            alert(1);
//        })


        //jquery的入口函数。  2.文档加载完毕，图片不加载的时候就可以执行这个函数。
//        $(function () {
//            alert(1);
//        });



//        //jquery的入口函数。  3.文档加载完毕，图片也加载完毕的时候在执行这个函数。
//        $(window).ready(function () {
//            alert(1);
//        })
    </script>
</head>
<body>
<!--<img src="" width="100px" height="100px" style="border: 1px solid red;"/>-->
<img src="logo.png" alt=""/>
</body>
</html>

    04-jquery和$的区别.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>

        console.log($);
        console.log(jQuery);
        console.log($===jQuery); //true
//        jQuery("");

        jQuery(document).ready(function () {
            alert(1);
        });

    </script>
</head>
<body>

</body>
</html>

    05-jquery中的DOM对象和js中的DOM对象的区别和联系.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //入口函数
        jQuery(document).ready(function () {
            var box = document.getElementById("box");
            var cbox = document.getElementsByClassName("box");
            var div = document.getElementsByTagName("div");

            //jquery对象是一个数组。数组中包含着原生JS中的DOM对象。
            var jqbox = $("#box");
            var jqCbox = $(".box");
            var jqdiv = $("div");

            console.log(box);
            console.log(jqbox);
            console.log("------------");
            console.log(cbox);
            console.log(jqCbox);
            console.log("------------");
            console.log(div);
            console.log(jqdiv);

            //原生js中没有css();
//            div.css("width: 100px;height:100px;background-color:red;margin:10px;");


            //jquery中有css();  原因就是因为：jquery有一层功能皮肤。
            jqdiv.css({"width": 100,"height":100,"background-color":"red","margin":10});
        });
    </script>
</head>
<body>
    <div></div>
    <div class="box"></div>
    <div id="box"></div>
    <div class="box"></div>
    <div></div>
</body>
</html>

    06-jquery中的DOM对象和js中的DOM对象的转换.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //入口函数
        jQuery(document).ready(function () {

            //如果想要那种方式设置属性或方法，必须转换成该种类型。

            //1.js对象转换成jquery对象。     $(js对象);
            //2.jquery对象转换成js对象。     1.jquery对象[索引值]   2.jquery对象.get(索引值)

            var box = document.getElementById("box");
            var cbox = document.getElementsByClassName("box");
            var div = document.getElementsByTagName("div");

            //jquery对象是一个数组。数组中包含着原生JS中的DOM对象。
            var jqbox = $("#box");
            var jqCbox = $(".box");
            var jqdiv = $("div");

            console.log(box);
            console.log(jqbox);
            console.log("------------");
            console.log(cbox);
            console.log(jqCbox);
            console.log("------------");
            console.log(div);
            console.log(jqdiv);

            //转换。
            box = $(box);
            cbox = $(cbox);
            div = $(div);


            console.log(box);
            console.log(jqbox);
            console.log("------------");
            console.log(cbox);
            console.log(jqCbox);
            console.log("------------");
            console.log(div);
            console.log(jqdiv);

            //转换成了jquery对象，皮上面有功能可以直接调用。
            div.css({"width": 100, "height": 100, "border": "1px solid red"});
            box.css("background", "red");
            cbox.css("background", "yellow");

            //jquery对象转换成js对象
            jqdiv[0].style.backgroundColor = "black";
            jqdiv.get(4).style.backgroundColor = "pink";



        });
    </script>
</head>
<body>
<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>
</body>
</html>

    07-隔行变色.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //入口函数
        jQuery(function () {
            var jqLi = $("li");
//            console.log(jqLi);
//            console.log(jqLi.length);
            for(var i=0;i<jqLi.length;i++){
                if(i%2===0){
                    //jquery对象，转换成了js对象。
                    jqLi[i].style.backgroundColor = "red";
                }else{
                    jqLi.get(i).style.backgroundColor = "yellow";
                }
            }
        });
    </script>
</head>
<body>
<ul>
    <li>班长今天老帅了，嗷嗷帅...</li>
    <li>班长今天老帅了，嗷嗷帅...</li>
    <li>班长今天老帅了，嗷嗷帅...</li>
    <li>班长今天老帅了，嗷嗷帅...</li>
    <li>班长今天老帅了，嗷嗷帅...</li>
    <li>班长今天老帅了，嗷嗷帅...</li>
    <li>班长今天老帅了，嗷嗷帅...</li>
</ul>
</body>
</html>

    08-开关灯案例(转换)

    <!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>开关灯案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 944px;
            margin: 50px auto 0;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        //入口函数
        $(document).ready(function () {
            //获取元素
            var inpArr = document.getElementsByTagName("input");
            var bd = $("body");
            //分别绑定事件
            //js对象转换成jquery对象
            $(inpArr[0]).click(function () {
                //jquery对象转换成js对象
                bd.get(0).style.backgroundColor = "white";
            });

            //同理
            $(inpArr[1]).click(function () {
                bd[0].style.background = "black";
            });
        })
    </script>
</head>

<body>
    <input type="button" value="开灯" id="j_openLight"/>
    <input type="button" value="关灯" id="j_closeLight"/>

    <div>
        <img src="imgs/coder.jpg" alt=""/>
    </div>
</body>

</html>

    09-基本选择器.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        //入口函数
        jQuery(document).ready(function () {
            //三种方法获取jquery对象，然后用css方法操作
            var jqdiv = $("div");
            var jqCdiv = $(".box");
            var jqIdiv = $("#box");

            jqdiv.css("width",100);
            jqdiv.css("height",100);
            jqdiv.css("margin",10);
            jqdiv.css("background","pink");

            //操作类选择器(隐式迭代，不用一个一个设置)
            jqCdiv.css("background","red");

            //操作id选择器
            jqIdiv.css("background","yellow");
        });
    </script>
</head>
<body>

<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>


</body>
</html>

    10-层级选择器.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //获取ul中的li设置为粉色
            //后代，儿孙重孙曾孙玄孙....
            var jqli = $("ul li");
            jqli.css("margin",5);
            jqli.css("background","pink");

            //子代，亲儿子
            var jqotherLi = $("ul>li");
            jqotherLi.css("background","red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

    11-基本过滤选择器.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //利用过滤选择器设置偶数位元素的背景
            var jqliodd = $("ul li:odd"); //获取奇数索引
            jqliodd.css("background","pink");

            //利用过滤选择器设置奇数位元素的背景
            var jqlieven = $("ul li:even");//获取偶数索引
            jqlieven.css("background","red");


            //利用过滤选择器设置指定索引值元素的背景
            var jqlifirst = $("ul li:eq(0)");
            jqlifirst.css("background","yellow");

            //获取页面上所有的li，然后最大索引值就是长度-1；
            var li = $("li");
            var jqlifirst = $("ul li:eq("+(li.length-1)+")");
            jqlifirst.css("background","blue");
        });
    </script>
</head>
<body>
    <ul>
        <li>班长今天你老帅了，嗷嗷帅....</li>
        <li>班长今天你老帅了，嗷嗷帅....</li>
        <li>班长今天你老帅了，嗷嗷帅....</li>
        <li>班长今天你老帅了，嗷嗷帅....</li>
        <li>班长今天你老帅了，嗷嗷帅....</li>
        <li>班长今天你老帅了，嗷嗷帅....</li>
    </ul>
</body>
</html>

    12-筛选选择器.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            var jqul = $("ul");
            //find(selector); 从jquery对象的后代中查找
            //必须制定参数，如果不指定获取不到元素。length === 0
            jqul.find("li").css("background","pink");
            console.log(jqul.find());
            //chidlren(selector); 从jquery对象的子代中查找
            //不写参数获取所有子元素。
            jqul.children("li").css("background","green");

            //eq(索引值); 从jquery对象的子代中查找该索引值的元素
            //要求该数组中的第几个。
            jqul.children().eq(0).css("background","red");

            //next(); 该元素的下一个兄弟元素
            jqul.children().eq(0).next().css("background","yellow");

            //siblings(selector); 该元素的所有兄弟元素
            jqul.children().eq(0).next().siblings().css("border","1px solid blue");

            //parent(); 该元素的父元素（和定位没有关系）
            console.log(jqul.children().eq(0).parent());
        });
    </script>
</head>
<body>

    <ul>
        <li>北京的天是晴朗的天，通州人民好喜欢，眼望丰台高声喊，我爱你，海淀....</li>
        <li class="box">北京的天是晴朗的天，通州人民好喜欢，眼望丰台高声喊，我爱你，海淀....</li>
        <span>北京的天是晴朗的天，通州人民好喜欢，眼望丰台高声喊，我爱你，海淀....</span>
        <li class="box">北京的天是晴朗的天，通州人民好喜欢，眼望丰台高声喊，我爱你，海淀....</li>
        <i>北京的天是晴朗的天，通州人民好喜欢，眼望丰台高声喊，我爱你，海淀....</i>
        <li>北京的天是晴朗的天，通州人民好喜欢，眼望丰台高声喊，我爱你，海淀....</li>
        <a  id="box" href="#">北京的天是晴朗的天，通州人民好喜欢，眼望丰台高声喊，我爱你，海淀....</a>
        <ol>
            <li>我是ol中的li</li>
            <li>我是ol中的li</li>
            <li>我是ol中的li</li>
            <li>我是ol中的li</li>
        </ol>
    </ul>

</body>
</html>

    13-下拉菜单案例（children+this）

    <!DOCTYPE html>
<html>
<head lang="en">
    <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>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        //入口函数
        $(document).ready(function () {
            //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
            var jqli = $(".wrap>ul>li");

            //绑定事件
            jqli.mouseenter(function () {
                //这个位置用到了this.
//                console.log(this);  //jquery对象绑定的时间中的this也代指js中的dom对象。！！！
                //让this中的ul显示出来。
//                this.children[1].style.display = "block";
                //把js的dom对象包装为jquery对象，然后用jquery方法操作
                $(this).children("ul").show();
            });

            //绑定事件(移开隐藏)
            jqli.mouseleave(function () {
                //这个位置用到了this.
//                console.log(this);  //jquery对象绑定的时间中的this也代指js中的dom对象。！！！
                //让this中的ul显示出来。
//                this.children[1].style.display = "none";
                //把js的dom对象包装为jquery对象，然后用jquery方法操作
                $(this).children("ul").hide();
            });
        });
    </script>

</head>
<body>
    <div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

    14-隔行变色.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            //需求；隔行变色；鼠标放进去还要变色。
            var jqli1 = $("li:odd");
            var jqli2 = $("li:even");
            jqli1.css("background","red");
            jqli2.css("background","yellow");

            //鼠标进入变色，移开回复
            //计数器
            var color = "";
            $("li").mouseenter(function () {
                color = $(this).css("background");
                $(this).css("background","blue");
            });
            //移开恢复
            $("li").mouseleave(function () {
                $(this).css("background",color);
            });
        });
    </script>
</head>
<body>

    <ul>
        <li>魂消香断玉环冷，锦裘绣帕不闻香.......</li>
        <li>魂消香断玉环冷，锦裘绣帕不闻香.......</li>
        <li>魂消香断玉环冷，锦裘绣帕不闻香.......</li>
        <li>魂消香断玉环冷，锦裘绣帕不闻香.......</li>
        <li>魂消香断玉环冷，锦裘绣帕不闻香.......</li>
        <li>魂消香断玉环冷，锦裘绣帕不闻香.......</li>
    </ul>

</body>
</html>

    15-突出显示（find+siblings+opacity）

    <!DOCTYPE html>
<html>
<head lang="en">
    <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>
    <script src="../jquery-1.11.1.js"></script>
    <script>
        jQuery(window).ready(function () {
            //需求：鼠标放入li中，其他的li半透明，当前盒子，opacity值为1；离开wrap的时候所有的li全部opacity值为1；
            $(".wrap").find("li").mouseenter(function () {
                //连式编程
                $(this).css("opacity",1).siblings("li").css("opacity",0.4);
            });

            //离开wrap的时候所有的li全部opacity值为1；
            $(".wrap").mouseleave(function () {
                $(this).children().children("li").css("opacity",1);
//                $(".wrap li").css("opacity",1);
            });
        });
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
        </ul>
    </div>
</body>
</html>

    16-手风琴案例（parent + next）.html

    <!DOCTYPE html>
<html>
<head lang="en">
    <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>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            //需求：鼠标点击span，让他下面的div显示出来。让其他的div隐藏。
            $(".parentWrap span").click(function () {
//                $(this).next().show();
//                //让其他的隐藏
//                //点击的span的父亲li，的所有的兄弟元素li，的孩子元素div全部隐藏。
//                $(this).parent("li").siblings("li").children("div").hide();
                //连式编程
                $(this).next().show().parent("li").siblings("li").find("div").hide();
            });
        })
    </script>
</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>
</body>
</html>

    17-淘宝精品服饰广告案例（层级+eq+siblings+index）

    <!DOCTYPE html>
<html>
<head lang="en">
    <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(images/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(images/abg.gif);
        }

        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        jQuery(function () {
            //需求：鼠标放入两侧的li中，让中间的ul中对应索引值的li显示出来，其他的隐藏。（右侧的li要+9）
            //左侧先绑。获取绑mouseenter
            $("#left li").mouseenter(function () {
                //显示对应索引值的中间的li
                //alert($(this).index());  获取索引值
                $("#center li").eq($(this).index()).show().siblings("li").hide();
            });

            //右侧
            $("#right li").mouseenter(function () {
                //显示对应索引值的中间的li
                //alert($(this).index());  获取索引值
                $("#center li:eq("+($(this).index()+9)+")").show().siblings("li").hide();
            });
        });
    </script>
</head>
<body>
<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="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.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>

    筛选选择器

    7E2F99F1-3FE2-4C54-BCCF-1B15FF271351.png

    相关文章

      网友评论

          本文标题：jQuery-选择器的使用一

          本文链接：https://www.haomeiwen.com/subject/cvjhvxtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|jQuery-选择器的使用一|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！