如何用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)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
随机推荐
- java 中 “文件” 和 “流” 的简单分析
java 中 FIle 和 流的简单分析 File类 简单File 常用方法 创建一个File 对象,检验文件是否存在,若不存在就创建,然后对File的类的这部分操作进行演示,如文件的名称.大小等 / ...
- 鼠标相关操作(Cursor类及相关API)
Cursor.visible:属性,显示或者隐藏鼠标. Cursor.lockState = CursorLockMode.Locked:锁定鼠标到游戏窗口的中心. (CursorLockMode: ...
- SQL---存储过程---存储过程编写案例
存储过程的创建和调用演示 1.不带参数的存储过程的创建 create procedure PRO_With_No_Param as Begin --begin可省略 select * from sc ...
- ASP.NET没有魔法——ASP.NET Identity 的“多重”身份验证
ASP.NET Identity除了提供基于Cookie的身份验证外,还提供了一些高级功能,如多次输入错误账户信息后会锁定用户禁止登录.集成第三方验证.账户的二次验证等,并且ASP.NET MVC的默 ...
- Spring Boot 的Maven多模块开发web项目使用外部容器进行部署
Spring Boot中自带有Tomcat容器,因此Spring Boot项目只需要运行main函数,就可以运行,但是以往的web项目,我们习惯于使用自己安装的Tomcat运行或者使用Tomcat.J ...
- Javascript 常用类型检测
1.判断变量是否为数组的数据类型? 方法一 :判断其是否具有"数组性质",如slice()方法.可自己给该变量定义slice方法,故有时会失效. 方法二 :obj instance ...
- UITextField的使用小技巧
[tf setValue:[UIColor redColor] forKeyPath:@"_placeholderLabel.textColor"];//修改placeHolder ...
- Java快速扫盲指南
文章转自:https://segmentfault.com/a/1190000004817465#articleHeader22 JDK,JRE和 JVM 的区别 JVM:java 虚拟机,负责将编译 ...
- 51Nod 1256 乘法逆元 扩展欧几里得
基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 给出2个数M和N(M < N),且M与N互质,找出一个数K满足0 < K < N且K * M % N = ...
- Springboot读取配置文件及自定义配置文件
1.创建maven工程,在pom文件中添加依赖 <parent> <groupId>org.springframework.boot</groupId> <a ...