$.extend()和$.fn.extend()函數用法簡單介紹:標題中的兩個方法在jQuery插件開發中非常的重要，下麵通過簡單的代碼實例介紹一下它們的用法。本章節不會介紹它的原理，而是只給出它們的作用是什麼，能夠做什麼事情。jQuery.extend()可以為jQuery類添加新的方法，類似於c
$.extend()和$.fn.extend()函數用法簡單介紹:
標題中的兩個方法在jQuery插件開發中非常的重要，下麵通過簡單的代碼實例介紹一下它們的用法。
本章節不會介紹它的原理，而是只給出它們的作用是什麼，能夠做什麼事情。
jQuery.extend()可以為jQuery類添加新的方法，類似於c#或者java中的靜態方法。
jQuery.fn.extend()可以為jQuery的對象實例添加新的方法。
代碼實例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ jQuery.fn.Plugin=function(options){ $options=$.extend({ html:"沒有內容", css:{ "color":"red", "font-size":"12px" } }, options); return $(this).css({ "color":$options.css.color, }).html($options.html); } $('.antzone').Plugin({html:"螞蟻部落",css:{"color":"green","font-size":"12px"}}); }) </script> </head> <body> <ul> <li class="antzone">分享互助</li> <li class="antzone">分享互助</li> <li class="antzone">分享互助</li> <li class="antzone">分享互助</li> </ul> </body> </html>
上面的代碼自定義了一個簡單插件，這裡只介紹了$.fn.extend()的使用，其實$.extend()的使用也是同樣的道理，下麵介紹一下上面代碼的實現過程，更多內容可以參閱相關閱讀。
一.代碼註釋:
1.$(document).ready(function(){})，當文檔結構完全載入完畢再去執行函數中的代碼。
2.jQuery.fn.Plugin=function(options){}，為jQuery類的對象實例添加新的方法Plugin，參數是一個對象直接量，傳遞一些相應的參數，如果省略，則使用預設的參數。
3.$options=$.extend({
html:"沒有內容",
css:{
"color":"red",
"font-size":"12px"
}
},
options)
合併對象，從這個也可以看出來如果新添加的函數不傳遞參數，那麼就採用預設的參數，否則使用傳遞的參數。
4.return $(this).css({
"color": $options.css.color,
}).html($options.html)
設置元素的樣式和內容，並返回此對象，以便於鏈式調用。
二.相關閱讀:
1.jQuery.fn可以參閱jQuery.fn的作用是什麼一章節。
2.jquery.extend()可以參閱jquery.fn.extend()與jquery.extend()函數的作用一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14441
更多內容可以參閱:http://www.softwhy.com/jquery/
