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. 第一章：关于Ehcache

    PDF官方文档:http://www.ehcache.org/generated/2.10.4/pdf/About_Ehcache.pdf 1.什么是Ehcache? Ehcache是一种开源的基于标 ...

  2. Hibernate级联之一对多和inverse解析

    hibernate的级联可以说是hibernate最重要的部分,只有深入了解了级联的特性与用法,才能运用自如. 这次讨论一对多的情况,所以就使用博客项目的用户表和博客表作为示例,来一起学习hibern ...

  3. redux中间件的原理——从懵逼到恍然大悟

    前言react已经出来很久了,其生态圈之庞大,一锅炖不下!各种react-xx,已让我们不堪重负,github上随便一个demo,引入的模块至少都是五指之数+.看着头疼,嚼之无味…….在此建议新学者, ...

  4. lua luaconf解读

    定义了一些跟平台相关的宏,明确指出一些不推荐使用的函数,如lua_cpcall.lua_strlen

  5. mysql插入测试数据

    使用php生成sql文件,然后再倒入mysql. 1.编写php代码 <?php set_time_limit(0); ini_set("memory_limit", &qu ...

  6. IK-Analyzer(5.3.1)动态配置自定义词典

    参考文献:http://blog.csdn.net/fatpanda/article/details/37911079 jar包: IK-Analyzer-extra-5.3.1.jar IKAnal ...

  7. linux磁盘管理系列-LVM的使用

    LVM是什么 LVM是Linux操作系统的逻辑卷管理器. 现在有两个Linux版本的LVM,分别是 LVM1,LVM2.LVM1是一种已经被认为稳定了几年的成熟产品,LVM2 是最新最好的LVM版本. ...

  8. null id in entry (don't flush the Session after an exception occurs) 解决方法

    最近在学习基于ssh的注解的系统,然后在实现往数据库增加记录时可以增加第一个,第二个就报错,在网上查了很多资料,大多都是 该异常信息是在提示我们没有为数据中的非空字段设置值. 然后就一直没有明白 明明 ...

  9. Wannafly模拟赛5 A Split 暴力 二分加速

    你有一个大小为

  10. phpstorm快捷键记录

    快捷键记录 Ctrl + N 按类名查找Ctrl + Shift + N 按文件名查找,快速查找文件Ctrl + Shift+Alt+N 根据函数名查找Ctrl + F 当前文件查找Ctrl + Sh ...