在前端開發中，使用jQuery是非常常見的。而在后端開發中，使用Freemarker作為模板引擎也是非常常見的。怎么樣才能將它們進行整合呢？下面就為大家講解一下。

首先，我們需要在Freemarker中引入jQuery。我們可以通過以下代碼實現：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

在引入jQuery之后，還需要進行一些配置。我們可以在項目中新建一個js文件，命名為config.js，然后添加以下代碼：

$(function() {
// 頁面加載完成之后執行
// 自定義模板標記前綴和后綴
$.extend($.tmpl.tag, {
prefix: '[[',  // 前綴
suffix: ']]'   // 后綴
});
// 避免與freemarker的變量沖突
$.expr[':'].data = function(elem, index, meta)  {  
return $(elem).attr('data-' + meta[3]) !== undefined;  
}; 
// 解決IE瀏覽器中兼容問題
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(elt /*, from*/)
{
let len = this.length >>>0;
let from = Number(arguments[1]) || 0;
from = (from< 0)
? Math.ceil(from)
: Math.floor(from);
if (from< 0)
from += len;
for (; from< len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
});

然后，在Freemarker中使用jQuery的時候，我們可以通過以下方式進行操作：

<#if list?? && list?size>0>
<script type="text/html" id="list">
<#list list as item>
<tr>
<td>[[item.id]]</td>
<td>[[item.name]]</td>
<td>[[item.age]]</td>
</tr>
</#list>
</script>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
let data = <#compress>${list?json_string}</#compress>;
let html = $('#list').template(data);
$('table tbody').html(html);
</script>
</#if>

以上就是freemarker整合jQuery的方法，希望對大家有所幫助。