Jquery学习笔记（2）--五角星评分
网购五星评分模拟：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
</div>
</body>
<script type="text/javascript">
var isclick = 0;
var clicknum = 0;
//鼠标滑过，编程黑五角星
$('span').mouseover(function(){
// if (isclick==0) {
var num = $(this).index();
// alert(num);
$('span').each(function(){
if ($(this).index()<=num) {
$(this).html('★');
}else{
if ($(this).index()>clicknum) {
$(this).html('☆');
}
}
});
// }
});
//鼠标离开div，变回空心五角星
$('div').mouseleave(function(){
if (isclick==0) {
$('span').each(function(){
if ($(this).index()>clicknum) {}
$(this).html('☆');
});
}else{
$('span').each(function(){
if ($(this).index()>clicknum) {
$(this).html('☆');
}
});
}
});
//鼠标点击，固定黑五角星，并且重新点击后重新固定，离开后不变
$('span').click(function(){
isclick = 1;
clicknum = $(this).index();
$('span').each(function(){
if ($(this).index()<=clicknum) {
$(this).html('★');
}else{
$(this).html('☆');
}
});
});
</script>
</html>
Jquery学习笔记（2）--五角星评分的更多相关文章
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之插件开发（4）
jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
- jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
随机推荐
- 使用Fabric模块实现自动化运维
一.安装软件 简介:Fabric是基于Python实现的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包括:命令执行.文件上 ...
- pthread_getspecific和pthread_setspecific使用
pthread_getpecific和pthread_setspecific实现同一个线程中不同函数间共享数据的一种很好的方式. #more test.c /* * ================= ...
- 实现自动文本摘要（python，java）
参考资料:http://www.ruanyifeng.com/blog/2013/03/automatic_summarization.html http://joshbohde.com/blog/d ...
- intellij idea使用maven本地仓库及修改本地仓库路径
什么maven本地仓库,默认是用户目录下的.m2/repository这个文件. idea是自带maven插件的不用我们再,怎么把依赖包下载到我们的本地仓库呢?一般是idea默认了路径,而且idea是 ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-为什么没有自动识别成标准FBD功能块
新建一个项目,是不会自动把FBD对应名称的模块识别成标准功能块的 你需要引入相应的类库重新输入FBD 然后才会自动生成 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: ht ...
- 【转】spring MVC入门示例(hello world demo)
部分内容来自网络:<第二章 Spring MVC入门 —— 跟开涛学SpringMVC > 1. Spring MVC介绍 Spring Web MVC是一种基于Java的实现了Web M ...
- C++ 代码风格准则：POD
作者:一根筋的傻瓜链接:https://www.zhihu.com/question/36379130/answer/69853366来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...
- Python 入门demo第一篇
#-*- coding: UTF-8 -*- 2.7版本对中文的要求 import uuid import socket def get_mac_address(): mac=uuid.UUID(in ...
- Struts2中防止表单重复提交，global-results定义全局结果处理
1.在表单中加入<s:token/>标签 2.在动作类中加入token的拦截器 <!--如果单单写 name="token" 会丧失 defaultStack 拦 ...
- Linux命令-网络命令:lastlog
last 显示所有用户最后登录信息(会显示系统用户) last -u 只看某一个用户wangyunpeng的最后登录信息 last -u 查看系统用户root的最后登录信息 root用户的ID是0.从 ...