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

  • load() 方法:

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

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

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

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

  • ajax() 方法:

    1. 1. jQuery加载一个html页面到指定的div里.
      假设 a.html b.html在同一目录(比如:加载a.html里面的<div id=“row"></div>这个div里面的所有内容加载到b.html的这个div里<div id="content"></div>)
    1. //b.html
    2. <script >
    3. $(document).ready(function() {
    4. bodyContent = $.ajax({
    5. url: "b.html",
    6. global: false,
    7. type: "POST",
    8. data: ({
    9. id: this.getAttribute('row')
    10. }),
    11. dataType: "html",
    12. async: false,
    13. success: function(msg) {
    14. alert(msg);
    15. }
    16. })
    17. });
    18. </script>

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

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

参考: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. C#的接口基础教程之五 实现接口

    1.显式实现接口成员 为了实现接口,类可以定义显式接口成员执行体(Explicit interface member implementations).显式接口成员执行体可以是一个方法.一个属性.一个 ...

  2. 微服务SpringCloud+Docker入门到高级实战(目录)

    第一章 课程介绍和学习路线 1.微服务架构SpringCloud课程介绍 简介:课程介绍和课程大纲讲解,讲课风格和重点内容理解技巧2.技术选型和学后水平 简介:课程所需基础和技术选型讲解,学完课程可以 ...

  3. eclipse部署web项目至本地的tomcat但在webapps中找不到问题

    一.发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并 ...

  4. 2018.11.3 Nescafe18 T2 太鼓达人

    题目 背景 七夕祭上,Vani 牵着 cl 的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队伍成员 XLk.Poet_shy 和 ly ...

  5. 【解题报告】AtCoder ABC115 (附英文题目)

    ------------------------------迟到的AK---------------------------------- A - Christmas Eve Eve Eve Time ...

  6. tab菜单的点击的动态效果和内容页面的关联显示jQuery

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML5/CSS3 第三章页面布局

    页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...

  8. 面试前赶紧看了5道Python Web面试题,Python面试题No17

    目录 本面试题题库,由公号:非本科程序员 整理发布 第1题: Flask中的请求上下文和应用上下文是什么? 第2题:django中间件的使用? 第3题: django开发中数据做过什么优化? 第4题: ...

  9. PAT basic 1087

    1087 有多少不同的值 (20 分) 当自然数 n 依次取 1.2.3.…….N 时,算式 ⌊n/2⌋+⌊n/3⌋+⌊n/5⌋ 有多少个不同的值?(注:⌊x⌋ 为取整函数,表示不超过 x 的最大自然 ...

  10. 组装需要的json数据格式

    在实际项目中有时候会遇到一些有特殊要求的控件,比如easyui-combogrid,加载的并不是常见的json格式,这里我遇到过需要加载类似省市县这种三级数据格式.最后也是从别人的博客中学到的如何组装 ...