編寫JQuery外掛程式-3

標籤：

該瞭解我們也知道的差不多了，接下來編寫我們第一個jq外掛程式吧

封裝對象方法的外掛程式

我們編寫一個設定和擷取顏色的外掛程式，我們需要實現兩個功能

1、設定匹配元素的顏色

2、擷取匹配元素（元素集合的第一個）的顏色

我們採用jQuery.fn.extend()，代碼如下：

;(function($){    /* code */})(jQuery)

這是最外層的架構，接下來；

   ;(function($){        $.fn.extend({            color:function(val){                // code            }        });    })(jQuery)

我在裡面添加相應的代碼

;(function($){        $.fn.extend({            color:function(val){                console.log(val);                if(val == undefined){                    return this.css(‘color‘);                }                    else{                    return this.css(‘color‘,val);                }            }        });    })(jQuery)

 

我們採用jq 的css()方法和擷取顏色值；外掛程式的this指向的是jq對象，如果外掛程式不返回特定的值或字串，應該使其具有可連性，為此直接返回this對象，由於css()方法定義了的返回對象，直接返回即可；

封裝我們的jq.color.js

頁面調用 該js

console.log($("div").color());

console.log($("div").color("red"));

 

編寫JQuery外掛程式-3