实现：　　1，鼠标移动到第三个星星，则一二三星星变亮，后两个变暗

　　　　　2，鼠标点击某个星星后，可以继续选择，但拿开后星星会定格住你点击的位置

<script type="text/javascript">
        //★
        $(function () {
            //由于不好获取点击的span的是何坐标，所以声明一个变量来记录点击的span标签的id
            var mark;
            $("*").css({ margin: "0px", padding: "0px;" });
            $("span")
                .css({ fontSize: "20px", color: "yellow" })
                .mouseover(function () {
                    $(this).text("★")
                        .prevAll().text("★").end()
                        .nextAll().text("☆").end()
                        .click(function () {
                            mark = $(this).attr("id");
                        })
                });
            $("div")
                 .css({ width: "100px", height: "20px", border: "1px solid black" })
                 .mouseout(function () {
                    //如果mark内有内容，则在鼠标离开div后，让星星数量变回你最近一次点击的位置
                     if (mark) {
                         $("#" + mark)
                            .text("★")
                            .prevAll().text("★").end()
                            .nextAll().text("☆");
                     }
                     //mark中没有值，意味着你没有点击任何星星，这时，让所有的星星都黯淡吧
                     else {
                         $("span").text("☆");
                     }
                 });
        });
    </script>
</head>
<body>
    <div id="div">
        <span id="1">☆</span><span id="2">☆</span><span id="3">☆</span><span id="4">☆</span><span id="5">☆</span>
    </div>
</body>

jquery代码实现简单的五星评价功能！的更多相关文章

  1. javascript代码实现简单的五星评价功能！

    <script type="text/javascript"> //★ var spans=document.getElementsByTagName("sp ...

  2. 三行Jquery代码实现简单的选项卡

    今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE h ...

  3. jQuery代码性能小细节

    选择器Selector的使用 $("#id")使用id来定位DOM元素无疑是最佳提高性能方式,因为jQuery底层将直接调用本地方法document.getElementbyId( ...

  4. jquery轮播图详解，40行代码即可简单解决。

    我在两个月以前没有接触过html,css,jquery,javascript.今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正. 可以看出来,无论是div+css布局还是jq ...

  5. 经验分享：10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  6. 10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

  7. jQuery实现的简单分页功能的详细解析

    分页功能在项目开发中不可或缺,老司机操作起来就和呼吸一样简单,新手恐怕就会吃力一些. 今天我回顾了一下具体的操作步骤,决定详细的分析一下每一步的实现目的及原理. 我们会创建一个简单的json文件来模拟 ...

  8. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  9. jQuery实现简单的五星好评

    最近一直在认真的努力工作,今天工作完成得差不多了,比较轻松点,在工作中有遇到用jq实现五星好评功能,觉得简单又有用,所以空闲时间就想分享出来. css部分: <style> .u_star ...

随机推荐

  1. DDD分层架构之领域实体（基础篇）

    DDD分层架构之领域实体(基础篇) 上一篇,我介绍了自己在DDD分层架构方面的一些感想,本文开始介绍领域层的实体,代码主要参考自<领域驱动设计C#2008实现>,另外参考了网上找到的一些示 ...

  2. C# 如何生成CHM帮助文件

    原文:C# 如何生成CHM帮助文件 前一段时间应公司要求,让我开发一个数据库字段信息CHM帮助文件生成软件.结果当时我就二了,这个东西我只用过,不知道咋做啊.没想到老大很随意说一句:"没事, ...

  3. __declspec(novtable)keyword

    __declspec (novtable )keyword,表示这个类不生成虚函数表.可是继承类不影响(无论基类是否使用了keyword). 不使用此keyword.类在生成对象时构造函数和析构函数多 ...

  4. TODOList项目

    [ 爱上Swift]十二期:TODOList项目   好久没有写Swift甚是想念,Swift,Xcode都比较稳定了写个程序熟悉一下,当然时间原因都是小Demo,废话不多说先上图. 下面是跑起来之后 ...

  5. 使用winform控件注意线程绘制界面冲突

    在用.NET Framework框架的WinForm构建GUI程序界面时,如果要在控件的事件响应函数中改变控件的状态,例如:某个按钮上的文本原先叫“打开”,单击之后按钮上的文本显示“关闭”,初学者往往 ...

  6. 读书笔记—CLR via C#字符串及文本

    前言 这本书这几年零零散散读过两三遍了,作为经典书籍,应该重复读反复读,既然我现在开始写博了,我也准备把以前觉得经典的好书重读细读一遍,并且将笔记整理到博客中,好记性不如烂笔头,同时也在写的过程中也可 ...

  7. OAuth简介及sina微博开放平台

     OAuth简介及sina微博开放平台 2010-10-26 13:15:25 标签:新浪 sina 微博 OAuth 开放平台 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者 ...

  8. 记录OC学习的一点一滴（二）

    NSString 基础练习: 代码: // // main.m // NSStringDemo01 // // Created by Levi on 14-3-14. // Copyright (c) ...

  9. .NET编程规范

    .NET开发编程规范 第1章 程序的版式 版式虽然不会影响程序的功能,但会影响可读性.程序的版式追求清晰.美观,是程序风格的重要构成因素. 可以把程序的版式比喻为"书法".好的&q ...

  10. namespace 的作用

    在写CPP的时候,常常要写using namespace std;这么一句话,到底有什么用呢? #include <iostream> namespace first { ; } name ...