`
田进丰
  • 浏览: 35400 次
  • 性别: Icon_minigender_1
文章分类
社区版块
存档分类
最新评论

jquery模板template

 
阅读更多

 

给<script>设置type="text/template",标签里面的内容不会被执行,也不会显示在页面上,但是可以在另一个script里面通过获取,然后再通过相关的模板工具进行处理,插入到页面中。这样就把大段的HTML操作从js里面分离开了。

 

 

<html>
<head>
<script ></script>//下面的js地址
<script class="t" type="text/template">
<tr id="c">
<td><button class="m" id="n">value</button></td>
</tr>
</script>
</head>
<body>
<table class="e"></table>
</body>
</html>

 上面是html中固定的表格,下面替换id:

var b=[1,2,3,4,5]
function a(b){
 for(var info=0;info<b.length;info++) {
   var  v= $(".t").html();//将html中的传给变量。
        var s=v.replace(/c/,b[info]);//v是字符串,c是表格行的id。
        $(".e").append(s);
} 

 虽然是替换tr的id,但是button是属于tr这一行的,所以每一行的id不同按钮的功能也不一样,当然也可以替换button的id。

 

用script标签的好处是默认不会显示在页面上,而且可以放置处script标签以外所有的标签,而显然模板里一般

 

不会出现script标签,设置了type后又能保证浏览器不去执行它导致报错。

 

 

 

分享到:
评论

相关推荐

    jquery.template:更安全的模板,使用 jQuery

    jquery.template采用不同的方法将值插入模板,从而降低 XSS 攻击的风险。 用法 只需为模板传递一个 CSS 选择器,然后传递一个带有值的对象。 (模板在第一次使用后缓存) var $el = $ . template ( '#player' , {...

    基于jQuery开发的javascript模板引擎-jTemplates

    - **绑定数据和模板**:使用jQuery选择器找到模板元素,然后调用`.processTemplate()`方法,传入数据模型,将数据绑定到模板。 - **处理模板事件**:如果模板中包含交互元素,可以通过jQuery的事件处理函数进行响应...

    jquery template下载

    jquery template是一个很实用的插件。可以根据HTML模板,绑定上对应的数据(可以对这些数据进行格式化操作,如全部大写,全部小写等),输出或添加到页面上。我们可以经常看到,在一个ajax成功之后的处理,往往要用...

    jquery template 语法总结

    jQuery Template 是一个非常实用的功能,它可以帮助前端开发者更方便地处理动态数据渲染到 HTML 模板中的任务。本文档将基于提供的文件内容进行深入讲解,帮助初学者更好地理解和掌握 jQuery Template 的核心用法。 ...

    前端项目-jquery.loadtemplate.zip

    `jquery.loadtemplate` 是一个基于 jQuery 的插件,专门用于加载和使用模板,使得在Web应用中动态渲染内容变得更加便捷。这个压缩包文件“frontend-project-jquery.loadtemplate.zip”包含了一个名为“jquery-...

    jquery.template:jquery模板组件化,组件嵌套

    jquery.template.js 受启发的基于jQuery实现的极简框架。 简介 实现模板组件化写法组件的嵌入和替换完全用jquery实现 使用时,完完全全是jQuery的基本操作,对于已经会用jq的人而言,学习成本接近零。 例子 const ...

    运用Jquery插件Json2Template写的简单项目

    接下来,我们需要引入Json2Template插件和jQuery库,并实例化模板。在JavaScript中,我们可以这样做: ```javascript $(function() { var data = { title: '示例标题', content: '这是示例内容' }; $('#...

    jquery 模板

    随着前端开发技术的发展,如AngularJS、React和Vue等框架的崛起,以及浏览器原生支持的`&lt;template&gt;`标签和Web Components,jQuery模板的使用逐渐减少。然而,对于学习和理解客户端数据绑定和模板引擎的概念,jQuery...

    jquery前台模板demo(很实用的)

    - Underscore.js的_.template方法:提供了基本的模板功能。 **七、实战应用** "jQuery前台模板demo"包含了一些实际的示例,展示了如何在实际项目中使用jQuery和模板。解压后,你可以查看代码,学习如何结合jQuery...

    artTemplate.js,前端模板js引用,jquery静态模板

    标题"artTemplate.js,前端模板js引用,jquery静态模板"中,提到了`artTemplate.js`,这是一个专用于前端开发的模板引擎,它与jQuery结合使用,实现了静态模板的功能。这意味着`artTemplate.js`可以帮助开发者快速...

    jquery模版

    在Web应用中,尤其在数据驱动的界面设计中,jQuery模板能够极大地提升开发效率和代码可读性。jQuery库本身并不包含模板功能,但可以通过插件如jQuery Templates或Underscore.js的_.template方法来实现这一功能。 **...

    jquery-template-plugin:一个简单的jQuery插件,它使用模板和传递的json对象生成动态html内容

    - **Template Engine**: 模板引擎是用于生成动态内容的工具,jQuery Template Plugin 就是一个轻量级的模板引擎。 - **JavaScript Plugin**: 类似于jQuery Plugin,指的是JavaScript库的扩展。 jQuery Template ...

    前端插件art-template模板引擎art-template-test示例代码

    本文主要围绕`art-template`这一前端模板引擎,通过`art-template-test`示例代码来深入探讨其核心概念、使用方法以及在实际项目中的应用。 `art-template`是一个轻量级、高性能的JavaScript模板引擎,它旨在解决...

    jQuery Mobile 高级设计模板

    模板`template_14-jquery-mobile-app`可能包含以下元素: 1. **主页面 (index.html):** 这是应用的入口点,通常包括导航栏、内容区域和脚本引用。 2. **CSS 文件:** 包含定制的jQuery Mobile主题,可能包含额外的...

    jQuery .tmpl(), .template()大全集

    而`.tmpl()`和`.template()`是jQuery UI中的两个重要功能,用于模板引擎,帮助开发者构建动态数据驱动的用户界面。这篇综合指南将深入探讨这两个方法的用法和原理,以帮助你更好地理解和应用它们。 首先,我们来...

    jquery.tmpl JQuery模板插件

    需要注意的是,JQuery.tmpl模板插件虽然方便易用,但它在最新版的jQuery中并不是默认包含的,因为jQuery核心团队推荐使用其他模板解决方案,如Mustache或者Handlebars。这并不影响JQuery.tmpl本身的使用,但如果需要...

    Pure JS (5.1):在服务器端使用 JQuery DOM 和 JQuery Template

    标题 "Pure JS (5.1):在服务器端使用 JQuery DOM 和 JQuery Template" 暗示了这篇博客可能探讨如何在非浏览器环境,比如服务器端,利用JavaScript的JQuery库来处理DOM操作和模板渲染。虽然JQuery通常与前端开发关联...

    jQuery实现的纯HTML模板进行ajax数据绑定

    标题中的“jQuery实现的纯HTML模板进行ajax数据绑定”指的是使用jQuery库来处理HTML模板,并通过AJAX技术动态地从服务器获取JSON数据,然后将这些数据绑定到模板中,实现页面内容的动态更新,无需刷新整个页面。...

    基于Jquery实现的页面数据渲染框架

    jQuery虽然没有内置的模板引擎,但可以与其他模板库(如Mustache、Handlebars等)配合使用。例如,使用Handlebars: ```html &lt;script id="template" type="text/x-handlebars-template"&gt; {{#each items}} &lt;div&gt;{{...

Global site tag (gtag.js) - Google Analytics