jQuery使用load方法加载其他文档内容

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

时间： 2024-10-27 08:28:46

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

LoadMxFile方法加载MXD文档

LoadMxFile方法加载MXD文档: private void loadMxFile方法ToolStripMenuItem_Click(object sender, EventArgs e) { //加载数据前如果有数据则清空 try { OpenFileDialog pOpenFileDialog = new OpenFileDialog();//打开文件 pOpenFileDialog.CheckFileExists = true;//判断文件存在 pOpenFileDialog.Tit

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

使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; set; } public string Url { get; set; } } 在HomeController中的Index方法,向视图传递一个Article强类型. public class HomeController : Controller { public ActionResult Ind

jQuery_review 之通过.load()方法来实现异步加载HTML文档

原生的ajax编写起来是相当麻烦的一件事情,我们不仅仅要处理不同浏览器下的XMLHttpRequest对象不同的初始化,还需要识记大量的XMLHttpRequest对象的属性和方法,而且做的很多都是重复性的工作,就如同jdbc的实现方式是一样的,JDBC有很多固定的模式,所以不管是Hibernate还是Ibatis亦或是Spring都使用模板模式来封装了大量相同的调用,让整个方法变得更加容易使用.对于程序员来说,这些都是一些非常好的事情,因为再也不用重复造轮子了,重复造轮子,成本高,性能也未必与

关于jquery中load()无法加载本地文件的问题

今天开始刚开始学习jQuery的AJAX就遇到一个头疼的问题,按照教程的代码,我编写的代码如下(使用VS Code编辑器): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LOAD方法</title> <script src="../jQuery库/jquery-3.2.1.min.js

【Jsoup学习礼记】从一个文件加载一个文档

问题在本机硬盘上有一个HTML文件,需要对它进行解析从中抽取数据或进行修改. 办法可以使用静态 Jsoup.parse(File in, String charsetName, String baseUri) 方法: File input = new File("/tmp/input.html"); Document doc = Jsoup.parse(input, "UTF-8", "http://example.com/"); 说明 pa

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

1.两个文件的代码如下: <script> function Ajax(){ //将9-4.html中的Ajax()函数进行修改 $.getScript('9-8.js',function(data){ var html ="<table border='1' cellpadding='2'>"; $.each(comments, function(Index, comment) { html += '<tr><td>' + commen

jQuery使用ajax()方法加载服务器数据

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为: jQuery.ajaxSetup([options])或$.ajaxSetup([options]) 可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值. 例如,先调用ajaxSetup()方法设置全局的Ajax选项值,再点击两个按钮,分别使用ajax()方法请求不同的服务器数据,并将数据内容显示在页面,如下图所示: 在浏览器中

c# 当前不会命中断点未加载该文档

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

//创建XmlDocument对象 XmlDocument xmlDoc = new XmlDocument(); //载入xml文件名 xmlDoc.Load(filename); //如果是xml字符串,则用以下形式 xmlDoc.LoadXml(xmldata); //读取根节点的所有子节点,放到xn0中 XmlNodeList xn0 = xmlDoc.SelectSingleNode("Document").ChildNodes; //查找二级节点的内容或属性 foreach