jq load()方法实现html 模块化。
在我们写项目的时候，会遇到一个模块在多个页面使用，如果没有页面都写一次，那就太费劲了。
如果你使用了框架（vue，react，Angular）的话，那框架都有模块化，可以轻松解决。
如果你使用原生开发的话，怎么办呢？
传统的纯 js 做法可以使用
var content = document.getElementById("content");
content.innerHTML("一大坨HTML代码")
就是重新绘制那部分DIV，当然往往我们的需要写很多标签，很不爽。
服务端渲染
在做Java项目时，我们可以采用多种方法对页面进行模块化。
例如，使用JSP时，我们可以这样引入一个片段：
<%@ include file="page.jsp" %>
但是需要后台支持。
jQuery的load()方法
load方法使用很简单
$("#id").load("param") 这个 param 可以直接指定某个 url ，必须在是本服务器可以请求的页面哦
注意：load方法不能在本地去加载一个页面，必须在是同一个服务器上。
文件目录（本地起了一个node服务测试的）
footer页面
比如：现在我们有个footer，需要在多个页面使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<h1>测试</h1>
<!-- 公共尾部 -->
<footer id="footer"></footer>
</body>
<script>
$(function(){
$('#footer').load('footer.html');
})
</script>
</html>
效果图：这时我们已经吧footer插入到 test.html了
jq load()方法实现html 模块化。的更多相关文章
- jq load()方法用法
//鼠标划上去默认样式添加 listNow = getUrlParam("page"); $(".header").load("../file/hea ...
- jq中 load()方法 简介
load()方法会在元素的onload事件中绑定一个处理函数.如果处理函数绑定给window对象,则会在所有内容(包括窗口,框架,对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内 ...
- 让Easy UI 的DataGrid直接内嵌的JSON对象，并重写form load 方法
前言 我有这样的JSON对象 { "UserName": "jf", "UserPwd": "123456", &quo ...
- jquery 实践操作：load()方法
最近决定总结下实际项目中的 JS 相关的一些操作,因此开启此系列,记录使用过程中用到的一些实用操作问题和解决方法,给自己一份记录. jquery load方法是对jQuery.ajax()进行封装以方 ...
- 你真的了解load方法么？（转载）
本文授权转载,作者:左书祺(关注仓库,及时获得更新:iOS-Source-Code-Analyze) 因为 ObjC 的 runtime 只能在 Mac OS 下才能编译,所以文章中的代码都是在 Ma ...
- initialize和init以及load方法的区别与使用以及什么时候调用
initialize不是init initialize在这个类第一次被调用的时候比如[[class alloc]init]会调用一次initialize方法,不管创建多少次这个类,都只会调用一次这个方 ...
- jQuery load()方法用法集锦！
调用load方法的完整格式是:DE>load( url, [data], [callback] ),其中DE> DE>urlDE>:是指要导入文件的地址. DE>data ...
- easyUi load方法重新加载表单的数据
1.表单回显数据的方法 <script> //方法一 function loadLocal(){ $('#ff').form('load',{ name:'myname', email:' ...
- load()方法---------jQuery动态加载html
jquery代码 $("#div").load("test.html"); test.html ----------------被加载页面(有<HTM ...
随机推荐
- SQLServer启动和关闭bat脚本
原文:SQLServer启动和关闭bat脚本 安装完毕SQL SERVER 2005后,会默认自动启动SQL Server等几个服务,这几个服务比较占用系统资源.当不运行SQL Server时,最 ...
- PAT A1035 Password (20)
AC代码 注意创造函数条件中使用引用 输出语句注意单复数 #include <cstdio> #include <cstring> #include <iostream& ...
- python中的with语句
https://www.ibm.com/developerworks/cn/opensource/os-cn-pythonwith/index.html
- python中while循环打印星星的四种形状
在控制台连续输出五行*,每一行星号数量一次递增 * ** *** **** ***** #1.定义一个行计数器 row = 1 while row <= 5: #定义一个列计数器 col = 1 ...
- yum更新出错-解决
Total download size: 14 MIs this ok [y/d/N]: 命令里已经yum install -y了,但是还是需要选择Y,N没有自动执行,请问这个要怎么破. PS:我是在 ...
- java——包装类中的equals方法
基本数据类型包装类中的equals方法用于比对相同包装类中的值是否相等,如果两者比较的包装类类型不同则返回false: Byte public boolean equals(Object obj) { ...
- js创建点击事件中<a>标签onclick传递多个参数
var rowIndex = e.rowIndex; var t = "<a href='javascript:void(0)' onclick=\"viewInfo('&q ...
- springcloud(十二)-springcloud-config统一管理微服务配置
1.为什么要统一管理微服务配置 对于传统的单体应用,常使用配置文件管理所有配置.例如一个SpringBoot开发的单体应用,可将配置内容放在application.yml文件中.如果需要切换环境,可设 ...
- Extjs中,Vo对象中的属性无法在data中获取的解决方法
store.getById(data.data.id).raw.redpackid
- 批量转换epub书籍为mobi电子书
kindlegen下载地址: http://kindlegen.s3.amazonaws.com/kindlegen_win32_v2_9.zip 原文: http://blog.sina.com.c ...