1.写插件部分，如下：
;(function($){
$.fn.plugin = function(options){
var defaults = {
//各种属性，各种参数
}
var options = $.extend(defaults, options);
this.each(function(){
//功能代码
var _this = this;
});
}
})(jQuery);
附上一个例子：
1 ;(function($){
2 $.fn.table = function(options){
3 var defaults = {
4 //arguments , properties
5 evenRowClass : ‘evenRow‘,
6 oddRowClass : ‘oddRow‘,
7 currentRowClass : ‘currentRow‘,
8 eventType : ‘mouseover‘,
9 eventType2 : ‘mouseout‘,
10 }
11 var options = $.extend(defaults, options);
12
13 this.each(function(){
14
15 //function code
16 var _this = $(this);
17 //even row
18 _this.find(‘tr:even:not("#thead")‘).addClass(options.evenRowClass);
19 //_this.find(‘#thead‘).removeClass(options.evenRowClass);
20 // odd row
21 _this.find(‘tr:odd‘).addClass(options.oddRowClass);
22
23 /*_this.find(‘tr‘).mouseover(function(){
24 $(this).addClass(options.currentRowClass);
25 }).mouseout(function(){
26 $(this).removeClass(options.currentRowClass);
27 });*/
28
29 _this.find(‘tr‘).bind(options.eventType, function(){
30 $(this).addClass(options.currentRowClass);
31 });
32
33 _this.find(‘tr‘).bind(options.eventType2, function(){
34 $(this).removeClass(options.currentRowClass);
35 });
36
37 });
38 return this;
39 }
40 })(jQuery);
html部分调用插件如下：
$();==$(function(){});==$(document).ready(); 等页面加载成功后执行
;$(function(){
$(‘#table1‘).table({
//arguments , properties
evenRowClass : ‘evenRow1‘,
oddRowClass : ‘oddRow1‘,
currentRowClass : ‘currentRow1‘
});
});
附上代码：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="Generator" content="EditPlus®">
6 <meta name="Author" content="">
7 <meta name="Keywords" content="">
8 <meta name="Description" content="">
9 <title>Document</title>
10 <style>
11 *{margin:0; padding:0;}
12 table{
13 border-collapse:collapse;
14 width:100%;
15 border:1px solid red;
16 margin-top:50px;
17 text-align:center;
18 }
19
20 tr, th, td{
21 height:30px;
22 border:1px solid red;
23 }
24 .evenRow1{
25 background:red;
26 }
27 .oddRow1{
28 background:orange;
29 }
30 .currentRow1{
31 background:blue;
32 }
33 #ss{
34 float:right;
35 margin-right:100px;
36 }
37 #search{
38 font-size:14px;
39 width:50px;
40 }
41
42 </style>
43 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
44 <script src="jquery-table-1.0.js"></script>
45 </head>
46 <body>
47 <script>
48 ;$(function(){
49 $(‘#table1‘).table({
50
51 //arguments , properties
52 evenRowClass : ‘evenRow1‘,
53 oddRowClass : ‘oddRow1‘,
54 currentRowClass : ‘currentRow1‘
55
56 });
57
58 $(‘input[type=button]‘).click(function(){
59 var text = $(‘input[type=text]‘).val();
60 $(‘#table1 tr:not("#thead")‘).hide().filter(‘:contains("‘+text+‘")‘).show();
61 });
62
63 });
64
65 </script>
66
67 <div id="ss">
68 <input type="text" placeholder="请输入查询数据">
69 <input id="search" type="button" value="查询">
70 </div>
71
72 <table id="table1">
73 <tr id="thead">
74 <th>姓名</th>
75 <th>学号</th>
76 <th>性别</th>
77 <th>年龄</th>
78
79 </tr>
80 <tr>
81 <td>张三</td>
82 <td>1</td>
83 <td>男</td>
84 <td>20</td>
85 </tr>
86
87 <tr>
88 <td>李四</td>
89 <td>2</td>
90 <td>男</td>
91 <td>30</td>
92 </tr>
93 <tr>
94 <td>张三</td>
95 <td>1</td>
96 <td>女</td>
97 <td>20</td>
98 </tr>
99
100 <tr>
101 <td>李四</td>
102 <td>2</td>
103 <td>男</td>
104 <td>30</td>
105 </tr>
106 <tr>
107 <td>王五</td>
108 <td>3</td>
109 <td>男</td>
110 <td>30</td>
111 </tr>
112 <tr>
113 <td>王五</td>
114 <td>3</td>
115 <td>男</td>
116 <td>30</td>
117 </tr>
118 <tr>
119 <td>张三</td>
120 <td>1</td>
121 <td>女</td>
122 <td>20</td>
123 </tr>
124
125 <tr>
126 <td>李四</td>
127 <td>2</td>
128 <td>男</td>
129 <td>30</td>
130 </tr>
131
132 </table>
133 </body>
134 </html>
通过这个例子学到了jquery 对象级插件开发
时间： 2024-08-10 19:15:58