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 ...
随机推荐
- [转]SSIS ConnectionManager.ConnectionString Property
本文转自:http://msdn.microsoft.com/en-us/library/microsoft.sqlserver.dts.runtime.connectionmanager.conne ...
- iOS:第三方框架MJPhotoBrowser图片浏览器的使用
介绍:MJPhotoBrowser这个第三方库是MJ老师封装的一套用来浏览图片的浏览器,可是是本地图片.网络图片.gif图片等,其也依赖了SDWebImage.SVProgressHUD.YLGIFI ...
- Oracle之数据库安全
密码破解,大部分其实是通过枚举的方式,列出可能的密码,然后逐个尝试,直到找到真正的密码,有时也叫暴力破解.接下来,我们将举几个密码破解的例子. n 密码破解例1--- OrakelCrackert ...
- php上传漏洞获root权限
首先用nmap检测一下目标网站的系统服务和一些端口banner的信息. Nmap -v -sT -sV -O -P0 -oX test.xml ***.kr 21/tcp open ...
- JDK 7中的函数式编程思想[转载]
原文作者的观点是Lambda表达式一定会包含在JDK 7中,而全文也着重介绍了这方面的知识,作者认为函数式编程的概念也将出现在JDK 7中. Lambda表达式 Lambda表达式并不是什么新概念,自 ...
- 003java面试笔记——【java基础篇】从团八百失败面试总结的java面试题(未完待续)
8.java 线程 1)线程概念,线程与进程 线程:线程是“进程”中某个单一顺序的控制流.也被称为轻量进程.线程是进程中的实体,一个进程可以拥有多个线程,一个线程必须有一个父进程.线 ...
- 核弹级的git指令 git filter-branch
比如一不小心把node模块目录加入git仓库了,导致仓库很大 : git filter-branch --index-filter 'git rm --cached --ignore-unmatc ...
- GDB+GdbServer: ARM程序调试
arm-linux-gdb+gdbserver环境搭建以及远程调试 GDB+GdbServer: ARM程序调试 嵌入式arm linux环境中gdb+gdbserver调试 建立交叉调试环境 编译过 ...
- 解决树莓派新内核无法使用18B20和没有声音的问题
现在新版的树莓派内核由于为了兼容树莓派2和树莓派B+等以前的版本,采用了和原来不同的内核运行方式,使用了设备树的方式,更加灵活.但是由于可能不习惯这样的方式以及没太多相关这方面的介绍,导致很多用户更新 ...
- C++从零实现简单深度神经网络（基于OpenCV）
代码地址如下:http://www.demodashi.com/demo/11138.html 一.准备工作 需要准备什么环境 需要安装有Visual Studio并且配置了OpenCV.能够使用Op ...