jQuery 插件運行機制和 $衝突解決

一、jQuery.fn.extend(object)

基本插件
假設咱們要建立一個插件，使一組元素中的文本變爲綠色。咱們要作的就是添加一個名爲greenify的函數， $.fn 將像其餘任何jquery對象方法同樣使用。

$.fn.greenify = function() {
this.css("color","green");
}
//使用
$("a").greenify();

鏈式操做

jQuery 的一大特性就是鏈式操做，這是你能夠將幾個操做連接到一個選擇器上。這是經過jQuery對象方法再次返回原始的jQuery對象來完成的。

$.fn.greenify = function() {
this.css("color","green");
return this;
}

$("a").greenify().addClass("greenified");

 保護 $ 並添加範圍

$ 變量在javascript 庫中很是的流行，若是你也使用了另一個庫，這就有可能發生$ 衝突，固然你可使用 jQuery.noConflict()方式解決。

jQuery.noConflict();
jQuery.("div p").hide();
// 其餘庫使用$
$("content").style.display = 'none';

運行jQuery.noConflict();將變量$ 的控制器讓渡給第一個實現它的庫。運行以後只能使用jQuery變量訪問jQuery 對象。雖然這樣解決了$衝突，可是破壞了插件的使用。

爲了與其餘插件一塊兒工做，而且使用$ 做爲jquery 的別名，咱們須要將全部代碼放入當即執行函數表達式中，而後傳遞該函數jQuery並命名該參數$。

(function($) {
$.fn.greenify = function() {
this.css("color","green");
return this;
}
}(jQuery));

接收選項

隨着插件愈來愈複雜，經過接收參數實現可定製化，最簡單的方法是使用對象字面量，特別是有不少參數時。

(function($) {
$.fn.greenify = function(options) {
var settings = $extend({
color: "#556b2f",
backgroundColor: "white"
},options);

return this.css: settings.color,
backgroundColor: settings.backgroundColor
});
}(jQuery));
//使用
$("div").greenify({
color: "orange"
})
// color 的默認值 #556b2f 就被取代爲橙色。

 二、$.extend(object)

做用：拓展jQuery對象自己，在jQuery命名空間上增長新函數

jQuery.extend({
min:function(a,b) {
return a < b ? a : b
},
max:function(a,b) {
return a > b ? a : b
}
});
// 使用
jQuery.min(2,3);
jQuery.max(4,5);