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 ...
随机推荐
- 有关java5以后的线程
创建线程的方式 方式一 继承于Thread类 /** * 多线程的创建,方式一:继承于Thread类 * 1. 创建一个继承于Thread类的子类 * 2. 重写Thread类的run() --> ...
- strCmd.Format("delete FROM userTable where name = '%s'", name);
string.Format("select * from 数据库表 where 用户名='%s' and 密码='%s' ",m_1,m_2); 把[m_1]和[m_2]的值按照[ ...
- GET POST请求区别
cookie .session.tokencookie:存放在浏览器相关的硬盘文件中session:存放在服务器端的内存中,退出后,被清空token:服务器端生成后,不保存,发给客户端,客户端的hea ...
- VUE前后台分离
VUE前后台分离 配置js环境 jQuery >: cnpm install jquery vue/cli 3 配置jQuery:在vue.config.js中配置(没有,手动项目根目录下新建) ...
- java爬取并下载酷狗TOP500歌曲
是这样的,之前买车送的垃圾记录仪不能用了,这两天狠心买了好点的记录仪,带导航.音乐.蓝牙.4G等功能,寻思,既然有这些功能就利用起来,用4G听歌有点奢侈,就准备去酷狗下点歌听,居然都是需要办会员才能下 ...
- Bean属性复制，字段名可不同，字段类型不同需要自行处理
@Setter @Getter public class SourceA { private String name; private String text; public SourceA(Stri ...
- .Net面试题三
1..Net中类和结构的区别? 2.死锁地必要条件?怎么克服? 3.接口是否可以继承接口?抽象类是否可以实现接口?抽象类是否可以继承实体类? 4.构造器COnstructor是否可以被继承?是否可以被 ...
- Scala学习五——类
一.本章要点 类中的字段自动带有getter方法和setter方法 你可以用定制的getter/setter方法替换掉字段的定义,而不必修改使用类的客户端——这就是所谓的”统一访问原则“ 用@Bean ...
- java实现spark常用算子之SaveAsTextFile
import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...
- RedisCluster 添加/删除节点
一,redis cluster命令行 //集群(cluster) CLUSTER INFO 打印集群的信息 CLUSTER NODES 列出集群当前已知的所有节点(node),以及这些节点的相关信息. ...