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>
效果如下：
