jQuery 实现 图片框切换【与原生 JS 对比】

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）

完整代码：

======