jquery中方法擴展 ($.fn & $.extend) 學習筆記

A、$.fn

一、$.fn.method() 函數爲jQuery對象擴展一個屬性和方法(主要用於擴展方法) ；method 爲自定義方法名 （$.fn 等效 $.prototype）

 1   $.fn.borderSet = function () {
 2     this.each(function () {
 3       $(this).css("border", "solid pink 2px");
 4     });
 5     return this;
 6   };
 7   $.fn.textColor = function ($color) {
 8     this.each(function () {
 9       $(this).css("color", $color);
10     });
11     return this;
12   };
13 
14   $.fn.textSize = function () {
15     this.each(function () {
16       $(this).css("font-size", '40px');
17     });
18     return this;
19   };

二、$.fn.extend() 函數爲jQuery對象擴展一個或多個實例屬性和方法(主要用於擴展方法)

 1 $.fn.extend({
 2     borderSet: function () {
 3       this.each(function () {
 4         $(this).css("border", "solid pink 2px");
 5       });
 6       return this;
 7     },
 8     textColor: function ($color) {
 9       this.each(function () {
10         $(this).css("color", $color);
11       });
12       return this;
13     },
14     textSize: function () {
15       this.each(function () {
16         $(this).css("font-size", '40px');
17       });
18       return this;
19     }
20   });

 

調用：

1 $('.test').borderSet();
2 $('.test').textColor('green');
3 $('.test').textSize();
4 
5  $('.test').borderSet().textColor('green').textSize();//方法包含return this,支持鏈式調用

 

B、$.extend

一、$.extend() 函數用於將一個或多個對象的內容合併到目標對象。對象具備相同的屬性，則後者覆蓋前者的屬性值

1 var obj_1 = {A: 0, B: 9};
2 var obj_2 = {A: 1, C: 2};
3 $.extend(obj_1, obj_1);/* obj_2 合併到 obj_1 中 */
4 console.log(obj_1);
5 console.log(obj_2);

二、$.extend({}) 爲jQuery類擴展方法

1   $.extend({
2     alertText: function ($text) {
3       alert($text);
4     }
5   });
6 
7   $.alertText('this is a test !!!');