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疑难杂症】有return的情况下try catch finally的执行顺序

    有这样一个问题,异常处理大家应该都不陌生,类似如下代码: public class Test { public static void main(String[] args) { int d1 = 0 ...

  2. vue2.0与实战开发

    慕课网实战 百度云 web前端实战: Node.js入门到企业Web开发中的应用 Web前端性能优化 让你的页面飞起来 前端跳槽面试必备技巧 前端JavaScript面试技巧全套 node.JS 线上 ...

  3. mysql常用的操作

    数据库的常用操作:create database db1; #创建数据库show databases; #查看所有数据库show create database db1;#查看创建的指定数据库alte ...

  4. Mybatis分页插件PageHelper使用

    一． Mybatis分页插件PageHelper使用  1.不使用插件如何分页: 使用mybatis实现: 1)接口: List<Student> selectStudent(Map< ...

  5. 实践作业3DAY1

    今天,老师又布置了新的学习任务,关于白盒测试.感觉黑盒测试,我们用的比较多,白盒测试就相对陌生了.上课的时候老师虽然也进行了一定的点拨,外加我们学习了SPOC视频,但是并没有看到什么具体的项目,所以实 ...

  6. lufylegend练习（1）帧速率

    近期发现一个HTML开源游戏引擎,感觉还不错http://lufylegend.com/ 可是没有基础的同学.看起来费劲.所以打算边学边记笔记,说明都在凝视中 <!DOCTYPE html> ...

  7. String.prototype.trim

    /*内置对象添加方法:String.prototype.trim(给String添加一个trim方法) *^这个是以什么什么开头 *$这个是以什么什么结尾 *'/s是String /d是数字' *re ...

  8. ajax_get/post_两级联动

    使用ajax实现菜单联动 通常情况下,GET请求用于从服务器上获取数据,POST请求用于向服务器发送数据. 需求:选择第一个下拉框的值,根据第一个下拉框的值显示第二个下拉框的值 首先使用GET方式. ...

  9. java两种动态代理方式的理解

    要理解动态代理,不妨先来看看一个静态代理的例子. 一.静态代理 以一个电商项目的例子来说明问题,比如我定义了一个订单的接口IOrder,其中有一个方法时delivery,代码如下. package c ...

  10. java注解细节

    现在很多框架都使用注解了,典型的像Spring里面就可以看到大量的注解,比如@Service,@Controller这一类的都是注解.注解Annotation是java一项很重要的功能.下面就来整理一 ...