我们学习原生 JS 时，写过一个图片框切换的案例，还记得采用的是什么方法做到导航栏和内容栏同步切换吗？用的是自定义属性的创建和获取，比较麻烦，我们还要使用for循环遍历绑定事件，但是学了 jQuery 之后，虽然只是入门，但以及可以完成一些基本的动态效果。

 我们来对比一下二者的实现部分：

原生 JS：

        原生 JS 就是在循环给每一个 li 绑定鼠标移动事件时使用 setAttribute 设置一个自定义属性 index，然后绑定移动事件时使用 getAttribute 获取到该 li 绑定过的自定义属性值 index，再使用排他思想：干掉其他人，留下我自己，达到只留下对应 li 自定义属性值的图片

      var lis=document.querySelectorAll('li')      var as=document.querySelectorAll('a')      for(var i=0;i<lis.length;i++){ lis[i].setAttribute('index',i)  //设置自定义属性 lis[i].addEventListener('mouseover',function() {    var index=this.getAttribute('index')  //获取自定义属性    for(var i=0;i<as.length;i++){      as[i].style.display='none';    }    as[index].style.display='block' })      }

jQuery：

       jquery 的实现会太过于简单了！！，我们因为有隐式迭代，所以不需要循环绑定，使用 jQuery 的 index() 方法得到光标移动到的 li 的索引值，再直接使用排他思想，使用筛选方法中的 eq() 方法，得到光标移动对应索引值的图片，使用 jQuery 的 show() 方法使其显示，再使用 hide() 方法，使其兄弟级隐藏（siblings）

      $('.map-box li').mouseover(function(){  var index=$(this).index()  $('.img-box a').eq(index).show()  $('.img-box a').eq(index).siblings().hide()      }) 

 完整代码：

              *{      padding: 0;      margin: 0;    }    .out-box{      box-sizing: border-box;      width: 700px;      height: 500px;      margin: 100px auto;    }    .map-box{      float: left;      box-sizing: border-box;      width: 200px;      height: 500px;      background-color: rgb(129, 129, 129);    }    .img-box{      float: left;      box-sizing: border-box;      width: 500px;      height: 500px;      border: 1.5px solid;      border-left: 0;    }    .map-box ul{width: 200px;      box-sizing: border-box;    }    .map-box ul li{      box-sizing: border-box;      width: 200px;      height: 100px;      background-color: rgb(255, 230, 131);      border: 1.5px solid;      border-bottom: 0;      list-style: none;      text-align: center;      line-height: 100px;      font-size: 27px;      font-weight: 800;    }    .map-box ul li:last-child{      border-bottom:1.5px solid;    }    .map-box ul li:hover{      background-color: rgb(202, 148, 0);      color: aliceblue;      border-color: black;    }    .img-box a{      display: inline-block;      display: none;    }    .img-box img{      width: 498px;      height: 498px;      box-sizing: border-box;    }        
 
    
      
文峰塔
      
羑里城
      
岳飞庙
      
殷墟
      
文字博物馆
    
 
 
                                                            
    
         $('.map-box li').mouseover(function(){  var index=$(this).index()  $('.img-box a').eq(index).show()  $('.img-box a').eq(index).siblings().hide()      })     

推币机的世界