此版本基於原生jQuery寫法 （另一版本為Javascript版本，請前往Javascript分類中檢視。）

　　嗨~ 來到這裡相信大家已經看過Javascript版本的寫法了。來到這才發現什麼叫做沒有對比就沒有傷害，同時也體現了jQuery的特性：寫的少做得多。

　　功能：與Javascript版本實現的功能一樣，只是寫法不一樣。滑鼠懸浮表情，在指定區域顯示當前滑鼠的表情。

　　注：由於排版不一樣（其實也差不了多少，排版只是位置不一樣，也比較簡單。），所以效果圖也不一樣，但是這都不礙事，排版的事都是自己決定的哈！（可以自己豐富一下，練練手。）

　　直接來個效果看看先

既然效果有了，直接丟出程式碼

實現步驟：

1、html程式碼：

 1 <div class="container">
 2         <!-- 展示區域 -->
 3         <div class="show">
 4           <img src="" alt="" id="showImg">
 5         </div>
 6         <!-- 表情區 -->
 7         <div class="content">
 8           <ul class="ul">
 9
 
             <!-- 動態建立 -->
10             <!-- <li>
11               <img src="./face/1.gif" alt="">
12             </li> -->
13           </ul>
14         </div>
15       </div>

2、css程式碼：

 1 .container{
 2           width: 800px;
 3           height: 600px;
 4
 
           border: 1px solid #000;
 5           position: relative;
 6         }
 7         .show{
 8           width: 50px;
 9           height: 50px;
10           line-height: 50px;
11           border: 1px solid #000;
12           margin: 50px auto;
13           text-align: center;
14           position: absolute;
15           right: 0;
16           bottom: 0;
17         }
18     
19         .show img{
20           vertical-align: middle;
21         }
22         .content{
23           width: 800px;
24           height: 400px;
25           border: 1px solid #000;
26           margin-left: -1px;
27           margin-right: -1px;
28         }
29     
30         .content ul{
31           width: 720px;
32           padding: 0;
33           margin: 50px 20px;
34           overflow: hidden;
35           /* background-color: #f2f2f2; */
36         }
37         .content li{
38           display: block;
39           width: 25px;
40           height: 25px;
41           border: 1px solid #000;
42           float: left;
43           margin-left: 8px;
44           margin-right: 10px;
45           margin-bottom: 5px;
46           cursor: pointer;
47         }
48         .content li img{
49             width: 25px;
50             height: 25px;
51         }

3、指令碼部分：

 1 <script src="../jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>  // 引入jQuery檔案
 2 <script type="text/javascript">
 3     // 
 4     $(function(){
 5         var str = "";  // 建立Li
 6         for(var i = 0 ; i < 75 ; i++){
 7             str += '<li><img src="../face/'+(i+1)+'.gif" /></li>';
 8         }
 9         $(".ul").append(str);  // 新增 li 到 ul 中
10 
11         $(".content .ul li").mouseenter(function(){  // 給每個li新增時間
12             var index = $(this).index();           // 獲取每個li的下標
13             $(".show img").attr("src","../face/"+(index+1)+".gif");  // 設定圖片的路徑
14         }) 
15     })
16 </script>

總結：對比Javascript版本的就知道，jQuery寫的程式碼就10幾行，就能實現同樣的功能。其實實現的步驟是一樣的，只是jq幫我們已經封裝好方法，直接呼叫就能實現，而Javascript就需要自己一步一步寫這個過程。所以大家只需要看需求就可以，根據需求經過考慮用哪種方式實現是比較優的，就完事了。

需要回顧Javascript版本，請前往Javascript分類中檢視喲~

文章到此結束。。。