如何用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实现五星好评的更多相关文章
- jQuery实现简单的五星好评
最近一直在认真的努力工作,今天工作完成得差不多了,比较轻松点,在工作中有遇到用jq实现五星好评功能,觉得简单又有用,所以空闲时间就想分享出来. css部分: <style> .u_star ...
- 如何用jquery实现实时监控浏览器宽度
如何用jquery实现实时监控浏览器宽度 2013-06-05 14:36匿名 | 浏览 3121 次 $(window).width();这代码只能获取浏览器刷新时的那一刻的宽度,如何才能达到实时获 ...
- 如何用jQuery获得select的值
如何用jQuery获得select的值,在网上找了看了一下,下面将总结一下: 1.获取第一个option的值 $('#test option:first').val(); 2.最后一个o ...
- js五星好评
一般我们在一些购物以及美食的网站都会看到五星好评之类的,一下是使用js制作的五星好评! <!DOCTYPE html> <html lang="en"> & ...
- 如何用jquery获取input输入框中的值？
如何用jquery获取<input id="test" name="test" type="text"/>中输入的值? $(&q ...
- 亲，麻烦给个五星好评！—RatingBar
引言 上一篇的CheckBox已经让大家越来越接近实战演练了,本章我们继续分享干货给大家,今天介绍一个实用的UI控件RatingBar(星级评分条),对于使用过电商APP(某东,某宝等)的小伙伴们来说 ...
- 如何用jquery操作table的方法
今天我在做你约我吧交友www.niyuewo.com网项目时遇到一个问题,就是如何用qjuery控制table的添加.编辑与删除,经过网上查资料发现用jquery很容易实现,在此整理下来供大家参考: ...
- js 事件冒泡是什么如何用jquery阻止事件冒泡
什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈 (1)什么是事件起泡 首先你要明 ...
- 事件冒泡是什么如何用jquery阻止事件冒泡
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
随机推荐
- 【SpringMVC】使用Myeclipse创建SpringMVC项目【超详细教程】
之前一直是使用Eclipse创建Web项目,用IDEA和MyEclipse的创建SpringMVC项目的时候时不时会遇到一些问题,这里把这个过程记录一下,希望能帮助到那些有需要的朋友.我是用的是MyE ...
- Win32API起始处的mov edi, edi与用户空间InlineHook
在x86平台上,无论是在调试器中跟到系统DLL中时,还是反汇编某个系统DLL时,经常会发现很多API的第一条汇编指令都是mov edi, edi.根据经验来讲,C函数的汇编形式,应该是首先push e ...
- Redis 持久化之RDB和AOP
Redis 持久化之RDB和AOP Redis 有两种持久化方案,RDB (Redis DataBase)和 AOP (Append Only File).如果你先快速了解和使用RDB和AOP,可以直 ...
- 【原创】python基于大数据现实双色球预测
前提准备:利用sql筛选出每个球出现概率最高的前5个数 原理:先爬出所有的历史数据,然后模拟摇奖机出球的机制并大量模拟计算,直到出现列表中的某一个数后即停 注意事项:由于计算过程数据量很大,需要加入内 ...
- MySQL管理员珍藏：十大必备工具盘点
作者:dongdongzzcs 第1页: [IT168 专稿]本文的作者Daniel Nichter是MySQL工具的开发者,他为MySQL管理员推荐了十款必备工具.以下是全文内容: MySQL是一套 ...
- 导弹拦截(pascal)
导弹拦截 [问题描述] 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕 ...
- 【new File(String Path)加载资源问题】
2017-12-17 15:07:38 [原创-wx] 一.我们在用IO流加载资源的时候,创建文件资源 1 File file = New File("String Path" ...
- 》》webpack打包成的文件
/******/(function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installed ...
- 》》3D轮播
* { margin: 0; padding: 0; } .slide { position: absolute; top: calc(50% - 150px); left: calc(50% - 3 ...
- Linux 账号管理与 ACL 权限配置
要登陆 Linux 系统一定要有账号与口令才行,否则怎么登陆,您说是吧?不过, 不同的使用者应该要拥有不同的权限才行吧?我们还可以透过 user/group 的特殊权限配置, 来规范出不同的群组开发项 ...