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>
