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

如果你使用了框架（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. 排序算法大汇总 Java实现

    一.插入类算法 排序算法的稳定性:两个大小相等的元素排序前后的相对位置不变.{31,32,2} 排序后{2,31,32},则称排序算法稳定 通用类: public class Common { pub ...

  2. PAT B1015A1062德才论(25)

    题目描述 宋代史学家司马光在<资治通鉴>中有一段著名的"德才论":"是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不得 ...

  3. Thrift Oneway是什么？

    网上很多文章,都有各种涉及使用 oneway 的,基本是一个THRIFT IDL示例接口前面加 oneway.看完之后对 oneway的理解还是很模糊,于是看了下Thrift的代码,终于搞懂了 one ...

  4. 怎样设置 MySQL 远程连接

    允许用户 root 在 任何IP 上都可以远程连接 所有 mysql数据库 并具有操作数据库的 所有权限, 密码为: myPassword mysql -u root -p grant all PRI ...

  5. 【Git的基本操作五】比较文件差异

    比较文件差异 1. git diff [文件名] 将工作区中的文件和暂存区对应文件进行比较 例:git diff test.txt 2. git diff [本地库中文件历史记录(指针)] [文件名] ...

  6. java反射浅谈 part1--反射机制的定义，作用，原理

    一.定义 在运行过程中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:还可以通过反射创建对象,这种动态获取的信息以及动态调用对象的方法的功能称为 ...

  7. git统计某个时间段写的代码行数

    1. 任务需要 领导想每个迭代统计一下,当前迭代开发的代码数量是多少 2. 解决方法 git log --stat --since=2019-09-12 --until=2019-09-27 | pe ...

  8. 学习--Spring IOC源码精读

    Spring核心IOC的源码分析(转载) 原文地址:https://javadoop.com/post/spring-ioc#toc11 转载地址:https://blog.csdn.net/nuom ...

  9. 【转】container_of宏 分析

    在学习Linux驱动的过程中,遇到一个宏叫做container_of.该宏定义在include/linux/kernel.h中,首先来贴出它的代码: /** * container_of - cast ...

  10. 【wifi移植 2】 移植wpa_supplicant

    参考文章: http://bbs.eeworld.com.cn/thread-447273-1-1.html(加精作品) 1. 下载源码 下载wpa_supplicant-2.2.tar(openss ...