jquery编写插件的方法
Posted 晴晴加油
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery编写插件的方法相关的知识，希望对你有一定的参考价值。
版权声明：作者原创，转载请注明出处！
编写插件的两种方式:
1.类级别开发插件(1%)
2.对象级别开发(99%)
类级别的静态开发就是给jquery添加静态方法，三种方式
1.添加新的全局函数
2.使用$.extend(obj)
3.使用命名空间
类级别开发插件（用的非常少，1%）
分别举例：
//1.直接给jquer添加全局函数 jQuery.myAlert=function (str) { alert(str); }; //2.用extend()方法。extend是jquery提供的一个方法，把多个对象合并起来，参数是object jQuery.extend({ myAlert2:function (str1) { alert(str1); }, myAlert3:function () { alert(11111); } }); //一定要注意两种类级别编写插件方式书写的区别。 //3.使用命名空间(如果不使用命名空间容易和其他引入的JS库里面的同名方法冲突) jQuery.yuqing={ myAlert4:function (str) { alert(str); }, centerWindow:function (obj) { obj.css({ \'top\':($(window).height()-obj.height())/2, \'left\':($(window).width()-obj.width())/2 }); //必须进行返回对象的操作，否则就不能继续往下进行链式操作了。。 return obj; } };
调用部分：
//调用自定义插件方法 $(\'#btn\').click(function () { $.myAlert(\'我是调用jquery编写的插件弹出的警告框\'); $.myAlert2(\'我是调用jquery的extend()方法编写的插件弹出的警告框\'); $.myAlert3(); $.yuqing.myAlert4("调用使用了命名空间编写的插件方法"); }); $.yuqing.centerWindow($(\'#div1\')).css(\'background\',\'red\');
注意：jquery文件要一并引入。
对象级别开发插件（常用99%）
jquery官方给了一套对象级别开发插件的模板：
;(function ($) { $.fn.plugin=function (options) { var defaults={ //各种参数、各种属性 };
//options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions var endOptions=$.extend(defaults,options); this.each(function () { //实现功能的代码 }); }; })(jQuery);
模板要点：
1.函数全部放在闭包里，外面的函数就调用不到里面的参数了,比较安全
2.前面加分号,避免不必要的麻烦
举个栗子：
需求：开发一个插件，要求奇数行颜色是yellow，偶数行颜色是green，鼠标移到的行变为blue，移除变为原来的颜色
html布局：
<table id="tab"> <tr> <th>姓名</th> <th>年龄</th> <th>身高</th> <th>体重</th> </tr> <tr> <td>张三</td> <td>22</td> <td>178cm</td> <td>79kg</td> </tr> <tr> <td>美美</td> <td>34</td> <td>167cm</td> <td>60kg</td> </tr> <tr> <td>小青</td> <td>23</td> <td>170cm</td> <td>55kg</td> </tr> <tr> <td>张三</td> <td>22</td> <td>178cm</td> <td>79kg</td> </tr> <tr> <td>美美</td> <td>34</td> <td>167cm</td> <td>60kg</td> </tr> <tr> <td>小青</td> <td>23</td> <td>170cm</td> <td>55kg</td> </tr> <tr> <td>张三</td> <td>22</td> <td>178cm</td> <td>79kg</td> </tr> <tr> <td>美美</td> <td>34</td> <td>167cm</td> <td>60kg</td> </tr> <tr> <td>小青</td> <td>23</td> <td>170cm</td> <td>55kg</td> </tr> </table>
css样式
table{ width: 100%; border-collapse: collapse; border: 1px solid palevioletred; } th,td{ height: 30px; text-align: center; border: 1px solid deeppink; } .evenRow1{background: yellow;} .oddRow1{background: green;} .curRow1{background: blue;}
jquery调用代码：
$(\'#tab\').table({ evenRowClass:\'evenRow1\', oddRowClass:\'oddRow1\', curRowClass:\'curRow1\', eventType1:\'click\' });
jquery插件代码：
1 ;(function ($) { 2 $.fn.table=function (options) { 3 var defaults={ 4 //各种参数、各种属性 5 evenRowClass:\'evenRow\', 6 oddRowClass:\'oddRow\', 7 curRowClass:\'curRow\', 8 eventType1:\'mouseover\', 9 eventType2:\'mouseout\' 10 }; 11 12 var endOptions=$.extend(defaults,options); 13 14 this.each(function () { 15 var _this = $( this ); 16 _this.find(\'tr:even\').addClass(endOptions.evenRowClass); 17 _this.find(\'tr:odd\').addClass(endOptions.oddRowClass);
18 //鼠标移入和移出，但实际开发中不直接使用mouseover这种方法 19 /*$(this).find(\'tr\').mouseover(function () { 20 $(this).addClass(endOptions.curRowClass); 21 }).mouseout(function () { 22 $(this).removeClass(endOptions.curRowClass); 23 });*/ 24 25 //实际开发中要用bian()方法绑定 26 //因为用bind()方法绑定非常灵活，事件可以自己定义 27 //mouseover mouseout...事件底层都是用bind()去实现的，mouseout 等只是快捷方式 28 _this.find(\'tr\').bind(endOptions.eventType1,function () { 29 $(this).addClass(endOptions.curRowClass); 30 }); 31 _this.find(\'tr\').bind(endOptions.eventType2,function () { 32 $(this).removeClass(endOptions.curRowClass); 33 }) 34 }); 35 }; 36 })(jQuery);
插件注释：
15行：var _this = this; 变量存储，因为很多地方用到$(this);所以将其存储为变量使用更加的方便，也提高了运行效率。
19-23行与28-33行实现的功能是相同的，但是推荐使用28-33行的写法，使用bian()进行事件的绑定，因为使用会非常的灵活。
可变的地方，如样式名称等最好写在defaults里，方便用户自行配置。
再来一个对象级别实现jquery插件的栗子(⊙o⊙)哦！！实现选项卡功能~~
HTML布局
<div id="tab"> <ul id="nav"> <li class="active">HTML</li> <li>CSS</li> <li>javascript</li> </ul> <div id="cont"> <div style="display: block;">HTML</div> <div>CSS</div> <div>JAVASCRIPT</div> </div> </div>
css样式：
* { margin: 0; padding: 0; } #nav li { list-style: none; float: left; height: 25px; line-height: 25px; border: 1px solid #0000FF; border-bottom: none; padding: 5px; margin: 10px; margin-bottom: 0; } #cont div { width: 210px; height: 150px; border: 1px solid #0000FF; margin-left: 10px; clear: both; display: none; } .active { background: #AFEEEE; }
调用的JS代码
<script type="text/javascript"> $(\'#tab\').tab({ tabType: \'mouseover\' }); </script>
注意哦：不要忘记先引入jquery.js文件喔，然后在引入我们编写的插件tab.js，才能正确调用到tab()方法。。。
插件tab.js
;(function($) { $.fn.tab = function(options) { var defaults = { tabActiveClass: \'active\', tabNav: \'#nav>li\', tabCont: \'#cont>div\', tabType: \'click\' }; var endOptions = $.extend(defaults, options); $(this).each(function() { var _this = $(this); _this.find(endOptions.tabNav).bind(endOptions.tabType, function() { $(this).addClass(endOptions.tabActiveClass).siblings().removeClass(endOptions.tabActiveClass); var index = $(this).index(); _this.find(endOptions.tabCont).eq(index).show().siblings().hide(); }); }); }; })(jQuery);
这个小栗子和上一个表格插件的栗子相似度是很高的，多敲几遍，理解意思，其实jquery扩展插件并不难哦~~
如有不对的地方，还请各路大神赐教！
以上是关于jquery编写插件的方法的主要内容，如果未能解决你的问题，请参考以下文章