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 ...
随机推荐
- C#与C++的区别
C# 参考链接:https://www.runoob.com/csharp/csharp-tutorial.html ------------------C#数据类型----------------- ...
- HTTP、HTTPS、WebSocket
一 .HTTP 1.1 HTTP发展史 1.1.1 什么是HTTP 超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所 ...
- 【hash】A Horrible Poem
[题目链接] # 10038. 「一本通 2.1 练习 4」A Horrible Poem [参考博客] A Horrible Poem (字符串hash+数论) [题目描述] 给出一个由小写英文字母 ...
- .NET CORE API 使用Postman中Post请求获取不到传参问题
开发中遇到个坑 记录下. 使用Postman请求core api 接口时,按之前的使用方法(form-data , x-www-form-urlencoded)怎么设置都无法访问. 最后采用raw写入 ...
- Ruby 参考教程
Ruby 参考教程 https://www.ruby-lang.org/zh_cn/documentation/ http://ruby-doc.org/docs/ https://ruby-chin ...
- 服务端相关知识学习（五）之Zookeeper leader选举
在上一篇文章中我们大致浏览了zookeeper的启动过程,并且提到在Zookeeper的启动过程中leader选举是非常重要而且最复杂的一个环节.那么什么是leader选举呢?zookeeper为什么 ...
- Fox新闻报道，帮助北朝鲜使用加密货币专家被捕
根据司法部的刑事诉讼,一名美国加密货币专家周四在洛杉矶被捕,原因是涉嫌帮助朝鲜使用加密货币逃避美国的制裁.网民都说敢帮助敌人,就应该关起来.
- apply()和call()的方法
apply()和call()的方法的区别 参考文档https://www.cnblogs.com/lengyuehuahun/p/5643625.html 一直都没太明白apply()与call()的 ...
- JQ报错：Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement报错
今天在写轮播图中,在停止定时器之后想要重新开启定时器,但是不知道为什么脑子抽了竟然想通过continue跳出定时器的本次运行继续下一次运行(当然是不可取的,但是还是试了试2333),然后就报错了.Un ...
- 电脑连手机调试app
小米6也真是坑,打开开发者模式的方式堪称一流绝密!!! 设置 --> 我的设备 --> 全部参数 --> MIUI版本 --> 连续点击七次,直到提示已经处于开发者模式为止 然 ...