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

如果你使用了框架（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 模块化。的更多相关文章

  1. jq load()方法用法

    //鼠标划上去默认样式添加 listNow = getUrlParam("page"); $(".header").load("../file/hea ...

  2. jq中 load()方法 简介

    load()方法会在元素的onload事件中绑定一个处理函数.如果处理函数绑定给window对象,则会在所有内容(包括窗口,框架,对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内 ...

  3. 让Easy UI 的DataGrid直接内嵌的JSON对象，并重写form load 方法

    前言 我有这样的JSON对象 { "UserName": "jf", "UserPwd": "123456", &quo ...

  4. jquery 实践操作：load()方法

    最近决定总结下实际项目中的 JS 相关的一些操作,因此开启此系列,记录使用过程中用到的一些实用操作问题和解决方法,给自己一份记录. jquery load方法是对jQuery.ajax()进行封装以方 ...

  5. 你真的了解load方法么？（转载）

    本文授权转载,作者:左书祺(关注仓库,及时获得更新:iOS-Source-Code-Analyze) 因为 ObjC 的 runtime 只能在 Mac OS 下才能编译,所以文章中的代码都是在 Ma ...

  6. initialize和init以及load方法的区别与使用以及什么时候调用

    initialize不是init initialize在这个类第一次被调用的时候比如[[class alloc]init]会调用一次initialize方法,不管创建多少次这个类,都只会调用一次这个方 ...

  7. jQuery load()方法用法集锦！

    调用load方法的完整格式是:DE>load( url, [data], [callback] ),其中DE> DE>urlDE>:是指要导入文件的地址. DE>data ...

  8. easyUi load方法重新加载表单的数据

    1.表单回显数据的方法 <script> //方法一 function loadLocal(){ $('#ff').form('load',{ name:'myname', email:' ...

  9. load()方法---------jQuery动态加载html

    jquery代码 $("#div").load("test.html"); test.html   ----------------被加载页面(有<HTM ...

随机推荐

  1. PAT A1025 PAT Ranking(25)

    题目描述 Programming Ability Test (PAT) is organized by the College of Computer Science and Technology o ...

  2. STL set 常见用法详解

    <算法笔记>学习笔记 set 常见用法详解 set是一个内部自动有序且不含重复元素的容器 1. set 的定义 //单独定义一个set set<typename> name: ...

  3. logid让你的请求完整可追溯

    今天是在博客园开园的第一天 一时间其实并不能想起来到底该写什么文章,其实想写的东西挺多 今天就以logid这个主题开始吧,网上写这个的文章似乎不多,但是的确是在实际生产中相当重要的一个能力,也是容易被 ...

  4. Ruby Rails学习中：添加安全密码

    接上篇 一. 添加安全密码 我们已经为 name 和 email 字段添加了验证规则, 现在要加入用户所需的最后一个常规属性: 安全密码.每个用户都要设置一个密码(还要二次确认), 数据库中则存储经过 ...

  5. C# HttpWebRequest请求远程地址获取返回消息

    HttpWebRequest请求远程地址获取返回消息 /// <summary> /// 请求远程Api获取响应返回字符串 /// </summary> /// <par ...

  6. java lesson14Homework

    /** * 1. 本程序找出字符串数组 String[] arr = {“welcome”, “china”, “hi”, “congratulation”, “great”} 中的长度最大的元素,并 ...

  7. [C#]使用BackgroudWorker刷新UI延迟的解决方法

    今天使用BackgroundWorker刷新UI发生延时现象,找了好久才发现AutoResetEvent可以解决,代码如下 private void BgWorker_ProgressChanged( ...

  8. CF516D Drazil and Morning Exercise

    cf luogu 首先每个点到最远点的距离可以预处理出来,这个距离显然是这个点到树直径两端点的最大值.把那个距离记为\(d_i\),然后从小到大枚举\(d_i\),并强制它为最大的\(d_i\),那么 ...

  9. java面试5

    1.如何将String类型转化Number类型?列举说明String str = "123"; Integer  num1 = new  Integer(str); int num ...

  10. task service的ftp和s3同步文件后续优化方案

    1,开启多个task service服务,比如153,154,162各开启一个服务,去ftp和s3读取文件的第一步首先改文件名,比如xxxxxx_153,然后其他154和162不去处理这个文件,xxx ...