編寫自己的jQuery插件簡單實現(xiàn)代碼

更新時間：2011年04月19日 23:24:42 作者：

用了這長時間的jQuery,一直也沒怎么寫過jQuery插件，今天簡單實現(xiàn)倆個插件，鞏固下基礎(chǔ)知識。

這里只闡述如何編寫自己的插件，至于要實現(xiàn)什么功能，要因人而異了...好了，下面開始...
jQuery插件主要分為三種
1、封裝對象方法的插件
2、封裝全局函數(shù)的插件
3、擴展選擇器的插件
這里只編寫前倆種，即比較常見的..
大多數(shù)插件都是已這種形式編寫的：

復(fù)制代碼代碼如下:

(function ($) { 
/* 這里放置代碼 */ 
})(jQuery); 

這樣的好處是函數(shù)內(nèi)部依然可以使用$作為jQuery的別名，而不影響到其他庫使用$
jQuery提供了倆個擴展用于編寫插件
$.fn.extend({});用于擴展第一種
$.extend({});用于擴展第二種
以下為實現(xiàn)效果截圖和代碼

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title></title> 
<style type="text/css"> 
li { border: 1px solid #000; cursor: pointer; width: 200px; display: block; } 
</style> 
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
(function ($) { 
　　　　$.fn.extend({ 
　　　　　　"chgSC": function (options) { 
　　　　　　　　 options = $.extend({ FontSize: "100px", Color: "red" }, options); //這里用了$.extend方法，擴展一個對象 
return this.hover(function () { //return為了保持jQuery的鏈?zhǔn)讲僮?
　　　　　　　　　　 $(this).css({ "fontSize": options.FontSize, "color": options.Color }); 
　　　　　　　　　　 }, function () { 
　　　　 $(this).css({ "fontSize": "", "color": "" }); 
　　　　　　　　　　 }); 
} 
}); 
$.extend({ 
　　　　　　　　"urlParam": function () { 
　　　　　　　　　　 var pageUrl = location.search; 
　　　　　　　　　　　　 if (pageUrl != "") 
　　　　　　　　 return pageUrl.slice(1); 
　　　　　　　　　　 else 
　　　　　　　　　　 return "沒有參數(shù)"; 
　　　　　　　　　　 } 
　　　　　　　　}); 
})(jQuery); 
$(function () { 
　　　　$("li").chgSC({ FontSize: "130px" }); 
　 alert($.urlParam()); 
}); 
</script> 
</head> 
<body> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
</body> 
</html> 