时光博客 - WEB开发中的可用性和用户体验
Tag: jquery

jQuery的load函数

jqueryload函数,有2种载入方式,一种是GET,一种是POST,下面我们看下手册中记载的说明。

在每一个匹配元素的load事件中绑定一个处理函数。

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

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

再来看下关于jQuery的函数介绍

  1. load(url, [data], [callback]) 
  2. url  String  待装入 HTML 网页网址。 
  3. data (可选) Map,String  发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。 
  4. callback (可选) Callback  载入成功时回调函数。 

data数据是可选取的,如果不填写data数据,jQuery则采用GET方式来请求指定的网页,如果填写了,则采用POST方式,同时将参数data传递给页面。

下面看下jQuery 1.4.2里面关于load函数原型的代码:

  1. load: function( url, params, callback ) { 
  2.         if ( typeof url !== "string" ) { 
  3.             return _load.call( this, url ); 
  4.  
  5.         // Don't do a request if no elements are being requested 
  6.         } else if ( !this.length ) { 
  7.             return this
  8.         } 
  9.  
  10.         var off = url.indexOf(" "); 
  11.         if ( off >= 0 ) { 
  12.             var selector = url.slice(off, url.length); 
  13.             url = url.slice(0, off); 
  14.         } 
  15.  
  16.         //默认为使用GET方式请求页面 
  17.         var type = "GET"
  18.  
  19.         // 如果有data参数,检测是否为函数 
  20.         if ( params ) { 
  21.             // If it's a function 
  22.             if ( jQuery.isFunction( params ) ) { 
  23.                 // We assume that it's the callback 
  24.                 callback = params; 
  25.                 params = null
  26.  
  27.             // 不是函数,则构建成一个字符串 
  28.             } else if ( typeof params === "object" ) { 
  29.                 params = jQuery.param( params, jQuery.ajaxSettings.traditional ); 
  30.                 //使用POST方式传递参数 
  31.                 type = "POST"
  32.             } 

也就是我们在处理url页面时,含data参数的时候,比如:ID=1233,USERID=liupeng 我们应该使用$_POST变量来接受,没有data参数的时候使用$_GET。

ImageSwitch For jQuery

最近在寻找图片切换效果,在网上找到了个不错的jquery版的图片切换效果,支持多种样式,纯js实现,视觉上绝对不逊色于FLASH。废话不多说看下效果图

兼容性:完美兼容Firefox 3.5.5 for win ,IE6,IE7,IE8,其他浏览器未测试

独立预览地址:http://liupeng.us/demo/jQuery/ImageSwitch/

示例代码:ImageSwitch_jQuery.rar

jQuery Object and Dom

项目碰到一个问题,问题大概是这样的:

  1. <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  2.     <tr class="line1" filetype="a"> 
  3.       <td></td> 
  4.     </tr> 
  5.      <tr class="line2" filetype="b"> 
  6.       <td></td> 
  7.     </tr> 
  8.   </table> 

需要对上面table的每个tr(N行)绑定事件,对filetype="a"和filetype="b"的绑定不同的的右键菜单。右键菜单是通过jQuery插件contextmenu实现的。

想绑定事件,自己只能想到2种方案:

  • 第一:使用jquery的选择符分别筛选出filetype为a和b的。
  • 第二:使用普通的dom对象,通过getAttribute实现。

第一种方法尝试了,发现jQuery不支持自定义选择符,也就是类似 $("input[name='newsletter']")的标签。可能也有,但是由于项目紧没有去尝试。

第二中方法,使用普通的DOM对象来获取不同的filetype,然后给tr做绑定,但是问题来了,jQuery的插件只支持jQuery对象。上网搜索了下发现原来DOM对象转换成jQuery对象非常简单,只要在DOM对象外面加入符号"$"就可以了。比如

  1. //普通的DOM对象 
  2. var otrs = document.getElementById("filelist").getElementsByTagName("tr"); 
  3.  
  4. //jQuery对象 
  5. jotrs = $(otrs); 

经常会碰到jQuery与原生的JS混写的时候,也不知道这样的效率如何,转换成jQuery对象的时候,会带来多大的性能损耗。

另外jQuery对象转换成DOM对象稍微要复杂一点,由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。

  1. $("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5] 

这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:

  1. $("#msg").html(); 
  2. $("#msg")[0].innerHTML; 
  3. $("#msg").eq(0)[0].innerHTML; 
  4. $("#msg").get(0).innerHTML;