在前端開發中,我們經常會使用jQuery等類庫來操作HTML文檔。在使用Freemarker模板引擎時,我們也可以很方便地利用jQuery來操作HTML文檔,使得我們的頁面更加動態。
下面是一個簡單的實例,使用Freemarker和jQuery實現一個點擊按鈕切換背景色的效果。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Freemarker&jQuery Demo</title> <!-- 引入jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> /* CSS樣式 */ .box { width: 200px; height: 200px; background-color: #00bcd4; } </style> </head> <body> <div class="box"></div> <button id="changeColor">Change Color</button> <!-- 利用jQuery實現點擊按鈕改變背景色 --> <script> $(document).ready(function(){ $("#changeColor").click(function(){ $(".box").css("background-color","#009688"); }); }); </script> </body> </html>
以上代碼中,我們引入了jQuery,并在頁面加載完成后,通過jQuery給按鈕綁定了一個點擊事件,使得每次點擊按鈕時,利用jQuery從文檔中找到class為"box"的元素,以及訪問其css屬性,改變其背景顏色為"#009688"。
綜上所述,Freemarker和jQuery的結合可以讓我們更加方便地操縱頁面,實現更多動態效果。