jQuery Tutorial: Implementing the interlaced color changing function of web pages
In web development, we often encounter the need to interlaced elements such as tables and lists. Color change is required to improve the readability and aesthetics of the page. It is very simple to use jQuery to realize the interlaced color change function of web pages. The specific implementation method will be introduced below, with code examples attached.
To use jQuery in a web page, you first need to introduce the jQuery library. It can be imported through CDN or downloaded locally. Add the following code in the
tag:<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
Next, write jQuery code to implement the interlaced color changing function of the web page. Add the following code in the <script> tag: </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">Copy after login</div></div><p>The above code uses jQuery's selector to select odd and even rows in the table or list, and sets different background colors for them, thereby achieving the effect of alternating rows of color. . The specific implementation idea is to use the :even and :odd pseudo-class selectors to select odd-numbered rows and even-numbered rows respectively, and set different styles for them. </p><h3>3. Sample code</h3><p>The following is a complete web page sample code, including the implementation code of introducing jQuery library and interlaced color changing function: </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>
