jquery load 事件用法

jquery load 事件用法

如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。

注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。

调用load方法的完整格式是:

load( url, [data], [callback] ),

其中:

  • url

    :是指要导入文件的地址。

  • data

    :可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。

  • callback

    :可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数。

    一:如何使用data

    1.加载一个php文件,该php文件不含传递参数

    $("#myID").load("test.php");

    //在id为#myID的元素里导入test.php运行后的结果

    2. 加载一个php文件,该php文件含有一个传递参数

    $("#myID").load("test.php",{"name" : "Adam"});

    //导入的php文件含有一个传递参数,类似于:test.php?name=Adam

    3. 加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔

    $("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"});

    //导入的php文件含有一个传递参数,类似于:test.php?name=Adam&site=61dh.com

    4. 加载一个php文件,该php文件以数组作为传递参数

    $("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

    //导入的php文件含有一个数组传递参数。

    注意:使用

    load

    ,这些参数是以POST的方式传递的,因此在test.php里,不能用GET来获取参数。

    二:如何使用callback

    比如我们要在

    load方法

    得到服务器响应后,慢慢地显示加载的内容,就可以使用

    callback

    函数。代码如下:

    $("#go").click(function(){

    $("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){

    $("#myID").fadeIn('slow');}

    );

    });

    备注:

    在看jQuery源码时发现的,拿出来和大家分享。在load的url里加上空格后面就可以跟选择器了。

    举例:我需要load  test.html的内容,并只要取id为a的内容。

    $("body").load("test.html #a");
使用load的方法 放到body里面 可以用loading做包含文件 ----不错
 <script type="text/javascript">
  $("#left").load("xx.html");
   $("#right").load("xxx.html");
 </script>

随机推荐

  1. startUML破解方式

    StarUML官方下载地址:http://staruml.io/download StarUML是一个非常好用的画UML图的工具,但是它是收费软件​,以下是破解方法: ​1.使用Editplus或者N ...

  2. html小结

    网页开发工具:visual studio.net网页构架,方便设置标签属性,颜色值得属性有两种. 一.html的基本框架结构: <html> ----- <head> < ...

  3. Duilib源码分析(三)XML解析器—CMarkup

    上一节介绍了控件构造器CDialogBuilder,接下来将分析其XML解析器CMarkup: CMarkup:xml解析器,目前内置支持三种编码格式:UTF8.UNICODE.ASNI,默认为UTF ...

  4. Linux内核--内核数据类型

    转自:http://www.linuxidc.com/Linux/2013-12/93637.htm 将Linux 移植到新的体系结构时,开发者遇到的若干问题都与不正确的数据类型有关.坚持使用严格的数 ...

  5. F#之旅3 - F# PK C#:简单的求和

    原文链接:https://swlaschin.gitbooks.io/fsharpforfunandprofit/content/posts/fvsc-sum-of-squares.html Comp ...

  6. UWP学习记录4-设计和UI之控件和模式1

    UWP学习记录4-设计和UI之控件和模式1 1.控件和事件简介 在 UWP 应用开发中,控件是一种显示内容或支持交互的 UI 元素. 控件是用户界面的构建基块. 我们提供了超过 45 种控件供你使用, ...

  7. html学习第三天—— 第11章 盒子模型 div

    盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...

  8. VS 编辑器扩展辅助工具

    [工具]——[扩展和更新]——[联机]输入 C# outline 2015

  9. jsp中如何判断el表达式中的BigDecimal==0

    比较蠢一点的做法: <c:if test="${not ((someBigDecimal < 0) or (someBigDecimal > 0))}"> ...

  10. 树链剖分+线段树 CF 593D Happy Tree Party(快乐树聚会)

    题目链接 题意: 有n个点的一棵树,两种操作: 1. a到b的路径上,给一个y,对于路径上每一条边,进行操作,问最后的y: 2. 修改某个条边p的值为c 思路: 链上操作的问题,想树链剖分和LCT,对 ...