jq load()方法实现html 模块化。
在我们写项目的时候，会遇到一个模块在多个页面使用，如果没有页面都写一次，那就太费劲了。
如果你使用了框架（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 模块化。的更多相关文章
- jq load()方法用法
//鼠标划上去默认样式添加 listNow = getUrlParam("page"); $(".header").load("../file/hea ...
- jq中 load()方法 简介
load()方法会在元素的onload事件中绑定一个处理函数.如果处理函数绑定给window对象,则会在所有内容(包括窗口,框架,对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内 ...
- 让Easy UI 的DataGrid直接内嵌的JSON对象，并重写form load 方法
前言 我有这样的JSON对象 { "UserName": "jf", "UserPwd": "123456", &quo ...
- jquery 实践操作：load()方法
最近决定总结下实际项目中的 JS 相关的一些操作,因此开启此系列,记录使用过程中用到的一些实用操作问题和解决方法,给自己一份记录. jquery load方法是对jQuery.ajax()进行封装以方 ...
- 你真的了解load方法么？（转载）
本文授权转载,作者:左书祺(关注仓库,及时获得更新:iOS-Source-Code-Analyze) 因为 ObjC 的 runtime 只能在 Mac OS 下才能编译,所以文章中的代码都是在 Ma ...
- initialize和init以及load方法的区别与使用以及什么时候调用
initialize不是init initialize在这个类第一次被调用的时候比如[[class alloc]init]会调用一次initialize方法,不管创建多少次这个类,都只会调用一次这个方 ...
- jQuery load()方法用法集锦！
调用load方法的完整格式是:DE>load( url, [data], [callback] ),其中DE> DE>urlDE>:是指要导入文件的地址. DE>data ...
- easyUi load方法重新加载表单的数据
1.表单回显数据的方法 <script> //方法一 function loadLocal(){ $('#ff').form('load',{ name:'myname', email:' ...
- load()方法---------jQuery动态加载html
jquery代码 $("#div").load("test.html"); test.html ----------------被加载页面(有<HTM ...
随机推荐
- Linux系列（2）：入门之线上求助
前言:Linux命令那么多,你是否为记不住Linux的命令而烦恼呢? 这一章节就是来解决这个问题的. 1.Linux系统的线上求助 1.指令补全 在上一章节提到过使用[Tab]快捷键可以根据用户输入的 ...
- c++学习笔记之函数重载和模板理解
1.函数重载: C++ 不允许变量重名,但是允许多个函数取相同的名字,只要参数表不同即可,这叫作函数的重载(其英文是 overload).重载就是装载多种东西的意思,即同一个事物能完成不同功能. 所谓 ...
- python中全局global和局部nonlocal命名空间
python中全局global和局部nonlocal命名空间 局部名称空间对全局名称空间的变量可以引用,但是无法改变. count = 1 def func1(): count = 2 print(c ...
- HTTP、HTTPS、WebSocket
一 .HTTP 1.1 HTTP发展史 1.1.1 什么是HTTP 超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所 ...
- vue 动态添加对象属性
昨天使用vue发现直接给对象添加属性,并不能触发响应更新,后来看文档发现要通过this.$set 函数动态添加才可用,eg: this.$set( obj, key, data)
- Dom编程-左侧菜单栏设计模型实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 安装jenkins时出现 No such plugin: cloudbees-folder的解决办法
今天安装了一下jenkins,在初始化安装插件时出现" No such plugin: cloudbees-folder"错误,根据网上的教程: 1.打开链接"http: ...
- hype-v上centos7部署高可用kubernetes集群实践
概述 在上一篇中已经实践了 非高可用的bubernetes集群的实践 普通的k8s集群当work node 故障时是高可用的,但是master node故障时将会发生灾难,因为k8s api serv ...
- Fonour.AspnetCore 生成SQL SERVER数据库
Install-Package EntityFramework Add-Migration InitialCreate Update-Database
- JS基础_嵌套的for循环
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...