jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。

　　Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。

　　接下来，我使用jQuery实现一个常见的五星好评功能。下面的页面中，我引用了前端的jQuery和bootstrap框架，读者可以从网上下载这些框架资源。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>五星好评</title>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <script src="jquery-1.11.1.js"></script>

</head>

<!--设置样式-->

<style>

    ul{

        list-style-type: none;

    }

    li{

        float: left;

        margin-left: 15px;

        font-size: 60px;

        font-family: "simsun";

        cursor: pointer;

    }

    div{

        clear: both;

    }

    button{

        margin-left: 70px;

        font-size:30px;

    }

</style>

<!--JS代码-->

<script>

//    入口函数

    $(function(){

//        设置两个状态的星星

        var emptyStar="☆";

        var fullStar="★";

//        li鼠标移入事件

        $("li").mouseenter(function(){

            $(this).text(fullStar).prevAll().text(fullStar).end().nextAll().text(emptyStar);

        });

//        li鼠标离开事件

        $("li").mouseleave(function(){

            $("li").text(emptyStar);

            $("li.current").text(fullStar).prevAll().text(fullStar).end().nextAll().text(emptyStar);

        });

//        li点击事件

        $("li").click(function(){

            if($(this).hasClass("current")){

                $(this).removeAttr("class");

            }else{

                $(this).attr("class","current").siblings().removeAttr("class");

            }

        })

//        button点击事件

        $("button").click(function(){

            var boo=false;

            for(var i=0;i<$("ul>li").length;i++){

                if($("ul>li").hasClass("current")){

                    boo=true;

                }

            }

            if(boo){

                console.log("分数："+($("ul>li.current").index()+1)+"分");

            }else{

                return alert("您还没有选择呢！");

            }

        })

    })

</script>

<body>

<ul class="box">

    <li>☆</li>

    <li>☆</li>

    <li>☆</li>

    <li>☆</li>

    <li>☆</li>

</ul>

<div>

    <button>提交</button>

</div>

</body>

</html>

　　效果如下：

如何用jQuery实现五星好评的更多相关文章

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

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

  2. 如何用jquery实现实时监控浏览器宽度

    如何用jquery实现实时监控浏览器宽度 2013-06-05 14:36匿名 | 浏览 3121 次 $(window).width();这代码只能获取浏览器刷新时的那一刻的宽度,如何才能达到实时获 ...

  3. 如何用jQuery获得select的值

    如何用jQuery获得select的值,在网上找了看了一下,下面将总结一下: 1.获取第一个option的值        $('#test option:first').val(); 2.最后一个o ...

  4. js五星好评

    一般我们在一些购物以及美食的网站都会看到五星好评之类的,一下是使用js制作的五星好评! <!DOCTYPE html> <html lang="en"> & ...

  5. 如何用jquery获取input输入框中的值？

    如何用jquery获取<input id="test" name="test" type="text"/>中输入的值? $(&q ...

  6. 亲，麻烦给个五星好评！—RatingBar

    引言 上一篇的CheckBox已经让大家越来越接近实战演练了,本章我们继续分享干货给大家,今天介绍一个实用的UI控件RatingBar(星级评分条),对于使用过电商APP(某东,某宝等)的小伙伴们来说 ...

  7. 如何用jquery操作table的方法

    今天我在做你约我吧交友www.niyuewo.com网项目时遇到一个问题,就是如何用qjuery控制table的添加.编辑与删除,经过网上查资料发现用jquery很容易实现,在此整理下来供大家参考: ...

  8. js 事件冒泡是什么如何用jquery阻止事件冒泡

    什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈       (1)什么是事件起泡 首先你要明 ...

  9. 事件冒泡是什么如何用jquery阻止事件冒泡

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

随机推荐

  1. java 中 “文件” 和 “流” 的简单分析

    java 中 FIle 和 流的简单分析 File类 简单File 常用方法 创建一个File 对象,检验文件是否存在,若不存在就创建,然后对File的类的这部分操作进行演示,如文件的名称.大小等 / ...

  2. 鼠标相关操作（Cursor类及相关API）

    Cursor.visible:属性,显示或者隐藏鼠标.  Cursor.lockState = CursorLockMode.Locked:锁定鼠标到游戏窗口的中心. (CursorLockMode: ...

  3. SQL---存储过程---存储过程编写案例

    存储过程的创建和调用演示 1.不带参数的存储过程的创建 create procedure PRO_With_No_Param as Begin --begin可省略 select * from sc ...

  4. ASP.NET没有魔法——ASP.NET Identity 的“多重”身份验证

    ASP.NET Identity除了提供基于Cookie的身份验证外,还提供了一些高级功能,如多次输入错误账户信息后会锁定用户禁止登录.集成第三方验证.账户的二次验证等,并且ASP.NET MVC的默 ...

  5. Spring Boot 的Maven多模块开发web项目使用外部容器进行部署

    Spring Boot中自带有Tomcat容器,因此Spring Boot项目只需要运行main函数,就可以运行,但是以往的web项目,我们习惯于使用自己安装的Tomcat运行或者使用Tomcat.J ...

  6. Javascript 常用类型检测

    1.判断变量是否为数组的数据类型? 方法一 :判断其是否具有"数组性质",如slice()方法.可自己给该变量定义slice方法,故有时会失效. 方法二 :obj instance ...

  7. UITextField的使用小技巧

    [tf setValue:[UIColor redColor] forKeyPath:@"_placeholderLabel.textColor"];//修改placeHolder ...

  8. Java快速扫盲指南

    文章转自:https://segmentfault.com/a/1190000004817465#articleHeader22 JDK,JRE和 JVM 的区别 JVM:java 虚拟机,负责将编译 ...

  9. 51Nod 1256 乘法逆元 扩展欧几里得

    基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 给出2个数M和N(M < N),且M与N互质,找出一个数K满足0 < K < N且K * M % N = ...

  10. Springboot读取配置文件及自定义配置文件

    1.创建maven工程,在pom文件中添加依赖 <parent> <groupId>org.springframework.boot</groupId> <a ...