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

如果你使用了框架（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. Minimum Cut(2015沈阳online)【贪心】

    Minimum Cut[贪心]2015沈阳online 题意:割最少的边使得图不连通,并且割掉的边中有且仅有一条是生成树的边. 首先,我们选择一条树中的边进行切割,此时仅考虑树上的边集,有两种情况:1 ...

  2. MySQL-复杂查询及条件-起别名-多表查询-04

    目录 基本查询语句及方法 测试数据创建 创建数据库与表 插入表记录数据 数据展示 常见结果排版 另一种结果排版 \G 简单查询语句的书写与执行顺序 查询语句书写 执行顺序 科普-- 起别名 写法 可以 ...

  3. 怎样获取NodeList某位置上的节点

    1. 使用类似 Array 的中括号写法: document.body.childNodes[0] 2. 使用 NodeList.prototype.item(): document.body.chi ...

  4. charles 抓包 （一）

    在web.app开发中经常需要通过抓包来定位页面.接口返回数据的问题.在mac系统中,charles是一款功能丰富的抓包软件.可以实现app的数据抓包. 工具:charles 附送charles的破解 ...

  5. mybatis+oracle批量插入报不符合协议和sql未正确结束

    在Java中循环save,需要加useGeneratedKeys="false",否则报错不符合协议 mybatis批量插入,也需要在insert里加入 useGeneratedK ...

  6. javascript——创建对象的方式

    对象:在JavaScript中,对象是拥有属性和方法的数据. JavaScript自定义对象方式有以下7种:直接创建方式.对象初始化器方式.构造函数方法.prototype原型方式.混合的构造函数/原 ...

  7. json返回数据多个是数组，单个就不是处理方案

    /// <summary>         /// 计算方案  当前返回的对象         /// </summary>         [JsonConverter(ty ...

  8. QT 获取字体大小

    QFont font(androidFont); QFontInfo fInfo(font); qDebug()<<"FFFFFFFFFFFFFFFFFFFFFFFPPPSIZE ...

  9. C#取绝对值函数

    System.Math.Abs(float value); System.Math.Abs(decimal value); System.Math.Abs(int value); System.Mat ...

  10. JS基础_关系运算符

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...