如何用jQuery实现五星好评

　　jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。

　　Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。

　　接下来，我使用jQuery实现一个常见的五星好评功能。下面的页面中，我引用了前端的jQuery和bootstrap框架，读者可以从网上下载这些框架资源。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>五星好评</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="jquery-1.11.1.js"></script>
</head>
<!--设置样式-->
<style>ul{list-style-type: none;}li{float: left;margin-left: 15px;font-size: 60px;font-family: "simsun";cursor: pointer;}div{clear: both;}button{margin-left: 70px;font-size:30px;}
</style>
<!--JS代码-->
<script>
//    入口函数$(function(){
//        设置两个状态的星星var emptyStar="☆";var fullStar="★";
//        li鼠标移入事件$("li").mouseenter(function(){$(this).text(fullStar).prevAll().text(fullStar).end().nextAll().text(emptyStar);});
//        li鼠标离开事件$("li").mouseleave(function(){$("li").text(emptyStar);$("li.current").text(fullStar).prevAll().text(fullStar).end().nextAll().text(emptyStar);});
//        li点击事件$("li").click(function(){if($(this).hasClass("current")){$(this).removeAttr("class");}else{$(this).attr("class","current").siblings().removeAttr("class");}})
//        button点击事件$("button").click(function(){var boo=false;for(var i=0;i<$("ul>li").length;i++){if($("ul>li").hasClass("current")){boo=true;}}if(boo){console.log("分数："+($("ul>li.current").index()+1)+"分");}else{return alert("您还没有选择呢！");}})})
</script>
<body>
<ul class="box"><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li>
</ul>
<div><button>提交</button>
</div>
</body>
</html>

　　效果如下：

如何用jQuery实现五星好评相关推荐

php+js 五星评价,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
php 识别图片五星好评,jquery实现五星好评方法
本文主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的d ...
php 识别图片五星好评,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
使用jQuery实现五星好评
记得给五星好评哟 jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面 ...
jQuery实现五星好评
简单实现五星评价 html代码: <div class="box"><ul><li><span class="star1&quo ...
jQuery 实现五星好评
直接上代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
jquery制作五星好评插件
效果展示: 直接上代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
JS与JQuery分别实现淘宝（五星好评特效）
我们经常用的五星好评是如何来的,主要就是三个Event 中的三个事件分别: onmouseover 指向事件 onmouseout 离开事件 onclick 点击事件代码展示: <!D ...
jQuery五星好评界面反馈界面
星星: jQuery五星好评界面反馈界面 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...

如何用jQuery实现五星好评

如何用jQuery实现五星好评相关推荐

最新文章

热门文章