console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: #ff3100;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
    <script>
        $(function () {
            var star_none = '☆'; // 空心五角星
            var star_sel = '★'; // 实心五角星
        $(".comment li").on("mouseenter",function(){
            $(this).text(star_sel).prevAll("li").text(star_sel);
             $(this).nextAll("li").text(star_none);

        })
        $(".comment li").on("mouseleave",function(){
            if($(".comment li").hasClass("current")){
                $(".current").text(star_sel).prevAll("li").text(star_sel);
                $(".current").nextAll("li").text(star_none);
            }else{
                 $(".comment li").text(star_none);
            }
        })
        $(".comment li").on("click",function(){
           $(this).addClass("current").siblings("li").removeClass("current");
        })
        });
    </script>
</head>
<body>
<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
</body>
</html>
本项目引用的自定义外部资源

jquery.min.js