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();