这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo:

1.引入jQuery

例子中我使用的是在线jQuery:

<script src="/jquery/1.10.0/jquery.min.js"></script>

2.jQuery方法说明:

prevAll:如果给定一个表示 DOM 元素集合的 jQuery 对象,.prevAll() 方法允许我们在 DOM 树中搜索这些元素前面的同胞元素,并用匹配元素构造一个新的 jQuery 对象。

nextAll:如果给定一个表示 DOM 元素集合的 jQuery 对象,.nextAll() 方法允许我们搜索 DOM 树中的元素跟随的同胞元素,并用匹配元素构造新的 jQuery 对象。

addClass:向被选元素添加一个或多个类。

removeClass:从被选元素移除一个或多个类。

html:该方法返回或设置被选元素的内容 (inner HTML)。当使用该方法设置一个值时,它会覆盖所有匹配元素的内容。

text:该方法方法设置或返回被选元素的文本内容。当该方法用于返回一个值时,它会返回所有匹配元素的组合的文本内容(会删除 HTML 标记)。

3.样式css

简单样式:

* { padding: 0; margin: 0; }

.comment { font-size: 40px; color: teal; }

.comment li { float: left; }

ul { list-style: none; }

4.html结构

5.完整代码:

仅列出关键jQuery代码:

效果:

博客园的前端群:640633433
欢迎大家关注我的微信号公众号,公众号名称:web前端EDU。扫下面的二维码或者收藏下面的二维码关注吧(长按下面的二维码图片、并选择识别图中的二维码)

利用jquery实现电商网站常用特效之:五星评分的更多相关文章

  1. Jquery开发电商网站实战(带源码)

    组件化思想,包含: 下拉菜单项封装 + 按需加载 搜索功能组件化,显示数据 + 下拉显示 + 缓存 分类导航按需加载 幻灯片效果组件封装及按需加载 商品楼层模块组件化 + 商品数据按需加载 + Tab ...

  2. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  3. 电商网站jQuery放大镜代码

    分享一款电商网站jQuery放大镜代码.这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用.效果图如下: 在线 ...

  4. [刘阳Java]_大型电商网站架构技术演化历程

    今年的双十一已经过去一段,作为技术小咖啡,我们先说一下大型电商网站的特点:高并发,大流量,高可用,海量数据.下面就说说大型网站的架构演化过程,它的技术架构是如何一步步的演化的 1. 早期的网站架构 初 ...

  5. 如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念

    一.前言     DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...

  6. Linux-某电商网站流量劫持案例分析与思考

    [前言] 自腾讯与京东建立了战略合作关系之后,笔者网上购物就首选京东了.某天在家里访问京东首页的时候突然吃惊地发现浏览器突然跳到了第三方网站再回到京东,心里第一个反应就是中木马了. 竟然有这样的事,一 ...

  7. [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(三)

    一步步打造一个简单的 MVC 电商网站 - BooksStore(三) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...

  8. [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(四)

    一步步打造一个简单的 MVC 电商网站 - BooksStore(四) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...

  9. PHP实现日志处理类库 - 【微信开发之微电商网站】技术笔记之二

    继上篇文章[微信开发之微电商网站]技术笔记之一,昨日做了日志处理的功能. 对于现在的应用程序来说,日志的重要性是不言而喻的.很难想象没有任何日志记录功能的应用程序运行在生产环境中.日志所能提供的功能是 ...

随机推荐

  1. 多服务器操作利器 - Polysh

    多台服务器下的痛苦人生 分布式架构下的系统,可以说每个服务都是分别部署在多台服务器上的,有的甚至还需要多机房,在这种架构下可以说可以很好的做到了易扩展.容灾等功能.推荐的服务部署为一服务多机器.一机器 ...

  2. debug断点调试

    debug断点调试  1,虫子启动2,F6   执行断点的下一步,下一个语句     F5    进入方法     F8   执行到结束    查看表达式的值:选中查看的表达式,接着按   ctrl ...

  3. RAC环境下误操作将数据文件添加到本地存储

    今天碰到个有意思的事情,有客户在Oracle RAC环境,误操作将新增的数据文件直接创建到了其中一个节点的本地存储上. 发现网上去搜的话这种问题还真不少,对应解决方案也各式各样,客户问我选择哪种方案可 ...

  4. python 正则空格\xa0实录 与xpath取 div 里面的含多个标签的所有文字

    业余玩爬虫时,由原先的原生写法 改为 scrapy框架了,使用自带的selector时,xpath配合正则来抓取回复数和阅读数的时候,遇到的小问题,mark下. 首先获取到 我需要的数据块,(我用sc ...

  5. 初识NumPy库-基本操作

    ndarray(N-dimensional array)对象是整个numpy库的基础. 它有以下特点: 同质:数组元素的类型和大小相同 定量:数组元素数量是确定的 一.创建简单的数组: np.arra ...

  6. Idea Live Templates代码模板

    一. 概念 创建代码模板进行快速代码编写,如sout-->System.out.println();. 如我们经常要写logger的定义:private static final Logger ...

  7. thinkphp中各字母代表的发放和具体实例

    hinkphp单字母函数使用指南A方法 A方法用于在内部实例化控制器,调用格式:A('[项目://][分组/]模块','控制器层名称') 最简单的用法: $User = A('User'); 复制代码 ...

  8. Linux Redis集群搭建与集群客户端实现

    硬件环境 本文适用的硬件环境如下 Linux版本:CentOS release 6.7 (Final) Redis版本: Redis已经成功安装,安装路径为/home/idata/yangfan/lo ...

  9. Chrome浏览器读写系统剪切板

    IE浏览器支持直接读写剪切板内容: window.clipboardData.clearData(); window.clipboardData.setData('Text', 'abcd'); 但是 ...

  10. 两年JAVA程序员的面试总结

    前言 工作两年左右,实习一年左右,正式工作一年左右,其实挺尴尬的,高不成低不就.因此在面试许多公司,找到了目前最适合自己的公司之后.于是做一个关于面试的总结.希望能够给那些依旧在找工作的同学提供帮助. ...