如何用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)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
随机推荐
- JDK自带VM分析工具jps，jstat，jmap，jconsole
一.概述 SUN 的JDK中的几个工具,非常好用.秉承着有免费,不用商用的原则.以下简单介绍一下这几种工具.(注:本文章下的所有工具都存在JDK5.0以上版本的工具集里,同javac一样,不须特意安装 ...
- SharePoint 路在何方？
听着老版<西游记>熟悉的片头曲,想着九寨沟取景的地点现在已然不在了,看着自己的现状,真是五味杂陈.从2010年至今,接触SharePoint已经是第七个年头了,不知不觉都已经成为习惯.从2 ...
- eclipse环境下基于tomcat-7.0.82构建struts2项目
开山第一篇,毕业4个月目前接触最多的框架还是s2sh框架.... 具备完整的开发环境下,在eclipse下启动tomcat出现如下所示画面表示环境构建成功. 第一步:创建web项目,截图如下 此页面只 ...
- redis复制原理和应用
1.前言 说到分布式高可用,必然少不了复制,一来是为了做个冗余备份防止数据丢失,二来还可以达到分流来提高性能的目的.基本架构: 下面用M表示Master(主服务器),S表示Slave(从服务器),话不 ...
- 变位词(0029)-swustoj
变位词(0029)水题 变位词如果两个单词的组成字母完全相同,只是字母的排列顺序不一样,则它们就是变位词,两个单词相同也被认为是变位词.如tea 与eat , nic 与cin, ddc与dcd, a ...
- 浅谈IM(InstantMessaging) 即时通讯/实时传讯【理论篇】
一.IM简要概述 IM InstantMessaging(即时通讯,实时传讯)的缩写是IM,互动百科大致解释是一种可以让使用者在网络上建立某种私人聊天(chatroom)的实时通讯服务. 大部 ...
- struts2 action接收请求参数和类型转换
1,action接收请求参数 在struts2中action是什么?(struts2是一个mvc框架) V:jsp M:action C:action ...
- 实时同步rsync+inotify
实时同步rsync+inotify 原创博文http://www.cnblogs.com/elvi/p/7658071.html #linux同步 #实时同步rsync+inotify,双向同步ino ...
- Spring MVC 学习总结（九）——Spring MVC实现RESTful与JSON（Spring MVC为前端提供服务）
很多时候前端都需要调用后台服务实现交互功能,常见的数据交换格式多是JSON或XML,这里主要讲解Spring MVC为前端提供JSON格式的数据并实现与前台交互.RESTful则是一种软件架构风格.设 ...
- C# 使用Task实现任务超时，多任务一起执行
简介:充分使用Task的异步功能代码实现:1.实现了任务超时 退出任务 2.多个任务一起执行 /// <summary> ///做事 需要 ms秒 才能完成 / ...