1. 写插件部分，如下：
;(function($){ $.fn.plugin = function(options){ var defaults = { //各种属性，各种参数 } var options = $.extend(defaults, options); this.each(function(){ //功能代码 var _this = this; }); } })(jQuery);
附上一个例子：
;(function($){ $.fn.table = function(options){ var defaults = { //arguments , properties evenRowClass : 'evenRow', oddRowClass : 'oddRow', currentRowClass : 'currentRow', eventType : 'mouseover', eventType2 : 'mouseout', } var options = $.extend(defaults, options); this.each(function(){ //function code var _this = $(this); //even row _this.find('tr:even:not("#thead")').addClass(options.evenRowClass); //_this.find('#thead').removeClass(options.evenRowClass); // odd row _this.find('tr:odd').addClass(options.oddRowClass); /*_this.find('tr').mouseover(function(){ $(this).addClass(options.currentRowClass); }).mouseout(function(){ $(this).removeClass(options.currentRowClass); });*/ _this.find('tr').bind(options.eventType, function(){ $(this).addClass(options.currentRowClass); }); _this.find('tr').bind(options.eventType2, function(){ $(this).removeClass(options.currentRowClass); }); }); return this; } })(jQuery);
html部分调用插件如下：
();== ();==(function(){});==$(document).ready();
等页面加载成功后执行
;$(function(){ $('#table1').table({ //arguments , properties evenRowClass : 'evenRow1', oddRowClass : 'oddRow1', currentRowClass : 'currentRow1' }); });
附上代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="EditPlus®"> <meta content=""> <meta content=""> <meta content=""> <title>Document</title> <style> *{margin:0; padding:0;} table{ border-collapse:collapse; width:100%; border:1px solid red; margin-top:50px; text-align:center; } tr, th, td{ height:30px; border:1px solid red; } .evenRow1{ background:red; } .oddRow1{ background:orange; } .currentRow1{ background:blue; } #ss{ float:right; margin-right:100px; } #search{ font-size:14px; width:50px; } </style> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://www.jb51.net/jquery-table-1.0.js"></script> </head> <body> <script> ;$(function(){ $('#table1').table({ //arguments , properties evenRowClass : 'evenRow1', oddRowClass : 'oddRow1', currentRowClass : 'currentRow1' }); $('input[type=button]').click(function(){ var text = $('input[type=text]').val(); $('#table1 tr:not("#thead")').hide().filter(':contains("'+text+'")').show(); }); }); </script> <div> <input type="text" placeholder="请输入查询数据"> <input type="button" value="查询"> </div> <table> <tr> <th>姓名</th> <th>学号</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>1</td> <td>男</td> <td>20</td> </tr> <tr> <td>李四</td> <td>2</td> <td>男</td> <td>30</td> </tr> <tr> <td>张三</td> <td>1</td> <td>女</td> <td>20</td> </tr> <tr> <td>李四</td> <td>2</td> <td>男</td> <td>30</td> </tr> <tr> <td>王五</td> <td>3</td> <td>男</td> <td>30</td> </tr> <tr> <td>王五</td> <td>3</td> <td>男</td> <td>30</td> </tr> <tr> <td>张三</td> <td>1</td> <td>女</td> <td>20</td> </tr> <tr> <td>李四</td> <td>2</td> <td>男</td> <td>30</td> </tr> </table> </body> </html>
通过这个例子学到了jquery 对象级插件开发
以上这篇jquery插件方式实现table查询功能的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: