前言

在电商网站首页设计中，通常都包括精品展示功能。精品展示功能通常用来推送目前热卖的商品，并支持快速切换商品。本案例就是一个使用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循环来实现。我们在这个案例里面需要注意的就是筛选的使用及语法使用、排他思想和链式操作的使用。

精品展示案例（使用jQuery）相关推荐

Python 毕设精品实战案例——快速索引目录
1. 基于 python 的银行信贷风险评估信贷业务又称为信贷资产或贷款业务,是商业银行最重要的资产业务,通过放款收回本金和利息,扣除成本后获得利润,所以信贷是商业银行的主要赢利手段.信用风险是金融 ...
案例实现jquery.cookie的操作
案例实现jquery.cookie的操作 [1]先下载jquery.cookie插件:http://download.csdn.net/download/goodshot/8276243 [2]安装插 ...
Revealing图片展示效果（jQuery）
Revealing图片展示效果(jQuery),单击"更多信息"按钮,图片的缩略图将展现为全尺寸图片和附加信息,兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.head区域引用 ...
【jQuery学习】淘宝精品栏案例
利用jquery实现了tab栏切换 <style>*{margin: 0;padding: 0;}.wrapper{width: 250px;height: 248px;margin: 1 ...
横向全屏滑动插件_【案例】JQuery横向手风琴图片轮播切换代码
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源哈喽大家好,又到了每周二经典案例环节啦~同学们还想了解哪些网页知识今天段老师给同学们带来的是JQuery横向手 ...
用一个案例介绍jQuery插件的使用和写法
我们在做web的时候都会用到很多jQuery插件,这些插件可以很方便的使用.但对于初学者来说想要修改插件中的一些功能,或者想要自定义插件却不是容易的事情.自己也刚好在学习这部分的知识,这里用一个案例来 ...
21个演示展示强大的jQuery特效
就在不久之前, Flash 是被web设计师用来为网站添加交互的重要技术之一!自从Ipad诞生, 并且不支持 Flash Player, 加速了web开发中使用其他技术代替flash,比如 jQuer ...
推荐：21个演示展示强大的jQuery特效
就在不久之前, Flash 是被web设计师用来为网站添加交互的重要技术之一!自从Ipad诞生, 并且不支持 Flash Player, 加速了web开发中使用其他技术代替flash,比如 jQuer ...
web页面大数据可视化大屏展示案例分享
以下案例,亲测有效温馨提示:直接运行工程文件夹中的index文件,即可看到大屏. 案例1: 案例二: 案例三: 案例四: 案例五: 案例六: 案例七: 案例八: 案例九: 案例十: 案例十一: 案例 ...

精品展示案例（使用jQuery）

文章目录

前言

一、排他思想是什么？

二、怎么使用链式编程？

三、代码展示

四、效果

总结

精品展示案例（使用jQuery）相关推荐

最新文章

热门文章