jQuery笔记（二）根据案例了解jQuery

案例一

鼠标移动到文字上显示对应图片
效果如下：（到不同数字的位置显示不同颜色的色块）

代码如下：
（css）

<style>
    .wrap{width: 705px;height: 510px;overflow: hidden;}/*隐藏多余的li*/
    .dv{width: 300px;height: 505px}
    #left li{width: 50px;height: 100px;list-style:none;border: 1px solid}
    #center li{list-style:none;}
    #right li{width: 50px;height: 100px;list-style:none;border: 1px solid}
    #left,#right{width:100px;}
    #left,#right,#center{height:500px;float: left;}/*让ul横向排列*/
</style>

(div布局，适当省略一点，用到自行补充)

<div class="wrap">
   <ul id="left">
        <li>000</li>
        <li>111</li>
        ...
   </ul>
    <ul id="center">
        <li><div class="dv" style="background-color: #0d3349;"></div></li>
        <li><div class="dv" style="background-color: #3f96e6;"></div></li>
   		...
    </ul>
    <ul id="right">
        <li>555</li>
        <li>666</li>
        ...
    </ul>
</div>

(jq)
方法一
.index()方法：获取当前的li的索引值
.siblings(“li”)：li的兄弟元素

 $(function () {
            //获取左侧的列表中的li注册鼠标进入的事件
            $("#left>li").mouseover(function () {
                //获取当前的li的索引值.index()方法
                var index=$(this).index();
                $("#center>li:eq("+index+")").siblings("li").hide();
                $("#center>li:eq("+index+")").show();
            });
            //获取右侧的列表中的li注册鼠标进入的事件
            $("#right>li").mouseover(function () {
                var index=$(this).index()+5;//******重点是这里，你可以事先控制台打印一下li索引值,看一下右侧需要加几才可以正确排序
                $("#center>li:eq("+index+")").siblings("li").hide();// $("#center>li").hide();也可以运行
                $("#center>li:eq("+index+")").show();
            });
        });

案例二

突出高亮显示图片
效果图如下：

（css）

<style>
    .wrap ul{width: 310px;height: 205px;}
    .dv{width: 100px;height: 100px;}
    li{float: left;list-style: none;}
</style>

(div布局)

<div class="wrap">
    <ul>
        <li><div class="dv" style="background-color: #34d87f;"></div></li>
        ...
    </ul>
</div>

(jq) opacity透明度设置；find(“li”)查找li元素

<script>
    $(function(){
        $(".wrap li").mouseover(function () {
            $(this).css("opacity",1).siblings("li").css("opacity",0.5);
        })
        $(".wrap li").mouseout(function () {
            $(this).find("li").css("opacity",1);
        })
    })
</script>

案例三

垂直导航
效果图如下

（css）

 #uu li {margin-bottom: 10px;background-color: #beffc1;cursor: pointer;}//鼠标变手
 #uu li ul {list-style: none;margin: 0;padding: 0;}//遇到二级目录跑偏的情况，都设置成0就好了
 #uu li ul li {background-color: pink;}
 #uu ul {margin:0; padding:0; text-align:center;}
 #uu{list-style: none;padding: 0;margin: 0}

（div）

<div style=" width:180px; height:500px; border:1px solid red;">
    <ul id="uu">
        <li>111
            <ul>
                <li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
            </ul>
        </li>
        <li>222
            <ul>
                <li>2.1</li>
                <li>2.2</li>
                <li>2.3</li>
            </ul>
        </li>
    </ul>
</div>
</body>

（jq）
方法一，点击一个另一个下拉框缩回去

$(function () {
           //找到id为u1的下面的li里面的ul里面的li全部隐藏
           $("#u1>li>ul>li").hide();
           //找到id为ul的直接的子元素li,注册鼠标点击的事件
           $("#u1>li").click(function () {
               $(this).siblings("li").children("ul").find("li").hide(500);
               //当前的li中的ul中的所有的li显示
               $(this).children("ul").find("li").show(500);
           });
       });

方法二，根据单数偶数点击次数，让两个可以自由伸缩（但是如果另一个打开，再打开一个需要点两次.如果有一个东西需要点击两次的，可以使用这个方法）

$(function () {
        var cont=0
        $("#uu>li>ul>li").hide();
        $("#uu>li").click(function () {
            cont++
            if(cont % 2 ==0){
                $(this).children("ul").find("li").hide();
            }else{
                //$(this).siblings("li").children("ul").find("li").hide(500);
                $(this).children("ul").find("li").show();
            }
        });
    });

方法三（重点来啦！这个可以两个随便点）
next() 方法返回被选元素的后一个同级元素
slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态
parent() 方法返回被选元素的直接父元素
slideUp()通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。

$(function () {
    $(".main>a").click(function(){
        $(this).next().slideToggle(500).parent().siblings().find(".child").slideUp(500);
    });
});

<ul class="content">
    <li class="main"><a href="#">菜单 1</a>
        <ul class="child">
            <li>菜单1.1</li>
            <li>菜单1.2</li>
            <li>菜单1.3</li>
        </ul>
    </li>
    ...
 </ul>

如果觉得上面的比较难理解，可以直接根据方法一的div布局写jq.重点就在于改变可视状态==.slideToggle()==

 $(function () {
        $("#uu>li>ul>li").hide();
        $("#uu>li").click(function () {$(this).children("ul").find("li").slideToggle();
        });
    });

案例四

手风琴
效果如图


(css)

    * {margin: 0;padding: 0;}
    .dv{width: 300px;height: 200px;}
    .wrap{width: 500px;height: 200px;border: 1px solid red;overflow: hidden;margin: 50px auto;}
    li{width:100px;float: left;}//注意要给里设置平均的初始宽度
    ul {list-style: none;}

（div）

<div class="wrap">
    <ul>
        <li><div class="dv" style="background-color: #34d87f;"></div></li>
        <li><div class="dv" style="background-color: #911cff;"></div></li>
        ...
    </ul>
</div>

(jq)

    $(function () {
        $(".wrap>ul>li").mouseover(function () {
            $(this).siblings("li").css("width","50px");
            $(this).css("width","300px")
        });
        $(".wrap>ul>li").mouseout(function () {
            $(this).parent().find("li").css("width","100px");
        });
    });

案例五

tab键切换标签内容
效果如下图：


(css)

 * {margin:0;padding:0;}
ul {list-style:none;}
.wrapper {width:1000px;height:475px;margin:0 auto;margin-top:100px;}
.tab {border:1px solid #ddd;border-bottom:0;height:36px;width:320px;}
.tab li {position:relative;float:left;width:80px;height:34px;line-height:34px;text-align:center;cursor:pointer;border-top:4px solid #fff;}
.products {width:1002px;border:1px solid #ddd;height:476px;}
.products .main {float:left;display:none;}
.products .main.selected {display:block;}
.tab li.active {border-color:red;border-bottom:0;}
.dv {width:100px;height:100px}

（div）

<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">绿色</li>
        <li class="tab-item">紫色</li>
        <li class="tab-item">黄色</li>
        <li class="tab-item">粉色</li>
    </ul>
    <div class="products">
        <div class="main selected"><div class="dv" style="background-color: #34d87f;"></div></div>
        <div class="main"><div class="dv" style="background-color: #d255d8;"></div></div>
        <div class="main"><div class="dv" style="background-color: #FFFD48;"></div></div>
        <div class="main"><div class="dv" style="background-color: #FF9F99;"></div></div>
    </div>
</div>

(jq)
.removeClass(“类名”)从被选元素移除一个或多个类;
.addClass(“类名”)向被选元素添加一个或多个类名

<script>
        $(function () {
            $(".tab>li").mouseover(function () {
                //移除当前的li的所有兄弟元素li的类样式
                $(this).siblings("li").removeClass("active");
                //让当前li添加类样式
                $(this).addClass("active");
                //获取当前的li的索引
                var index=$(this).index();
                //获取div中对应的索引的这个div,让这个div的所有的兄弟元素div全部移除selected类样式,让当前对应的div(索引对应)应用selected类样式
                $(".products>div:eq("+index+")").siblings("div").removeClass("selected");
                //当前对应的div添加类样式
                $(".products>div:eq("+index+")").addClass("selected");
            });
        });
    </script>