這次帶給大家jQuery自訂函數應用程式以及解析，使用jQuery自訂函數的注意事項有哪些，下面就是實戰案例，一起來看一下。
jQuery自訂函數
1. 如何擴充jQuery函數？
jQuery有兩種自訂函數擴充：一種是類別層級的函數開發，相當於將jQuery看做一個類，給類別本身擴充函數，也叫作全域函數，。 jQuery的全域函數是屬於jQuery命名空間的函數，另一種是物件層級的函數開發，也就是為jQuery選擇器產生的物件新增方法。下面就兩種函數的開發做詳細的說明。
1).全域函數開發：
類別層級的外掛程式開發最直接的理解就是為jQuery類別加入類別方法，可以理解為新增靜態方法。典型的例子就是jQuery.AJAX()這個函數，將函數定義在jQuery的命名空間中。關於類別層級的外掛程式開發可以採用以下幾種形式進行擴充：
a. 新增一個新的全域函數
新增一個全域函數，我們只需如下定義：
jQuery.test = function() {
alert(‘This is a test!!!’);
};登入後複製
然後透過調用$.test();即可運作。
b. 增加多個全域函數
新增多個全域函數，可採用如下定義：
jQuery.test = function() {
alert(‘This is a test!!!’);
};
jQuery.test1 = function() {
alert(‘This is a test1!!!’);
};登入後複製
呼叫方式跟上面一樣。
c. 使用jQuery.extend(object)
jQuery.extend({
test:function() {
alert(‘This is a test!!!’);
},
test1: function() {
alert(‘This is a test1!!!’);
},
add:function(a,b){
return a+b;
}
});登入後複製
2).物件層級函數開發：
物件層級的函數開發可以有以下兩種方式
a.
(function(){
.fn.extend({
sayHello:function(){
alert(‘sayHello’);
}
}) ;
})(jQuery);登入後複製
說明：該方式也可以直接用jQuery.fn.extend定義，這樣寫是為了將美元符號限制在一個命名空間內，定義過程中可以繼續使用該符號，防止與其他庫的$符號衝突，沒有其他作用。
b. 接受options參數以控制插件的行為
當自訂函數需要傳遞很多參數的時候，參數過多，可讀性較差，我們可以考慮傳遞一個對象，比方說，我們要定義一個為p設定背景色和文字顏色的函數，可以這樣寫：
$.fn.extend({
setColor:function(options,callback){
var defaults = {
fontcolor: ‘red’,
background: ‘yellow’
};
$.extend(defaults, options); //这句话是将default和options合并成一个对象
//设置样式
console.log(this);
$(this).css('background-color',defaults.background);
$(this).css('color',defaults.fontcolor);
}
}) ;登入後複製
呼叫函數測試程式碼：
var options={
fontcolor: ‘blue’,
background: ‘red’
};
$(function(){
$(".table").setColor(options);
});登入後複製
我們會看到table背景紅色，字體都是藍色。
2. 分析總結
jQuery的API手冊中，我們看到，extend其實是掛載在jQuery和jQuery.fn上的兩個不同方法，儘管在jQuery內部jQuery .extend()和jQuery.fn.extend()是用相同的程式碼實現的，但是它們的功能卻不太一樣。官方的解釋:
jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中)
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的
登入後複製
jQuery實例方法)
可以看出，jQuery有靜態方法和實例方法之分, 那麼jQuery.extend()和jQuery.fn.extend()的差別就是一個用來擴充靜態方法，一個用來擴充實例方法。
jQuery自訂部分原始碼如下：
jQuery.extend = jQuery.fn.extend = function(obj){
//obj是传递过来扩展到this上的对象
var target=this;
for (var name in obj){
//name为对象属性
//copy为属性值
copy=obj[name];
//防止循环调用
if(target === copy) continue;
//防止附加未定义值
if(typeof copy === ‘undefined’) continue;
//赋值
target[name]=copy;
}
return target;
}登入後複製
JavaScript方法也是對象，所以所謂的擴充函數，也即是給jQuery.extend, jQuery.fn.extend這兩個物件擴充新的屬性，形參就是我們自訂的函數，最後會被拷貝成為target物件返回，並合併到jQuery.extend對象，或者jQuery.fn.extend物件中，本質上就是相當於給jQuery類別本身增加方法或者給jQuery物件的prototype物件增加方法。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
如何使用jquery的分頁外掛
怎麼做出京東商品詳情的放大鏡效果
javascript如何實現小球跳動效果
#
以上是jQuery自訂函數應用程式以及解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
