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 ...
随机推荐
- .NET MVC 验证码
.NET MVC 验证码
- javaWeb中RSA的加密使用
加密算法在各个网站运用很平常,今天整理代码的时候看到了我们项目中运用了RSA加密,就了解了一下. 先简单说一下RSA加密算法原理,RSA算法基于一个十分简单的数论事实:将两个大质数相乘十分容易,但是想 ...
- Hibernate异常：Unable to locate appropriate constructor on class
异常信息:org.hibernate.hql.ast.QuerySyntaxException: Unable to locate appropriate constructor on class o ...
- rocketmq的线程服务基类
RocketMQ有很多的线程服务,这些服务都继承自抽象类ServiceThread. 这个抽象类可以单独抽出来用到我们其他的项目中来,仅仅需要修改下日志模块: /** * Licensed to th ...
- redis学习笔记——expire、pexpire、expireat、pexpireat的执行过程
这里主要讲的Redis是怎么样设置过期键的,可以算作后续"Redis过期键的删除策略"的前篇或者说预备知识. 在了解过期键问题前我们首先需要对redis的数据库和数据库键空间有一定 ...
- windows Server2012 之 IIS8.0配置安装完整教程
IIS8.0是windows Server2012自带的服务器管理系统,和以往不同,IIS8.0安装和操作都比较简单,界面很简洁,安装也很迅速.今天我们重点完整的演示下Internet Informa ...
- VLC 源代码结构
x64 sudo apt-get install -y liblua5.2-dev libmad0-dev libavutil-dev libavcodec-dev libavformat-dev l ...
- js数组高阶方法reduce经典用法代码分享
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...
- vue - 条件语句
1.与小程序不同之处一,小程序无论变量还是常亮都可以用双向绑定来解决{{}},而vue一旦双(单)引号包起来以后就失效了. 2.注意一点,切记双引号注意不要混淆哈,这里是一排双引号包单引号,那里是一排 ...
- css zoom与scale区别
转自:http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/ 1.zoom的缩放是相对于左上角的:而scale默认 ...