相關文章：
3.《Bootstrap開發漂亮的前端界面之自定義右鍵菜單》
什么是jQuery插件？
首先，來看看我們一般是如何使用jQuery，第一種方式：$.trim(" hello world ")，直接使用jQuery中方法，第二種方式：$("#myinput").val()，獲取頁面中的元素，然后使用jQuery對象中方法。兩種的區 別在於，第一種方式調用方法一般不涉及DOM，而第二種方式需要先獲取頁面中元素，然后再進行方法調用，方法的執行圍繞着DOM元素。trim、val方 法都是jQuery原生提供的，其實我們也可以編寫自己的方法，而我們自己寫的方法一般被稱為jQuery的插件。
現在我們先編寫兩個入門的插件:
需求一：獲取字符串路徑的中文件名；需求不涉及到任何的DOM，所以我們可以采用方式一模式來編寫我們的插件。
$本來一個函數，在javascript中一切皆對象，所以$也是一個對象，那么向jquery對象中添加新的方法也是可以行的。
<script type="text/javascript">
//jQuery對象添加自定義方法 $.getFileName=function(path){ if(!path){ return; } //使用正則表達式獲取路徑中的文件名部分 return /(?!.*\/).*/.exec(path+"")[0]; } //調用自定義插件 var fileName = $.getFileName("f:/abc/源代碼教育絕密資料.txt"); console.debug(fileName); </script>
第一個簡單插件就應經完成了，當然如果你的需求很復雜，你的代碼可能會更多。
需求二:獲取頁面中元素的元素的名字;需求中需要先有DOM元素，然后才能獲取DOM元素的名字。
首先通過$(選擇器)獲取頁面中元素對象，其實$(選擇器)函數的返回值返回的就是一個jQuery實例對象，JS中每個對象都有自己的原 型對象，jQuery實例對象的原型對象為jQuery.prototype或者$.fn，如果不知道”原型對象“是什么的童鞋自己百度一下，這個JS高 手必備的知識。（你可以嘗試執行： $.fn={};然后再去調用jquery對象的方法，你會發現都無法使用了）
//jQuery 實例對象的原型對象添加自定義方法 $.fn.tagName=function(){ return this[0].nodeName; }; $(function(){ //調用自定義插件 console.debug($("#mydiv").tagName()); });
第二個插件的功能主要涉及到了DOM元素的訪問；
右鍵菜單插件開發，本插件是以《Bootstrap開發漂亮前端界面之自定義右鍵菜單》為基礎，所以右鍵菜單的細節，不會在本文中描述。
仔細比對插件代碼與非插件代碼細微的差別，其實就是把以前寫死的東西使用this進行替換；
$(function(){ //調用代碼 $("#contextMenu").contextmenu(); });