当前位置：首页 > jquery

jquery 模板

2026-01-15 16:40:09jquery

jQuery 模板的使用方法

jQuery 本身不提供内置的模板引擎，但可以通过插件或结合其他库实现模板功能。常见的方案包括使用 jQuery 结合 Handlebars、Mustache 或 Underscore.js 的模板功能。

使用 jQuery 结合 Handlebars

Handlebars 是一个流行的模板引擎，可以与 jQuery 无缝集成。以下是一个简单的示例：

jquery 模板

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>

<script id="template" type="text/x-handlebars-template">
  <div class="user">
    <h2>{{name}}</h2>
    <p>{{email}}</p>
  </div>
</script>

<script>
  const source = $('#template').html();
  const template = Handlebars.compile(source);
  const context = { name: 'John Doe', email: 'john@example.com' };
  const html = template(context);
  $('#container').html(html);
</script>

使用 jQuery 的 `.html()` 方法实现简单模板

对于简单的场景，可以直接使用 jQuery 的字符串拼接和 .html() 方法：

jquery 模板

const data = { title: 'Example', content: 'This is a simple template' };
const html = `<div class="post">
  <h3>${data.title}</h3>
  <p>${data.content}</p>
</div>`;
$('#container').html(html);

使用 jQuery 结合 Underscore.js 模板

Underscore.js 提供了 _.template 函数，可以方便地创建模板：

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>

<script type="text/template" id="tpl">
  <% _.each(items, function(item) { %>
    <li><%= item %></li>
  <% }); %>
</script>

<script>
  const compiled = _.template($('#tpl').html());
  const html = compiled({ items: ['One', 'Two', 'Three'] });
  $('#list').html(html);
</script>

使用 jQuery 插件实现模板功能

一些 jQuery 插件专门为模板设计，如 jQuery-tmpl（已废弃）或 jTemplate。以下是使用 jTemplate 的示例：

<script src="jquery-jtemplates.js"></script>

<script type="text/html" id="template">
  {#foreach $T as item}
    <div class="item">{$T.item.name}</div>
  {#/foreach}
</script>

<script>
  const data = { items: [{name: 'Item 1'}, {name: 'Item 2'}] };
  $('#container').setTemplate($('#template').html());
  $('#container').processTemplate(data);
</script>