当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 基于jquery实现五星好评效果

基于jquery实现五星好评效果

2019年04月09日  | 移动技术网IT编程  | 我要评论

在电商网站,我们经常会用到五星评分的功能,现在用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结构

利用jquery实现电商网站常用特效之:五星评分

 

5.完整代码:

仅列出关键jquery代码:

利用jquery实现电商网站常用特效之:五星评分

效果:

利用jquery实现电商网站常用特效之:五星评分

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网