Proxy
1.4版本在jQuery命名空间下新增了一个名叫”proxy“的方法,该方法有两个参数:一个是作用域,一个是准备执行的处理方法。在Javascript中,this关键字很巧妙地自动执行父亲对象或某个DOM元素对象。当有时候我们希望this指向的不是一个DOM元素对象,而是希望它指向一个之前创建的对象。
举个列子,就很容易明白!比如,现在我们有一个app对象,该对象内部有一个”clickHandler“方法和一个命名为”config“的对象。代码如下:
var app = {
config: {
clickMessage: 'Hi!'
},
clickHandler: function() {
alert(this.config.clickMessage);
}
};
当我们调用app.clickHandler()方法时,app对象就有了自己的上下文对象:clickHandler方法中的this指向的是app对象。执行后会弹出内容为”Hi!“的提示框。若现在我希望将该app对象下的clickHandler方法绑定在一个超链接上,如下:
jQuery('a').bind('click', app.clickHandler);
而此时,当我们点击该超链接时,app对象下的clickHandler方法并不会执行,用Firebug测试则会提示”app.clickHandler is not a function!”。原因在于jQuery(以及绝大部分的事件对象)默认地将事件对象作为了该clickHandler方法的上下文对象,也就是此时this指向了a超链接标签元素。而我们的实际愿望是希望this执行app对象,那么1.4中我们就可以使用新增的proxy()方法来处理这一问题。代码如下:
jQuery('a').bind(
'click',
jQuery.proxy(app, 'clickHandler')
);
这样执行后提示框就会正常地弹出了。proxy()方法返回的是一个包装后的方法,它将执行你所期望的对象(通过第一个参数传递)。这在其他上下文对象中也很实用,比如给其他方法或插件传递回调函数。
函数延迟
在平时编写代码时,你或许发现有一个动画效果还没完成呢,下面的代码就已经执行完了。而我们希望的是等动画效果执行完成后或执行一段时间后再执行后面的代码。1.4版本中新增了delay()方法来延迟代码的执行。
jQuery1.32版本中实现代码:
setTimeout(500, function() {
// do something
});
jQuery1.4版本中实现代码:
jQuery('#foo')
.slideDown() // Slide down
.delay(200) // Do nothing for 200 ms
.fadeIn(); // Fade in
若你希望延迟一个动画队列比默认的“fx”(queue()函数的默认参数)还要慢的话,你只需要将这个queue的变量名当作delay()方法的第二个参数传递即可。
不用删除数据,即可删除掉DOM中的标签元素:
新版本中的.detach()方法允许你删除DOM中的任何标签元素,就像.remove()方法一样。但它与.remove()方法的不同之处是:.remove()是将标签直接删除,而.detach()方法则是将标签暂时移除,并通过方法内部调用.data()方法将标签缓存后赋予变量,再后面的代码中若还需要找回该标签,变量则会自动读取缓存的数据;另外若被.detach()方法移除的标签在移除前绑定了事件机制的话,在后面恢复后,该事件机制依然存在,无需再次绑定。
jQuery1.4版本中实现代码:
var foo = jQuery('#foo');
// Bind an important event handler
foo.click(function(){
alert('Foo!');
});
foo.detach(); // Remove it from the DOM
// … do stuff
foo.appendTo('body'); // Add it back to the DOM
foo.click(); // alerts "Foo!"
|
DOM控制方法支持回调函数:
在1.4版本中绝大部分的DOM控制方法只支持回调函数作为唯一的参数,除了极个别的(比如:.attr()、.css())方法中可以作为第二参数。这些回调函数将被匹配集合中所有元素所执行,
以确定哪些应作为该方法的实际值。
下面的这些DOM控制方法都支持回调函数:
- after
- before
- append
- prepend
- addClass
- toggleClass
- removeClass
- wrap
- wrapAll
- wrapInner
- val
- text
- replaceWith
- css
- attr
- html
在回调方法中,若你想访问该匹配集合的话,你需要使用”this”,或者序号index作为该方法的第一个参数。
jQuery1.4版本中实现代码:
jQuery('li').html(function(i){
return 'Index of this list item: ' + i;
});
当然你可以给该回调函数传递第二个参数,比如是在使用设置类的DOM控制方法(如:.html()、.attr()等),你若想得到当前的值。jQuery1.4版本中实现代码:
jQuery('a').attr('href', function(i, currentHref){
return currentHref + '?foo=bar';
});
正如你看到的一样,在使用.attr()和.css()方法是,当该方法的第一个是属性名称时,你可以将回调函数作为方法的第二参数。jQuery1.4版本中实现代码:
jQuery('li').css('color', function(i, currentCssColor){
return i % 2 ? 'red' : 'blue';
});