此篇记录如何在指定 div 中嵌套一个页面

  • load() 方法:

    1. 使用 $.load() 直接导入一个页面
    $('#addPage_div').load("temp/handle.html", function () {
    //其他操作,可对载入的 handle.html 中元素进行操作
    });
    2. 加载页面片段
    $("#result").load("ajax/test.html #container");
    3. 以 POST 形式发送 附加参数 并在成功时显示信息
    $("#feeds").load("feeds.php", {limit: }, function(){
    alert("The last 25 entries in the feed have been loaded");
    });

    4.加载文章侧边栏导航部分至一个无序列表

    HTML 代码:
    <b>jQuery Links:</b>
    <ul id="links"></ul>
    jQuery 代码:
    $("#links").load("/Main_Page #p-Getting-Started li");
  • attr("src", "***.html")方法:

    前提:必须在要嵌入的页面中设置 <iframe>
  • iframe:

  • ajax() 方法:

    1. jQuery加载一个html页面到指定的div里.
    假设 a.html 和b.html在同一目录(比如:加载a.html里面的<div id=“row"></div>这个div里面的所有内容加载到b.html的这个div里<div id="content"></div>)
    //b.html
    <script >
    $(document).ready(function() {
    bodyContent = $.ajax({
    url: "b.html",
    global: false,
    type: "POST",
    data: ({
    id: this.getAttribute('row')
    }),
    dataType: "html",
    async: false,
    success: function(msg) {
    alert(msg);
    }
    })
    });
    </script>

    2. juqery $.ajax 请求另一个html页面的指定的“一部分”加载到本页面div,重点是一部分数据加载到本页面div

    大至思路如下:
    
    $.ajax( {
    url: url, //这里是静态页的地址
    type: "GET", //静态页用get方法,否则服务器会抛出405错误
    success: function(data){
    var result = $(data).find("另一个html页面的指定的一部分");
    $("本页面div").html(result); }
    });
    或参考下面的代码:
    $(function(){
    $.ajax({
    type:"POST",
    url:"LoginLoadArticle.ashx",
    data: "type="+escape("最新公告") ,
    success:function(msg){
    $(".gonggao").html(msg);
    },
    error:function(XMLHttpRequest, textStatus, thrownError){}
    }) })

参考:http://www.jb51.net/article/88495.htm

jquery 实践操作:div 动态嵌套页面的更多相关文章

  1. jquery 实践操作:div 动态嵌套(追加) div

    此片记录在指定 div 中动态添加 div html(): append(): 在被选元素的结尾(但仍在元素内部)插入指定的内容. 语法: $(selector).append(content); / ...

  2. jquery 实践操作:iframe 相关操作

    此篇记录关于HTML 的 iframe 元素 的相关记录 定义:iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 常用的基本 iframe 设置(详细设置属性参考API:http:/ ...

  3. jquery 实践操作:attr()方法

    此篇要记录的是 关于 jquery  的 attr() 方法 在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中 ...

  4. jquery 实践操作:load()方法

    最近决定总结下实际项目中的 JS 相关的一些操作,因此开启此系列,记录使用过程中用到的一些实用操作问题和解决方法,给自己一份记录. jquery load方法是对jQuery.ajax()进行封装以方 ...

  5. 静态web页面与动态web页面的区别

    一.静态web页面 在静态web程序中,客户端使用web浏览器经过网络连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务区我现在需要得到哪个页面,所有的请求交给web服务器,之后 ...

  6. jquery操作ajax返回的页面元素

    这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据.由于这是一个比较大比较全的一个完整项目,也没有那么多经历 ...

  7. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  8. JQuery Mobile - 解决动态更新页面内容,CSS失效问题!

    今天编写JQuery Mobile程序,需要对数组数据动态创建,并且每条数据对应一个复选框,于是我很顺利写了一个Demo,当我运行时候发现,和我期望的不一样!复选框确实创建出来了,但是却没有CSS效果 ...

  9. Jquery hover鼠标经过时弹出div动态提示语

    一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...

随机推荐

  1. 1074: [SCOI2007]折纸origami

    Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 372  Solved: 229[Submit][Status][Discuss] Descriptio ...

  2. Oracle问题分析采集数据的方法

    1.背景: 运维人员或多或少都会遇到分析问题.分析故障的时候,往往在碰到一些棘手的问题事,我们都会往更深层次的专家进行求助.不管是二线专家还是Oracle全球服务工程师(后文称GCS工程师),往往都会 ...

  3. SpringMVC解决前台传入的数组或集合类型数据

    1前台处理如下: $.ajax({ url:"saveMapInfo", type:"POST", dataType:"json", con ...

  4. MySQL - GROUP_CONCAT 使用方法

    如上图,我想把结果集中的三行链接成一行,则可这样写:   总结: GROUP_CONCAT函数默认是用','逗号链接,如果你加上第二个参数,则以',第二个参数值'逗号+第二个参数值链接,如下图     ...

  5. PhotoSwipe图片展示插件

    这个插件相当棒!功能也很强大,可以自行体会. 官方网址:http://www.photoswipe.com/ github地址:https://github.com/codecomputerlove/ ...

  6. 科学计算库Numpy——文件读写

    读文件 要读取的文件 有分隔符的文件 备注:delimiter分隔符. 有多余行的文件 备注:skiprows去掉几行. 指定列 备注:usecols指定使用哪几列. 写文件 保存后的文件 备注:fm ...

  7. Leetcode 96. 不同的二叉搜索树

    题目链接 https://leetcode.com/problems/unique-binary-search-trees/description/ 题目描述 给定一个整数 n,求以 1 ... n ...

  8. 继承Thread类使用多线程

    java实现多线程有两种方式,一种是继承Thread类,另外一种就是实现Runnable接口. 两种实现方法的优缺点: 使用Thread类实现多线程局限性就是不支持多继承,因为java是不支持类多继承 ...

  9. RSA进阶之低加密指数攻击

    适用场景: n很大,4000多位,e很小,e=3 一般来说,e选取65537.但是在RSA加密的时候有可能会选用e=3(不要问为什么,因为选取e =3省时省力,并且他可能觉得n在4000多位是很安全的 ...

  10. Linux 必要软件的安装与配置

    主要是记录一下,免得下次重装系统后又到处搜索.. 一.必要软件的安装 JDK 下载 tar.gz:http://www.oracle.com/technetwork/java/javase/downl ...