插件，之前没有动手写的时候觉得很神秘，给人一种很难的感觉，但是万事开头难，先从最简单的入手，记录一下自己的学习轨迹。插件嘛，顾名思义，额外的组件，为了拓展功能而存在，那么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插件的一个初步的感受