精品展示案例（使用jQuery）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言

  目录

  文章目录

  前言

  一、排他思想是什么？

  二、怎么使用链式编程？

  三、代码展示

  四、效果

  总结

---

前言

在电商网站首页设计中，通常都包括精品展示功能。精品展示功能通常用来推送目前热卖的商品，并支持快速切换商品。本案例就是一个使用jQuery代码实现一个精品展示的案例。这里我们会学习到排他思想和链式编程。

一、排他思想是什么？

简单的说，就是当元素设置样式时，其余的兄弟元素清除样式。

二、怎么使用链式编程？

使用链式编程是为了节省代码量，让代码看起来更加优雅。是比较好用的，但是也可能会降低可读性，需要注意的就是是对谁进行操作，要注意对象还有就是筛选方法的使用及语法规范。

例如下面这一段代码：

$("#content div").eq(index).show();
$("#content div").eq(index).siblings().hide();

可以用这一段代码来替代：

$("#content div").eq(index).show().siblings().hide();

这两段代码实现的都是同样的操作，都是事件触发时，获取当前元素的索引index，然后控制对应索引的图片显示或隐藏。通俗的说就是让鼠标指针滑到菜单上然后显示他的图片而其他的菜单的图片隐藏起来不显示。

三、代码展示

<script>
    // 鼠标指针经过左侧的li
    $("#left li").mouseover(function () {
      var index = $(this).index();	// $(this).index()能够得到当前li的索引
      console.log(index);
      // 让右侧盒子相应索引的图片显示出来
      $("#content div").eq(index).show();
      // 将其他图片隐藏起来,siblings()的作用是查找兄弟节点;hide()隐藏
      $("#content div").eq(index).siblings().hide();

      //$("#content div").eq(index).show().siblings().hide();//或者前两行用这一段代码替代（链式编程）
    });
  </script>

四、效果

当我点击棉服的时候，棉服的菜单会变成红色，其他菜单不变，同时右边会显示棉服的图片，而其他的图片被隐藏起来了。

---

 

总结

总体来说jQuery操作起来比之前用来实现这一案例要简单的多，因为他可以直接隐式迭代，不用像之前使用DOM对象操作还需要写一个for循环来实现。我们在这个案例里面需要注意的就是筛选的使用及语法使用、排他思想和链式操作的使用。