实现：　　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. 【强烈强烈推荐】《ORACLE PL/SQL编程详解》全原创（共八篇）--系列文章导航

    原文:[强烈强烈推荐]<ORACLE PL/SQL编程详解>全原创(共八篇)--系列文章导航 <ORACLE PL/SQL编程详解> 系列文章目录导航 ——通过知识共享树立个人 ...

  2. jquery抖动的按钮

    http://runjs.cn/detail/tyx8dbag //shakenum:抖动的次数,shakeDistance:抖动的距离 jQuery.fn.Shake = function (sha ...

  3. Xamarin.Android学习之应用程序首选项

    Xamarin.Android学习之应用程序首选项 一.前言 任何App都会存在设置界面,如果开发者利用普通控件并绑定监听事件保存设置,这一过程会非常的枯燥,而且耗时.我们可以看到Android系统的 ...

  4. C#边边角角（一）

    前言 此篇为在学习C#基础时,熟悉C#的语法和高级特性的一些小的尝试和笔记,记录一下以供分享 集合初始化器 集合必须实现System.Collections.IEnumerable接口 集合必须包含A ...

  5. 值为NULL的对象指针

    相信大家对NULL不会很陌生,NULL 是一个标准规定的宏定义,用来表示空指针常量,当一个指针变量被赋值为NULL时,表示它不再指向任何有效地址,无法在访问任何数据.在VS2012库文件stdio.h ...

  6. unique_ptr简谈

    看到文章里的同学留言说到unique_ptr,这两天看了一下cplusplus提供的reference才知道这个东西是c++11的新特性,对c++11的新特性不是很了解,花时间了解了下unique_p ...

  7. SpringMVC 国际化

    SpringMVC学习系列(8) 之 国际化 在系列(7)中我们讲了数据的格式化显示,Spring在做格式化展示的时候已经做了国际化处理,那么如何将我们网站的其它内容(如菜单.标题等)做国际化处理呢? ...

  8. Ajax运用总结B

    Jquery重新学习之八[Ajax运用总结B]   上一篇简单介绍普通javascript以及Jquery的AJAX方法,其中Jquery.ajax()是功能比较强悍的底层方法,可以更多地关注实现过程 ...

  9. 微信JS-SDK分享接口示例中jsapi_ticket.php和access_token.php说明

    关于如何使用微信JS-SDK,可以查看官方介绍说明:查看链接 在使用分享接口的过程中,查看了示例代码,其中包含两个文件jsapi_ticket.php和access_token.php,记录一下这两个 ...

  10. MongoDB：利用官方驱动改装为EF代码风格的MongoDB.Repository框架 四

    本次改动主要实现MongoGridFS功能.实现方式主要使用了MongoGridFS和MongoGridFSFileInfo两个类. 设计思路:定义一个IMongoFile接口并继承IEntity,以 ...