在我们写项目的时候，会遇到一个模块在多个页面使用，如果没有页面都写一次，那就太费劲了。

如果你使用了框架(vue，react，Angular)的话，那框架都有模块化，可以轻松解决。

如果你使用原生开发的话，怎么办呢？

传统的纯 js 做法可以使用

var content = document.getElementById("content");

content.innerHTML("一大坨HTML代码")

就是重新绘制那部分DIV，当然往往我们的需要写很多标签，很不爽。

服务端渲染

在做Java项目时，我们可以采用多种方法对页面进行模块化。

例如，使用JSP时，我们可以这样引入一个片段：

但是需要后台支持。

jQuery的load()方法

load方法使用很简单

$("#id").load("param") 这个 param 可以直接指定某个 url ，必须在是本服务器可以请求的页面哦

注意：load方法不能在本地去加载一个页面，必须在是同一个服务器上。

文件目录(本地起了一个node服务测试的)

footer页面

比如：现在我们有个footer，需要在多个页面使用。

test

测试

$('#footer').load('footer.html');

})

html模块化标签,jq load()方法实现html 模块化。相关推荐

jquery中的load()方法使用要点
今天做在线聊天网页,聊天可以配图,需要使用弹出层的方式浏览大图效果.总共三层,底层html主结构,中间半透明遮罩,顶层是缩略图放大后的大图.用户点击缩略图后在半透明遮罩上呈现大图. 因为在线聊天,图片 ...
js中load载入html页面,使用jquery的load方法加载html页面，但是html引入的js不生效
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 前提有一个公共的登录弹框页面需要在多个页面引用,百度后就使用了jQuery 的 load 方法. 做法: 将公共的 ht ...
EasyUI加zTree使用解析 easyui修改操作的表单回显方法验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
EasyUI加zTree使用解析 easyui修改操作的表单回显方法验证框提交表单前验证 datagrid的load方法...
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
ajax load html页面,jQuery – AJAX load() 方法 | 菜鸟教程
为了避免多页面情形下的代码重复,可以利用 load() 方法,将重复的部分(例如导航栏)放入单独的文件,使用下列方法进行导入: //1.当前文件中要插入的地方使用此结构: //2.***.html中放 ...
load()方法异步请求数据
在jQuery中对Ajax进行了封装,异步请求的方法共分为三层: 最底层:$.ajax();中间层:$.get().$.post().load():最高层为:$.getScript().$.getJS ...
Objetive-C +load方法研究
load方法的执行时机 Objetive-C 的runtime会在一个类的所有方法加载到内存中时调用这个类的+load() 方法,因为每个类的方法只是加载一次,所以每个+load()方法只调用一次. ...
Hibernate中get方法和load方法的区别
一.get和load方法都是根据id去获得对应数据的,但是获得机制不同:如果使用get方法,hibernate会去确认该id对应的数据是否存在,它首先会去session中去查询(session缓存其实 ...
selenium提取数据之driver对象定位标签元素获取标签对象的方法
selenium提取数据之driver对象定位标签元素获取标签对象的方法在selenium中可以通过多种方式来定位标签,返回标签元素对象 find_element_by_id (返回一个元素) fi ...

html模块化标签,jq load()方法实现html 模块化。

测试

html模块化标签,jq load()方法实现html 模块化。相关推荐

最新文章

热门文章