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

时间:2021-08-27 18:48:49

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避不过去