实现：　　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. python文本文件，生成指定的文件格式

    import os import sys import string #在一个特定的模式打开指定的文件,获取文件句柄 def getFileIns(filePath,model): print(&qu ...

  2. node.js + mongodb

    node.js + mongodb 这次内容是结合bootstrap把登陆注册做好,还有就是express的中间件等问题. 看这篇博客之前建议先看我上篇写的那篇博客http://www.cnblogs ...

  3. Url.Content

    Url.Content了,Url是ViewPage的一个对象,它最常用的一个方法就是Content,它的功能是返回某个文件的路径.一般情况下,在使用了ASP.NET MVC后,目录结构变得有点诡异,像 ...

  4. [译]JVM运行时数据区

    (本篇文章翻译自JVM Run-Time Data Areas) 这是我阅读JVM规范的笔记,而且我画了一个图来帮助我理解. 1.每一个单独的线程(非共享的)的数据区 针对每一个单独的线程的数据区包括 ...

  5. Dev环境中的集成测试用例执行时上下文环境检查（实战）

    Dev环境中的集成测试用例执行时上下文环境检查(实战) Microsoft.NET 解决方案,项目开发必知必会. 从这篇文章开始我将分享一系列我认为在实际工作中很有必要的一些.NET项目开发的核心技术 ...

  6. Angularjs web应用

    构建兼容浏览器的Angularjs web应用 背景 随着mvvm逐渐成熟,现在使用jQuery构建web应用已经显得过时了,而且使用jQuery需要编写更多的代码去控制dom的取值.赋值.绑定事件等 ...

  7. IOC容器在框架中的应用

    IOC容器在框架中的应用 前言 在上一篇我大致的介绍了这个系列所涉及到的知识点,在本篇我打算把IOC这一块单独提取出来讲,因为IOC容器在解除框架层与层之间的耦合有着不可磨灭的作用.当然在本系列前面的 ...

  8. UML和绘图工具Visio介绍

    UML系列01之 UML和绘图工具Visio介绍 概要 UML,全称是Unified Modeling Language,中文是"统一建模语言".通俗点说,UML是一种创建模型的语 ...

  9. UVA 10391 Compound Words

    Problem E: Compound Words You are to find all the two-word compound words in a dictionary. A two-wor ...

  10. 网​址​U​R​L​中​特​殊​字​符​转​义​编​码

    网址URL中特殊字符转义编码 字符 - URL编码值 空格 - %20 " - %22 # - %23 % - %25 & - %26 ( - %28 ) - %29 + - %2B ...