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

如果你使用了框架（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. 红米K20PRO解锁Bootloader权限并刷入recovery

    手机里反正没什么东西了,聊天记录啊好像也没很重要得了,索性全部清除,刷机玩玩. 把稳定版刷成第三方开发版,这样又有时间去折腾root权限,面具和xposed的各种插件了,嘿嘿. 解锁小米手机 我的账号 ...

  2. Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：

    受到html本身的一些限制,像<ul>.<ol>.<table>.<select>这样的元素里允许包含的元素有限制,而另一些像<option> ...

  3. 【转载】Python第三方库资源

    转自:https://weibo.com/ttarticle/p/show?id=2309404129469920071093 参考:https://github.com/jobbole/awesom ...

  4. WPF 异步加载窗体

    加载某个界面时,需要获取数据,而数据返回的时间比较长,这个时候可以异步加载界面. 1.在该窗体的加载事件(Load)中编写以下代码: new Thread(p=>{DataBinding();} ...

  5. springboot实现上传并解析Excel

    添加pom依赖 <!-- excel解析包 --> <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> ...

  6. BZOJ 4835: 遗忘之树

    传送门 首先设 $f[x]$ 表示点分树上 $x$ 的子树内的方案数 发现对于 $x$ 的每个儿子 $v$ ,$x$ 似乎可以向 $v$ 子树内的每个节点连边,因为不管怎么连重心都不会变 显然是错的, ...

  7. Function(Of T) as T 泛型类型多态返回对象的实现

    Shared Function ResultT(Of T As result)(msg As String, Optional success As Boolean = False) As T Dim ...

  8. mvc布局（一）

    negut添加Optimization @System.Web.Optimization.Styles.Render( "~/Content/styles/css/font-awesome. ...

  9. Pycharm 加载pygame解决方案

    按照<python编程从入门到实践>上的教程下载了pygame的whl文件进行安装, 在cmd窗口里import pygame提示无错误,在IDEL里程序也能正常运行, 但是pycharm ...

  10. 百度URL链接中文转码

    百度搜索链接规则为: http://www.baidu.com/s?wd=[搜索词目]&cl=3 有多个搜索词通过加号进行链接: http://www.baidu.com/s?wd=keywo ...