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. 完全卸载AndroidStudio

    一:卸载Android Studio 由于从1.5正式版直接升级到2.1的版本,整个项目构建都变得异常的慢,所以决定卸载重新安装2.0的正式版.但是Mac下使用dmg安装的app很多都是不能使用拖拽的 ...

  2. EF多对多更新报错(TableNoTracking引发的bug)

    实体映射关系如下,SISTUser和SISTUserRoles存在多对多的关系,生成中间表 public partial class SISTUserMap: EntityTypeConfigurat ...

  3. design包 TabLayout使用

    类似"网易新闻"UI设计就很好,顶部是导航,下面是各个页面.如图 这种效果使用design包中的TabLayout可以轻松的实现.   一.分析TabLayout 常见 UI 上图 ...

  4. Java 8 新特性之泛型的类型推导

    1. 泛型究竟是什么? 在讨论类型推导(type inference)之前,必须回顾一下什么是泛型(Generic).泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据 ...

  5. postgresql 设置只读用户

    postgresql 设置只读用户 ` CREATE USER readonly WITH ENCRYPTED PASSWORD 'ropass'; alter user readonly set d ...

  6. 权限管理[Linux]

    chown username file,... 改变文件的属主(只有管理员可以使用此命令) -R:修改目录及其内部文件的属主 -reference=somefile_path file,...把想要设 ...

  7. 2016-11-05实战-定义ssh服务的日志

    1.编辑/etc/rsyslog.conf 输入 local 0 .*     /var/log/sshd.log   #日志的保存路径 2.定义ssh服务的日志级别 编辑sshd服务的主配置文件:/ ...

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

    UWP学习记录6-设计和UI之控件和模式3 1.按钮 按钮,响应用户输入和引发 Click 事件的控件. 使用<Button>就能创建一个按钮控件了.按钮是 ContentControl, ...

  9. Java集合框架练习-计算表达式的值

    最近在看<算法>这本书,正好看到一个计算表达式的问题,于是就打算写一下,也正好熟悉一下Java集合框架的使用,大致测试了一下,没啥问题. import java.util.*; /* * ...

  10. Ubuntu菜鸟入门(六)—— 有道词典安装

    一.在有道辞掉官网上下载安装包: youdao-dict_1.1.0-0-ubuntu_amd64.deb 二.安装 1.打开下载目录,进行安装 sudo dpkg -i youdao-dict_1. ...