jQuery教學：實作網頁隔行變色功能
在網頁開發中，常常會遇到需要將表格、清單等元素隔行變色的需求，以提高頁面的可讀性和美觀性。而利用jQuery實作網頁隔行變色功能非常簡單，以下將介紹具體的實作方法，並附上程式碼範例。
在網頁中使用jQuery，首先需要引入jQuery庫。可以透過CDN引入，也可以下載本地引入。在
標籤中加入以下程式碼：<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
接下來，編寫jQuery程式碼實作網頁隔行變色功能。在<script>標籤中加入以下程式碼：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$(document).ready(function(){ // 选取需要进行隔行变色的元素，例如表格中的每一行 $("table tr:even").css("background-color", "#f5f5f5"); $("table tr:odd").css("background-color", "#ffffff"); // 或者选取列表中的每个列表项 $("ul li:even").css("background-color", "#f5f5f5"); $("ul li:odd").css("background-color", "#ffffff"); });</pre><div class="contentsignin">登入後複製</div></div><p>以上程式碼使用jQuery的選擇器選取表格或清單中的奇偶行，並為其設定不同的背景顏色，從而實現了隔行變色的效果。具體的實作想法是利用:even和:odd偽類選擇器分別選取奇數行和偶數行，並為其設定不同的樣式。 </p><h3>3. 範例程式碼</h3><p>以下為完整的網頁範例程式碼，包含了引入jQuery庫和隔行變色功能的實作程式碼：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色示例</title> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #dddddd; padding: 8px; text-align: center; } </style> </head> <body> <h2>隔行变色示例</h2> <table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>小明</td> <td>18</td> </tr> <tr> <td>小红</td> <td>20</td> </tr> <tr> <td>小亮</td> <td>22</td> </tr> <tr> <td>小刚</td> <td>25</td> </tr> </table> <script> $(document).ready(function(){ $("table tr:even").css("background-color", "#f5f5f5"); $("table tr:odd").css("background-color", "#ffffff"); }); </script>
