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 ...
随机推荐
- zabbix3.2 报错 Database error
一.Database errorThe frontend does not match Zabbix database. Current database version (mandatory/opt ...
- Razor语法(三)
1.定义变量 定义变量或声明常量必须在代码体内,代码体以'@{'开头,以'}'结束,其中定义变量以'var'进行声明.代码体内每行以';'做为结束标识. @{ var i = 10; ...
- 组件prop检验
Vue.js中的父子组件相信都已经是大家很常用到的功能了, 父组件通过props属性向子组件传值子组件通过自定义事件向父组件传值 那么我们怎么去校验props属性中的类型呢 笔者列出以下几种方法: 1 ...
- 请远离include_once和require_once[转]
来自:http://www.poluoluo.com/jzxy/201306/216921.html 尽量使用include, 而不是include_once, 理由是 include_once需要查 ...
- 我的PHPMailer_v5.1 使用
<?php /** * Simple example script using PHPMailer with exceptions enabled * @package phpmailer * ...
- python安装libxml2和pyquery
安装.net framework 4.5.2 https://www.microsoft.com/zh-CN/download/details.aspx?id=42641 安装C编译器 python2 ...
- mac 查看目前哪些进程占用哪些端口
lsof -nP | grep TCP | grep LISTEN lsof -i :TCP
- 两名技术人员，历经8小时Piranha Games成功集成Xsolla
w=580&h=304" alt="" width="580" height="304" style="max- ...
- win10下Visual Studio 2015，C++ x64编译zmq
PS.本人编译过程踩得坑,记录备忘 下载:(1)官网:http://zeromq.org/intro:get-the-software,有简明的编译方式,cmake的,这里不多赘述 (2)到GitHu ...
- [转]SIGHUP与终端控制
SIGHUP信号与控制终端 UNIX中进程组织结构为 session (会话)包含一个前台进程组及一个或多个后台进程组,一个进程组包含多个进程.一个session可能会有一个session首进程, ...