一個簡單的case ：關於各類評價網站的上星星；
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 10 <style> 11 li { 12 list-style: none; 13 float: left; 14 font-size: 36px; 15 color: yellow; 16 cursor: pointer; 17 } 18 </style> 19 <script src="jquery-1.12.4.js"></script> 20 <script> 21 var stark = "☆"; 22 var stars = "★"; 23 //鼠標進入事件改變星星的顏色為實體，讓當前的星星前面全為實體，后面為空心 24 $(function () { 25 $("li").on("mouseenter", function () { 26 $(this).text(stars).prevAll().text(stars); 27 $(this).nextAll().text(stark); 28 }); 29 30 //鼠標離開事件，讓所有的星星為空心； 31 $("li").on("mouseleave", function () { 32 $("li").text(stark); 33 //讓class 為current的 前面所有的星星為實體，后面的星星為空 34 $("li.current").text(stars).prevAll().text(stars); 35 }) 36 37 //注冊點擊事件，讓當前點擊的前面的星星全為實體； 38 $("li").on("click",function () { 39 $(this).addClass("current").siblings().removeClass("current"); 40 }) 41 42 43 44 45 46 }) 47 </script> 48 49 </head> 50 51 <body> 52 <div> 53 <ul> 54 <li>☆</li> 55 <li>☆</li> 56 <li>☆</li> 57 <li>☆</li> 58 <li>☆</li> 59 </ul> 60 </div> 61 </body> 62 63 </html>
僅供學習參考！自己平時學習的筆記。如有疑問和代碼缺陷，歡迎評論！~~~~