jquery.fn jquery.extend jquery.fn.extend

最新推荐文章于 2022-08-06 17:53:05 发布

原创最新推荐文章于 2022-08-06 17:53:05 发布 · 490 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了jQuery中$.fn和$.extend的使用方法，包括如何通过$.fn扩展jQuery实例的方法，以及如何利用$.extend来添加静态方法和合并对象。

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。
如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.
那么你可以这样子：$("#div").abc();

jQuery为开发插件提拱了两个方法，分别是：

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。

fn是什么东西呢。查看jQuery代码，就不难发现。

复制代码代码如下:

jQuery.fn = jQuery.prototype ={ 

　　　init: function( selector, context ){//....　 

　　　//...... 

};

原来 jQuery.fn =jQuery.prototype.对prototype肯定不会陌生啦。
jQuery便是一个封装得非常好的类，比如我们用语句　$("#btn1") 会生成一个 jQuery类的实例。

jQuery.extend(object);　为jQuery类添加添加类方法，可以理解为添加静态方法。如：

复制代码代码如下:

$.extend({ 

　　add:function(a,b){returna+b;} 

}); 

便为　jQuery　添加一个为add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，
$.add(3,4); //return 7

jQuery.fn.extend(object);对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert当前编辑框里的内容。可以这么做：

jQuery代码

复制代码代码如下:

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val());
});
}

});

复制代码代码如下:

jQuery.fn = jQuery.prototype ={ 

　　　init: function( selector, context ){//....　 

　　　//...... 

};

复制代码代码如下:

$.extend({ 

　　add:function(a,b){returna+b;} 

}); 

复制代码代码如下:

$.fn.extend({ 

alertWhileClick:function(){ 

$(this).click(function(){ 

alert($(this).val()); 

}); 

} 

});

Query.fn.extend(object);给jQuery对象添加方法。这个应该很好理解吧。举个例子。

复制代码代码如下:

<span style="font-size:18px;"><html> 

<head> 

<title></title> 

</head> 

<body> 

<h3 class="ye">new soul</h3> 

<h3 class="ye">new soul</h3> 

<h3 class="ye">new soul</h3> 

<h3 class="ye">new soul</h3> 

<script type="text/javascript" src="jquery.2.0.3.js"></script> 

<script type="text/javascript"> 

jQuery.fn.myPlugin = function(options) { 

$options = $.extend( { 

html: "no messages", 

css: { 

"color": "red", 

"font-size":"14px" 

}}, 

options); 

return $(this).css({ 

"color": $options.css.color, 

}).html($options.html); 

} 

$('.ye').myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"20px"}}); 

</script> 

</body> 

</html> 

</span>

好的，上面你也看到了一点点$.extend()的用法。

1.合并多个对象。

这里使用的就是$.extend()的嵌套多个对象的功能。

所谓嵌套多个对象，有点类似于数组的合并的操作。

但是这里是对象。举例说明。

复制代码代码如下:

<span style="font-size:18px;">//用法: jQuery.extend(obj1,obj2,obj3,..) 

var Css1={size: "10px",style: "oblique"} 

var Css2={size: "12px",style: "oblique",weight: "bolder"} 

$.jQuery.extend(Css1,Css2) 

//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性 

// Css1 = {size: "12px",style: "oblique",weight: "bolder"} 

</span>

2.深度嵌套对象。

复制代码代码如下:

<span style="font-size:18px;"> jQuery.extend( 

{ name: “John”, location: { city: “Boston” } }, 

{ last: “Resig”, location: { state: “MA” } } 

); 

// 结果: 

// => { name: “John”, last: “Resig”, location: { state: “MA” } } 

// 新的更深入的 .extend() 

jQuery.extend( true, 

{ name: “John”, location: { city: “Boston” } }, 

{ last: “Resig”, location: { state: “MA” } } 

); 

// 结果 

// => { name: “John”, last: “Resig”, 

// location: { city: “Boston”, state: “MA” } } 

</span>

3.可以给jQuery添加静态方法。

复制代码代码如下:

<span style="font-size:18px;"><html> 

<head> 

<title></title> 

</head> 

<body> 

<script type="text/javascript" src="jquery.2.0.3.js"></script> 

<script type="text/javascript"> 

$.extend({ 

add:function(a,b){return a+b;}, 

minus:function(a,b){return a-b}, 

multiply:function(a,b){return a*b;}, 

divide:function(a,b){return Math.floor(a/b);} 

}); 

var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7); 

console.log(sum); 

</script> 

</body> 

</html></span>