1、简介
jquery为开发插件提供了两个方法:
* jquery.extend(object); 为jquery类本身添加新的方法
* jquery.fn.extend(object); 用来为jquery对象添加新的方法
2、理论介绍
分析这两个方法,不同点就在于中间多了一个.fn,那么这个.fn又是什么意思呢?
$.fn是指jquery的命名空间,加了fn的方法和属性,会对jquery的每一个实例有效。
换种说法来解释的话:
jquery本身是一个类,有它的属性和方法,赤裸裸的“万物皆对象”嘛,
加了.fn的方法就是相当于给这个类中添加了一个成员函数,成员方法,也就是说每次对这个类实例化的时候,实例化对象都可以调用这个方法。
而没有加.fn的方法,则是类似于加了一个静态函数,使用的时候可以直接调用。
3、代码类比
如果单纯的解释不清楚话,我们可以用java代码来类比下:
//用这个类来代替jQuery
public class Jquery{
private String div; //有默认的属性
public void fade(){ //有默认的方法
...
}
}
//用这个类来代替jQuery
public class Jquery{
private String div;
public void fade(){
...
}
public static void scrolltotop(){ //添加了一个静态方法
...
}
<span style="font-size:14px;">}</span>
而如果执行的是.fn.extend,则完成的代码则为:
//用这个类来代替jQuery
public class Jquery{
private String div;
public void fade(){
...
}
public void scrolltotop(){
...
}
}
Jquery jquery=new Jquery;
jquery.scrolltotop();
4、实例分析
我们用“返回顶部”来作为一个应用实例。首先我们用.extend来实现下,并模拟调用
;(function($){
$.extend({
scrolltotop:function(speed){
speed=typeof speed==="number"?speed:500;
$("#toTop").click(function(event){
$("html,body").stop().animate({
scrollTop:'0px'
},speed)
});
},
});
})(jQuery)
<script type="text/javascript">
$.scrolltotop(400);
</script>
<pre name="code" class="javascript">;(function($) {
$.fn.extend({
scrolltotop:function(speed){
speed=typeof speed==="number"?speed:500;
$("html,body").stop().animate({
scrollTop:'0px'
},speed);
return this;
}
});
})(jQuery);<script type="text/javascript">
$("#totop").click({
$("body").scrolltotop(400);
return false;
})
</script>
不知道这两个究竟孰优孰劣,不过灵活性上个人更倾向于后者。当然要区分不同的功能,像整个网站的"回到顶部"只有一个,用前者也更简便吧。
本文介绍了jQuery提供的两种插件开发方法:$.extend()用于为jQuery类本身添加方法;$.fn.extend()用于为jQuery对象添加方法。通过Java代码类比及实例分析,详细阐述了这两种方法的区别及其应用场景。

被折叠的 条评论
为什么被折叠?



