我们学习原生 JS 时，写过一个图片框切换的案例，还记得采用的是什么方法做到导航栏和内容栏同步切换吗？用的是自定义属性的创建和获取，比较麻烦，我们还要使用for循环遍历绑定事件，但是学了 jQuery 之后，虽然只是入门，但以及可以完成一些基本的动态效果。
我们来对比一下二者的实现部分：
原生 JS：
原生 JS 就是在循环给每一个 li 绑定鼠标移动事件时使用 setAttribute 设置一个自定义属性 index，然后绑定移动事件时使用 getAttribute 获取到该 li 绑定过的自定义属性值 index，再使用排他思想：干掉其他人，留下我自己，达到只留下对应 li 自定义属性值的图片
<script>
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'
})
}
</script>
jQuery：
jquery 的实现会太过于简单了！！，我们因为有隐式迭代，所以不需要循环绑定，使用 jQuery 的 index() 方法得到光标移动到的 li 的索引值，再直接使用排他思想，使用筛选方法中的 eq() 方法，得到光标移动对应索引值的图片，使用 jQuery 的 show() 方法使其显示，再使用 hide() 方法，使其兄弟级隐藏（siblings）
<script>
$('.map-box li').mouseover(function(){
var index=$(this).index()
$('.img-box a').eq(index).show()
$('.img-box a').eq(index).siblings().hide()
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
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;
}
</style>
<script src="./jQuery.js"></script>
</head>
<body>
<div class="out-box">
<div class="map-box">
<ul>
<li>文峰塔</li>
<li>羑里城</li>
<li>岳飞庙</li>
<li>殷墟</li>
<li>文字博物馆</li>
</ul>
</div>
<div class="img-box">
<a href="javascript::" class="img1" style="display: block">
<img src="./phpto/wenfeng.jpg" alt="" >
</a>
<a href="javascript::" class="img2">
<img src="./phpto/youli.jpg" alt="">
</a>
<a href="javascript::" class="img3">
<img src="./phpto/yuefei.jpg" alt="">
</a>
<a href="javascript::" class="img4">
<img src="./phpto/yinxu.jpg" alt="">
</a>
<a href="javascript::" class="img5">
<img src="./phpto/wenzi.jpg" alt="">
</a>
</div>
</div>
<script>
$('.map-box li').mouseover(function(){
var index=$(this).index()
$('.img-box a').eq(index).show()
$('.img-box a').eq(index).siblings().hide()
})
</script>
</body>
</html>
