示例插件：打算选用一个动态生成的无序列表，让列表的前10项可见，剩下的项处于隐藏状态，使用一个简单的显示/隐藏导航控制隐藏项是否可见。
1，插件的结构
插件的基本结构，所有的Jquery插件都声明为jQuery.fn对象的方法：
jQuery.fn.showhidePlugin = function(){
//插件相关代码
}
我们使用如下代码使用这个插件：
$('.selector').showhidePlugin();
为了和已有插件保持一致，我建议在保存插件时采用jQuery.pluginname.js这种命名格式。
注意：我没有使用$别名，而是实用jQuery以避免任何可能的命名冲突。如果更喜欢实用$而不是Jquery ,可以像下面这样把插件代码封装在一个自执行的匿名函数中，就能够安全地在插件内使用$别名，不会引起任何问题。
（function($){
jQuery.fn.showhidePlugin = function(){
//插件相关代码
}
}）（jQuery）;
2,设定插件选项
通过传递给插件方法一个options参数，我们就可以让插件支持设置选项。我们使用一个JSon对象作为插件的默认选项。
我们使用一个JSON对象作为插件的默认选项，这个插件有3个默认选项----numShown、showText和hideText。默认设置在插件内部初始化，运行时传递进来的用户选项会覆盖掉默认设置。
（function($){
jQuery.fn.showhidePlugin = function(options){
//设定默认值，用逗号分隔选项
var defaults = {
numShown:10,
showText:'Show More Links',
hideText:'Hide Links'
}
};
})(jQuery);
接下来，使用$.extend方法合并默认选项和用户选项。如果调用时提供了用户选项，它们将覆盖掉插件内部声明的默认选项。
.extend()允许你使用一个或多个对象扩展基准对象，扩展的方式是依序将右边的对象合并到基准对象
（function($){
jQuery.fn.showhidePlugin = function(options){
//设定默认值，用逗号分隔选项
var defaults = {
numShown:10,
showText:'Show More Links',
hideText:'Hide Links'
}
var options = $.extend(defaults,options);
};
}）(jQuery);
3,创建插件
接下来将混合使用jQuery脚本和Javascript原生脚本实现插件的主体功能。这个插件将适用于任何无序列表。我们使用numShown变量的值截断这个列表，然后添加隐藏和显示链接来切换隐藏项的显示状态。
（1）添加一个.each（）方法迭代选择器匹配的元素，并返回this对象。这一步非常重要，所有的插件都要有这一步才能正常工作，在一个无序列表上应用该插件时，.each方法就会遍历那个无序列表的所有项
(2)创建两个变量--o和obj. o引用options,obj引用$(this),有了这两个变量，后面引用起它们来就省很多事，变量obj中保存的是包裹着当前无序列表的jQuery对象
插件jquery.showhidePlugin.js完整代码：
1 /**
2 * Created by Administrator on 2017/7/14 0014.
3 */
4 /*调用方式
5 $('.big-list').showhidePlugin({
6 numShown:10,
7 showText:'显示更多的链接',
8 hideText:'隐藏部分链接'
9 });
10
11 * */
12 (function($){
13 jQuery.fn.showhidePlugin = function(options){
14
15 //设置默认值，用逗号分隔选项
16 var defaults = {
17 numShown:10,
18 showText:'show more links',
19 hideText:'Hide Links'
20 };
21
22 var options = $.extend(defaults,options);
23 return this.each(function(){
24 var o = options;
25 var obj = $(this);
26 //确定项数并计算被隐藏项的数目
27 var pLength = obj.children().length; //所有的链接个数
28 var numHidden = pLength-o.numShown; //需要隐藏的链接个数
29 var pList = obj.children();
30
31 //设置显示/隐藏链接
32 var shLink = "<a href='#' class='view'>"+o.showText+"</a>";
33 if(pLength>o.numShown){ //如果链接总数大于用户要设置显示的个数，---就把showText文字显示在列表上面
34 jQuery(shLink).insertBefore(obj);
35 }
36
37 //循环ul下的所有li
38 pList.each(function(index){
39 if(index < o.numShown){
40 jQuery(pList[index]).show();
41 }else{
42 //给所有隐藏的元素加上class--hidden
43 jQuery(pList[index]).hide();
44 jQuery(pList[index]).addClass('hidden');
45 }
46 });
47
48 //切换文本
49 jQuery("a.view").live('click',function(e){
50 if (jQuery(this).text()==o.showText){
51 jQuery(this).text(o.hideText);
52 }else{
53 jQuery(this).text(o.showText);
54 }
55 jQuery('.hidden').toggle(); //切换（隐藏/显示状态）
56 return false; //使用return false 避免触发click事件的默认行为（重定向）
57 });
58 });
59 }
60 })(jQuery);
插件调用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery插件的编写</title>
</head>
<body>
<ul class="big-list">
<li>Test1.</li>
<li>Test2.</li>
<li>Test3.</li>
<li>Test4.</li>
<li>Test5.</li>
<li>Test6.</li>
<li>Test7.</li>
<li>Test8.</li>
<li>Test9.</li>
<li>Test10.</li>
<li>Test11.</li>
<li>Test12.</li>
<li>Test13.</li>
<li>Test14.</li>
<li>Test15.</li>
<li>Test16.</li>
<li>Test17.</li>
<li>Test18.</li>
<li>Test19.</li>
<li>Test20.</li>
<li>Test21.</li>
<li>Test22.</li>
<li>Test23.</li>
<li>Test24.</li>
<li>Test25.</li>
</ul>
</body>
<script src="jQuery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.showhidePlugin.js"></script>
<script>
$(function(){
$('.big-list').showhidePlugin({
numShown:10,
showText:'显示更多的链接',
hideText:'隐藏链接'
});
});
</script>
</html>