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中的元素操作（弹幕）；

jQuery使用load方法加载其他文档内容的更多相关文章

  1. 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点

    使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...

  2. 打开地图文件和shape文件代码加载Mxd文档

    代码加载Mxd文档 用代码添加Mxd文档,用到AxMapControl.LoadMxFile(sFilePath),我们只要将Mxd文档的路径传给这个方法即可 /// <summary>  ...

  3. jquery中的load方法加载页面无法缓存问题

    在A页面中调用JQuery中的load方法,加载另一个B页面,B页面中的样式文件和JS文件无法从浏览器缓存中获取,每次都是实时获取.这是因为B页面的HTML经load方法处理后,会为每个样式和JS文件 ...

  4. Jquery的Ready方法加载为什么两次？

    Ready方法会调用两次? 查看对应的页面是否存在<iframe src="#" --> 存在iframe加载这个页面的时候,页面就会加载两次. $(document) ...

  5. jQuery的$.getScript方法去加载javaScript文档解析

    1.两个文件的代码如下: <script> function Ajax(){ //将9-4.html中的Ajax()函数进行修改 $.getScript('9-8.js',function ...

  6. C# 加载xml文档文件及加载xml字符串

    //创建XmlDocument对象 XmlDocument xmlDoc = new XmlDocument(); //载入xml文件名 xmlDoc.Load(filename); //如果是xml ...

  7. iframe加载的文档高度

    var clientHeight = $("#iframe").contents().find("body").height();

  8. pyqt5加载pdf文档失败

    import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QFileDialog from PyPDF2 import Pdf ...

  9. 使用jquery的load方法设计动态加载，并解决浏览器前进、后退、刷新等问题

    继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后 ...

随机推荐

  1. ShopNC小实例

    shopnc 之模式: shopnc一般的url访问为:http://localhost/shopnc1/admin/index.php?act=sui&op=hello Controller ...

  2. 为什么高手离不了Linux系统？这就是我的理由

    摘要: 通过本文来记录下我在Linux系统的学习经历,聊聊我为什么离不了Linuxx系统,同时也为那些想要尝试Linux而又有所顾忌的用户答疑解惑,下面将为你介绍我所喜欢的Linux系统,这里有一些你 ...

  3. [转载]四大Java EE容器

    转载自: https://my.oschina.net/diedai/blog/271367 现在流行的Java EE容器有很多:Tomcat.JBoss.Resin.Glassfish等等.下面对这 ...

  4. 001 今天开始系统学习C#

    2016-01-16 之前只是大概了解过c#语言,感觉掌握不牢靠.现在开始系统学习C#.现以该博客作为学习笔记,方便后续查看.C# 目标:系统掌握c#知识 时间:30天 范围:C#基础,Winform ...

  5. 安装生物信息学软件-Samtools

    装完Bowtie2,官方文档给出的栗子说可以玩一玩samtools,所以我入个坑 参考这篇http://m.010lm.com/roll/2016/0620/2343389.html Step 1: ...

  6. 【Windows批处理II】类C语言的学习和思考

    0)@不显示该行 1)随时删除qq下所有gif文件(a.bat),只要能达到目的死循环也可以: @echo off \Tencent\AD\*.gif del C:\Progra~\Tencent\A ...

  7. Asp.net中Json的序列化和反序列化（二）

     三.JSON序列化和反序列化日期时间的处理 JSON格式不直接支持日期和时间.DateTime值值显示为“/Date(700000+0500)/”形式的JSON字符串,其中第一个数字(在提供的示例中 ...

  8. 1、JS的数据类型

    一.分类:JS有6种数据类型: 1.string 2.undefined 3.number 4.null 5.boolean 6.object(包含函数.数组.日期等) 二.隐式转换 1.+和- va ...

  9. C++静态成员函数小结（转）

    类中的静态成员真是个让人爱恨交加的特性.我决定好好总结一下静态类成员的知识点,以便自己在以后面试中,在此类问题上不在被动. 静态类成员包括静态数据成员和静态函数成员两部分. 一 静态数据成员: 类体中 ...

  10. Activity 和 生命周期: 创建

    了解了整体的android创建流程之后,就分析一下到底这个过程中做了什么? activity创建中开始时由activityStack中的realstartActivityLocked函数中调用了act ...