理解jquery的$.extend()、$.fn和$.fn.extend()

jQuery为开发插件提拱了两个方法，分别是： 
jQuery.fn.extend(object); 

jQuery.extend(object); 

 

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

jQuery.extend()方法

 1 <div id="log"></div>
 2 <script>
 3 $(function () { 
 4     var object1 = {
 5         apple: 0,
 6         banana: {weight: 52, price: 100},
 7         cherry: 97
 8     };
 9     var object2 = {
10         banana: {price: 200},
11         durian: 100
12     };
13     /* object2 合并到 object1 中 */
14     $.extend(object1, object2);
15     var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
16         var arr = [];
17         $.each(obj, function(key, val) {
18             var next = key + ": ";
19             next += $.isPlainObject(val) ? printObj(val) : val;
20             arr.push( next );
21         });
22         return "{ " +  arr.join(", ") + " }";
23     };
24     $("#log").append( printObj(object1) );
25 })
26 </script>

给jquery添加静态方法

 1 <span style="font-size:18px;"><html> 
 2 <head> 
 3 <title></title> 
 4 </head> 
 5 <body> 
 6 <script type="text/javascript" src="jquery.2.0.3.js"></script> 
 7 <script type="text/javascript"> 
 8 $.extend({ 
 9 add:function(a,b){return a+b;}, 
10 minus:function(a,b){return a-b}, 
11 multiply:function(a,b){return a*b;}, 
12 divide:function(a,b){return Math.floor(a/b);} 
13 }); 
14 
15 var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7); 
16 console.log(sum); 
17 </script> 
18 </body> 
19 </html></span>

 

 

其他的也不一一写，中文文档

jQuery.fn.extend()

 1 <span style="font-size:18px;"><html> 
 2 <head> 
 3 <title></title> 
 4 </head> 
 5 <body> 
 6 <h3 class="ye">new soul</h3> 
 7 <h3 class="ye">new soul</h3> 
 8 <h3 class="ye">new soul</h3> 
 9 <h3 class="ye">new soul</h3> 
10 <script type="text/javascript" src="jquery.2.0.3.js"></script> 
11 <script type="text/javascript"> 
12 jQuery.fn.myPlugin = function(options) { 
13 $options = $.extend( { 
14 html: "no messages", 
15 css: { 
16 "color": "red", 
17 "font-size":"14px" 
18 }}, 
19 options); 
20 return $(this).css({ 
21 "color": $options.css.color, 
22 
23 }).html($options.html); 
24 } 
25 
26 
27 $('.ye').myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"20px"}}); 
28 </script> 
29 </body> 
30 </html> 
31 </span>

以及这个写的很好的文章

extend()很好用，js避不过去

posted @ 2017-06-27 11:51  Cein  阅读(232)  评论(0)  编辑  收藏  举报