插件，之前沒有動手寫的時候覺得很神秘，給人一種很難的感覺，但是萬事開頭難，先從最簡單的入手，記錄一下自己的學習軌跡。插件嘛，顧名思義，額外的組件，為了拓展功能而存在，那么Jquery的插件自然而然就是為了更加豐富Jquery的功能。
一般來說，插件需要定義在一個單獨的js文件中，網上很多的插件也都是這么做的，一來因為它是“插件”嘛，應該獨立存在，不應該侵入代碼，二來也可以清晰的維護好插件的內容。定義插件之前，我們應該都清楚在Jquery中，$是jQuery的別名，通過$.來調用庫中的方法也就是通過jQuery.來調用，此時可能會有一個問題，$符號是為數不多的可以當做別名的符號，很多插件也都用$來當做自己的別名，那么類庫和類庫之間就可能存在沖突，根據實際情況，我們需要通過調用jQuery.noConflict();方法來消除$別名的沖突，該方法使得jQuery讓出$別名，不和其他類庫沖突，如此一來，就只能通過jQuery.來調用方法。
下面就給出一個插件的案例jquery.plugIn.demo.js，在插件js中，為了兼顧開發效率并縮減代碼量，使用閉包的方式將jQuery關鍵字傳入，在閉包中繼續使用$作為別名。
1 //如果有必要，消除$符號的沖突
2 //jQuery.noConflict();
3 (function($){
4
5 //一個簡單的插件方法
6 $.simple = function(name){
7 alert("hello " + name);
8 };
9
10 //一個稍復雜的插件方法。如果某個函數需要多個參數，或含有可選的參數，使用options（對象的方式）對默認參數進行覆蓋
11 //p1和p2作為必選參數，options參數傳入可選參數將默認數值進行覆蓋
12 $.complex = function(p1,options,p2){
13 //alert(p1 + " " + options + " " + p2);
14
15 var ops = $.extend({
16 p3:'#3',
17 p4:'#4',
18 p5:'#4'
19 }, options||{});
20
21 alert(p1 + " - " + p2 +" - ops:" + "p3=" + ops.p3 + ";p4=" + ops.p4 + ";p5=" + ops.p5);
22
23 };
24 })(jQuery);
25
測試頁面：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>Jquery_16_Jquery插件基礎</title>
8 <meta name="author" content="Administrator" />
9 <script type="text/javascript" src="jquery-1.11.1.js"></script>
10 <!--
11 一般來說，插件需要定義在一個單獨的文件中，可以更好的維護
12 *需要在jquery類庫導入之后再導入
13 -->
14 <script type="text/javascript" src="jquery.plugIn.demo.js"></script>
15 <script type="text/javascript">
16 $(function(){
17 $.simple("duyt");
18
19 $.complex("I'am",{p3:"111",p4:"222",p5:"333"},"duyt");
20 $.complex("I'am",{},"duyt");
21 });
22 </script>
23 </head>
24 <body>
25 </body>
26 </html>
27
基于上述兩個簡單的插件方法，就可以試著寫一個具有功能性的插件了，下面實現一個處理長文本標題的小插件jquery.simpleTextCutter.plugIn.js
1 (function($){
2 //文本截留插件
3 $.toFixedStr = function(OriStr,options){
4 var settings = $.extend({
5 fill:".",//可指定的省略符號
6 length:12,//可指定的保留長度
7 fillLength:3//可指定的省略符號顯示長度，例如"XXX..."
8 },options||{});
9
10 if(OriStr.length >12){
11 OriStr = OriStr.substring(0,12);
12 for(var i = 0;i<settings.fillLength;i++){
13 OriStr+=settings.fill;
14 }
15 }
16 return OriStr;
17 };
18
19 })(jQuery);
20
測試頁面
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>Jquery_感受插件_簡易文本處理插件</title>
8 <meta name="author" content="Administrator" />
9 <script type="text/javascript" src="jquery-1.11.1.js"></script>
10 <script type="text/javascript" src="jquery.simpleTextCutter.plugIn.js"></script>
11 <!-- Date: 2014-12-01 -->
12 <script type="text/javascript">
13 $(function(){
14 $("ul li").each(function(index) {
15 var newStr = $.toFixedStr($(this).text(),{
16 fill:"~",
17 });
18 $(this).text(newStr);
19 });
20 });
21
22 </script>
23 </head>
24 <body>
25 <ul>
26 <li>123你你你444444444444444444</li>
27 <li>456我我我77777777</li>
28 <li>789他他他0000</li>
29 </ul>
30 </body>
31 </html>
32
以上就是實現jQuery插件的一個初步的感受