jQuery使用load方法加载其他文档内容
2024-08-21 06:32:19
A文档载入B文档的内容,并且通过JQ操作被引入到A文档中的元素
A文档 (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="textDiv"> </div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('#textDiv').load('modal.html',function(){
$('#modalBox').modal('show');
}); </script>
</body>
</html>
B文档(modal.html):
<div class="modal fade" id="modalBox" role="dialog" aria-labelledby="conTitle">
<div class="modal-dialog" role="document" >
<div class="modal-content">
<div class="modal-header" style="background-color: #fff;border-top-left-radius: 15px;border-top-right-radius: 15px;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="conTitle">Modal title</h4>
</div>
<div class="modal-body" style="background-color:forestgreen;">
<p>One fine body…</p>
</div>
<div class="modal-footer" style="border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
1、index.html引入jQuery文件,由于我有用到bootstrap,因此我引入了boostrap.css和bootstrap.js文件,要注意这些文件在文档中的位置和顺序;js文件一般放到最后在引入,由于bootstrap.js依赖jquery.文件,因此jquery.js要再比bootstrap.js先引入;
2、jq代码:
$('#textDiv').load('modal.html',function(){
$('#modalBox').modal('show');
});
--1、 使用load的方法将modal.html加载到index.html中id为textDiv的div中;
--2、在使用函数对modal.html中的元素操作(弹幕);
最新文章
- Javascript中event.srcElement和event.target的区别
- Java常见面试题(含答案)
- 获取本机内存使用信息、DataTable占用内存空间
- 带选择的sql简单用法
- PHP 数组 foreach引用导致的bug
- css3 动画 执行一次
- 点亮led【转载】
- python 调试工具
- Hadoop2安装
- Nexus5如何手动OTA更新系统到4.4.3、4.4.4及常见问题回答
- [读书笔记]算法(Sedgewick著)&#183;第一章(1)
- 基于wax的lua IOS插件开发
- 介绍几个移动web app开发框架
- LinQ to SQL 增,删,改 代码演示
- asp.net mvc 接入美圣短信 验证码发送
- EPPlusHelper
- SQL优化总结之一
- getString与optString的区别
- java开发mis系统所需技术及其作用
- Python:笔记1_字符串处理【转载】