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

如果你使用了框架（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. 关于python中的包，模块导入的问题详解（二）

    from import导入 紧接着的是from xx import xx  语法 1 ################ 2 from my_moudule import name 3 print(na ...

  2. django初步了解3

    目录 JsonResponse模块 form表单上传文件 FBV与CBV django settings源码分析及实际应用 模板语法 模板传值 模板过滤器 标签 if标签 for标签 with标签 自 ...

  3. linux kprobe rootkit学习

    介绍 <linux二进制分析>中提到了使用kprobe来写内核rootkit,还给出了一个简单的源码实现,这里看一下他的源码 kprobe kprobe的介绍可以看下面这几篇文章 介绍:h ...

  4. JavaScript设计模式（策略模式）

    策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换.将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外,策略模式的目的就是将算法的使用与算法的实现分离开来 ...

  5. word、ppt转换为pdf

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. html常用代码大全

    1.结构性定义 文件类型 <HTML></HTML> (放在档案的开头与结尾) 文件主题 <TITLE></TITLE> (必须放在「文头」区块内) 文 ...

  7. python图像处理-生成随机验证码

    前面说了PIL库,还说了图片的缩放.旋转和翻转.现在说下网站上常用的随机验证码的生成.参考网站:https://www.liaoxuefeng.com/wiki/1016959663602400/10 ...

  8. Eclipse配置Maven的本地仓库和阿里云镜像 加速Maven更新

    先确定自己电脑是否安装了Maven和安装位置,具体查询方法直接win+R键打开运行窗口,输入cmd打开dos窗口,再输入mvn -v即可查询安装的位置 拿到安装位置 D:\Applications\W ...

  9. D-Link系列路由器漏洞挖掘入门

    D-Link系列路由器漏洞挖掘入门 前言 前几天去上海参加了geekpwn,看着大神们一个个破解成功各种硬件,我只能在下面喊 6666,特别羡慕那些大神们.所以回来就决定好好研究一下路由器,争取跟上大 ...

  10. Redis Sentinel机制与用法说明

    本文来自 https://www.cnblogs.com/zhoujinyi/p/5569462.html 概述 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Red ...