[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

隔行变色功能，不用js，直接用css伪类就可以做，这个实例可以作为js插件开发很好的入门级实例。本文实现的隔行变色包括以下功能：

1，支持2种常用结构共存( div元素和表格类型 )

2，一个页面内支持不同模块隔行变色，分别管理

3，可以定制的配置有：

奇/偶数行的背景颜色

特定的模块加上隔行变色

当前激活行的颜色

隔行变色的元素类型定制

{

'activeClass' : 'active',

'evenClass' : 'even-color',

'oddClass' : 'odd-color',

'ele' : 'div',

'context' : document

};

4，可以扩展其他插件

点击run code按钮预览效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>隔行变色插件开发 - by ghostwu</title> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 10px 30px; border: 1px solid #ccc; } .even-color { background: #ccc; } .odd-color { background: #eee; } .even-color2 { background: #000; } .odd-color2 { background: #666; } .current { background: yellow; } .active { background: #09f; } #box div, #box2 div { margin: 10px; padding: 10px; border: 1px solid #ccc; } </style> </style> <script> (function () { /* 隔行变色选项卡全选不选反选 */ var ghostwu = {}; /***************隔行变色开始***************/ ghostwu.BgColor = { Bg: function (option) { return new ghostwu.BgColor.init(option); } }; ghostwu.BgColor.init = function (option) { this.oldColor = null; this.opt = { 'activeClass': 'active', 'evenClass': 'even-color', 'oddClass': 'odd-color', 'ele': 'div', 'context': document }; //存储默认配置 for (var key in option) { this.opt[key] = option[key]; } if (this.opt.ele == 'div') { var curCxt = this.opt.context; if (typeof this.opt['context'] === 'string') { curCxt = document.querySelector(this.opt['context']); } this.elements = curCxt.querySelectorAll(this.opt.ele); } else { this.elements = this.opt.context.querySelectorAll(this.opt.ele + ' tr'); for (var i = 0; i < this.elements.length; i++) { if (this.elements[i].children[0].nodeName.toLowerCase() == 'th') { this.elements = [].slice.call(this.elements); this.elements.splice(i, 1); } } } } ghostwu.BgColor.init.prototype.setBgColor = function () { for (var i = 0; i < this.elements.length; i++) { if (i % 2 == 0) { this.elements[i].className = this.opt['evenClass']; } else { this.elements[i].className = this.opt['oddClass']; } } } ghostwu.BgColor.init.prototype.hover = function () { var that = this; for (var i = 0; i < this.elements.length; i++) { this.elements[i].onmouseover = function () { that.addBg(this); }; this.elements[i].onmouseout = function () { that.removeBg(this); } } } ghostwu.BgColor.init.prototype.addBg = function (curObj) { this.oldColor = curObj.className; curObj.className = this.opt['activeClass']; } ghostwu.BgColor.init.prototype.removeBg = function (curObj) { curObj.className = this.oldColor; } /***************隔行变色结束***************/ window.g = ghostwu; })(); </script> <script> window.onload = function () { var oBg = g.BgColor.Bg({ 'activeClass': 'current', 'ele': 'table' }); oBg.setBgColor(); oBg.hover(); var oBg2 = g.BgColor.Bg({ 'activeClass': 'active', 'ele': 'div', 'context': '#box' }); oBg2.setBgColor(); oBg2.hover(); var oBg3 = g.BgColor.Bg({ 'activeClass': 'current', 'ele': 'div', 'evenClass': 'even-color2', 'oddClass': 'odd-color2', 'context': '#box2' }); oBg3.setBgColor(); oBg3.hover(); } </script> </head> <body> <div id="box"> <div></div> <div></div> <div></div> <div></div> </div> <div id="box2"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>man</td> <td>20</td> </tr> <tr> <td>张三</td> <td>man</td> <td>20</td> </tr> <tr> <td>张三</td> <td>man</td> <td>20</td> </tr> <tr> <td>张三</td> <td>man</td> <td>20</td> </tr> <tr> <td>张三</td> <td>man</td> <td>20</td> </tr> <tr> <td>张三</td> <td>man</td> <td>20</td> </tr> <tr> <td>张三</td> <td>man</td> <td>20</td> </tr> </table> </body> </html>
run code

我们要实现的是多个插件功能【选项卡，全选，不选，反选，轮播，弹窗，分页等常用插件】，所以第一步，要做一个简单的模块架构，这里，我采用的是字面量单例模式+命名空间

 1 (function(){
 2     /*
 3         隔行变色
 4         选项卡
 5         全选不选反选
 6     */
 7     var ghostwu = {};
 8     /***************隔行变色开始***************/
 9     ghostwu.BgColor = {
10     };
11     ghostwu.BgColor.init = function(){
12     }
13     ghostwu.BgColor.setBgColor = function(){
14     }
15     ghostwu.BgColor.hover = function(){
16     }
17     ghostwu.BgColor.addBg = function(){
18     }
19     ghostwu.BgColor.removeBg = function(){
20     }
21     /***************隔行变色结束***************/
22
23     /***************选项卡开始***************/
24     ghostwu.Tab = {
25     };
26     ghostwu.Tab.init = function(){
27     }
28     ghostwu.Tab.bindEvent = function(){
29     }
30     ghostwu.BgColor.switchTab = function(){
31     }
32     /***************选项卡结束***************/
33
34     window.g = ghostwu;
35 })();

一、首先定义一个一级的命名空间 ghostwu = {}，然后通过window对象暴露这个对象给外部使用

接下来开发的插件，只要加在我的一级命名空间中即可，如：

ghostwu.BgColor

ghostwu.Tab

ghostwu.Page

ghostwu.Module

........等等

插件的具体方法，在二级命名空间继续增加，如：

ghostwu.BgColor.init

为隔行变色插件( BgColor ) 添加一个初始化方法( init )

二、实现一个不能定制配置的隔行变色功能

demo.js代码

 1 var ghostwu = {};
 2     /***************隔行变色开始***************/
 3     ghostwu.BgColor = {
 4         oldColor : null
 5     };
 6     ghostwu.BgColor.init = function(){
 7         this.aDiv = document.querySelectorAll( "div" );
 8     }
 9     ghostwu.BgColor.setBgColor = function(){
10         for( var i = 0; i < this.aDiv.length; i++ ){
11             if ( i % 2 == 0  ){
12                 this.aDiv[i].className = 'even-color';
13             }else {
14                 this.aDiv[i].className = 'odd-color';
15             }
16         }
17     }
18     ghostwu.BgColor.hover = function(){
19         var that = this;
20         for( var i = 0 ; i < this.aDiv.length; i++ ){
21             this.aDiv[i].onmouseover = function(){
22                 that.addBg( this );
23             }
24             this.aDiv[i].onmouseout = function(){
25                 that.removeBg( this );
26             }
27         }
28     }
29     ghostwu.BgColor.addBg = function( curObj ){
30         this.oldColor = curObj.className;
31         curObj.className = 'active';
32     }
33     ghostwu.BgColor.removeBg = function( curObj ){
34         curObj.className = this.oldColor;
35     }
36     /***************隔行变色结束***************/

html页面布局代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>隔行变色 - by ghostwu</title>
 8     <style>
 9         div{10             margin:10px;
11             padding:20px;
12             border:1px solid #ccc;
13         }
14         .even-color {15             background:#ccc;
16         }
17         .odd-color {18             background: #eee;
19         }
20         .active {21             background:yellow;
22         }
23     </style>
24     <script src="./lib/demo.js"></script>
25     <script>
26         window.onload = function(){
27             var oBg = g.BgColor;
28             oBg.init();
29             oBg.setBgColor();
30             oBg.hover();
31         }
32     </script>
33 </head>
34 <body>
35     <div></div>
36     <div></div>
37     <div></div>
38     <div></div>
39     <div></div>
40     <div></div>
41 </body>
42 </html>

至此，一个简单的隔行变色功能就完成了，但是不能称之为插件，因为这个功能现在是写死的

三、把可能变化的部分抽象出来变成配置

可能变化的部分有：

1，元素，这里我们的布局是div，隔行变色也有可能是表格

2，class样式，这里是even-color,odd-color, active，我们要支持class定制

接下来，我们添加一个json配置，设置一些默认配置，然后允许初始化的时候定制样式名称和元素

 1 var ghostwu = {};
 2     /***************隔行变色开始***************/
 3     ghostwu.BgColor = {
 4         oldColor : null,
 5         opt : {
 6             'activeClass' : 'active',
 7             'oddClass' : 'odd-color',
 8             'evenClass' : 'even-color',
 9             'ele' : 'div'
10         }
11     };
12     ghostwu.BgColor.init = function(){
13         this.elements = document.querySelectorAll( this.opt['ele'] );
14     }
15     ghostwu.BgColor.setBgColor = function(){
16         for( var i = 0; i < this.elements.length; i++ ){
17             if ( i % 2 == 0  ){
18                 this.elements[i].className = this.opt['evenClass'];
19             }else {
20                 this.elements[i].className = this.opt['oddClass'];
21             }
22         }
23     }
24     ghostwu.BgColor.hover = function(){
25         var that = this;
26         for( var i = 0 ; i < this.elements.length; i++ ){
27             this.elements[i].onmouseover = function(){
28                 that.addBg( this );
29             }
30             this.elements[i].onmouseout = function(){
31                 that.removeBg( this );
32             }
33         }
34     }
35     ghostwu.BgColor.addBg = function( curObj ){
36         this.oldColor = curObj.className;
37         curObj.className = this.opt['activeClass'];
38     }
39     ghostwu.BgColor.removeBg = function( curObj ){
40         curObj.className = this.oldColor;
41     }
42     /***************隔行变色结束***************/

经过修改之后，我们就可以通过 opt这个json 配置样式和元素结构了，接下来，我们就得增加参数配置了

四、参数配置

只需要在demo.js代码中，加入一个for循环，把参数的配置复制给opt即可

1 ghostwu.BgColor.init = function( option ){
2     for( var key in option ){
3         this.opt[key] = option[key];
4     }
5     this.elements = document.querySelectorAll( this.opt['ele'] );
6 }

html测试页面修改如下：

 1 <style>
 2     div{ 3         margin:10px;
 4         padding:20px;
 5         border:1px solid #ccc;
 6     }
 7     .even-color2 { 8         background:#000;
 9     }
10     .odd-color2 {11         background: #666;
12     }
13     .current {14         background:#08f;
15     }
16 </style>
17 <script src="./lib/demo.js"></script>
18 <script>
19     window.onload = function(){
20         var oBg = g.BgColor;
21         oBg.init({
22             'activeClass' : 'current',
23             'evenClass' : 'even-color2',
24             'oddClass' : 'odd-color2'
25         });
26         oBg.setBgColor();
27         oBg.hover();
28     }
29 </script>

五、完善元素的配置

在第四步中，class都可以定制了，但是ele还不能定制，这个ele就是控制隔行变色的结构

修改init函数如下：

 1 ghostwu.BgColor.init = function( option ){
 2     for( var key in option ){
 3         this.opt[key] = option[key];
 4     }
 5     if ( this.opt['ele'] == 'div' ) {
 6         this.elements = document.querySelectorAll( this.opt['ele'] );
 7     }else{
 8         this.elements = document.querySelectorAll( this.opt['ele'] + " tr" );
 9         this.elements = [].slice.call( this.elements );
10         for( var i = 0 ; i < this.elements.length; i++ ){
11             if ( this.elements[i].children[0].nodeName.toLowerCase() == 'th' ) {
12                 this.elements.splice( i, 1 );
13             }
14         }
15     }
16 }

测试页面的代码修改如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>隔行变色 - by ghostwu</title>
  9     <style>
 10         table { 11             border-collapse: collapse;
 12             width: 100%;
 13         }
 14
 15         th,
 16         td { 17             padding: 10px 30px;
 18             border: 1px solid #ccc;
 19         }
 20         div { 21             margin: 10px;
 22             padding: 20px;
 23             border: 1px solid #ccc;
 24         }
 25
 26         .even-color2 { 27             background: #000;
 28         }
 29
 30         .odd-color2 { 31             background: #666;
 32         }
 33
 34         .current { 35             background: #08f;
 36         }
 37     </style>
 38     <script src="./lib/demo.js"></script>
 39     <script>
 40         window.onload = function () {
 41             var oBg = g.BgColor;
 42             oBg.init({
 43                 'activeClass': 'current',
 44                 'evenClass': 'even-color2',
 45                 'oddClass': 'odd-color2'
 46             });
 47             oBg.setBgColor();
 48             oBg.hover();
 49
 50             var oBg2 = g.BgColor;
 51             oBg2.init({
 52                 'activeClass': 'current',
 53                 'evenClass': 'even-color2',
 54                 'oddClass': 'odd-color2',
 55                 'ele' : 'table'
 56             });
 57             oBg2.setBgColor();
 58             oBg2.hover();
 59         }
 60
 61     </script>
 62 </head>
 63
 64 <body>
 65     <div></div>
 66     <div></div>
 67     <div></div>
 68     <div></div>
 69     <div></div>
 70     <div></div>
 71     <table>
 72         <tr>
 73             <th>姓名</th>
 74             <th>性别</th>
 75             <th>年龄</th>
 76         </tr>
 77         <tr>
 78             <td>ghostwu</td>
 79             <td>man</td>
 80             <td>20</td>
 81         </tr>
 82         <tr>
 83             <td>ghostwu</td>
 84             <td>man</td>
 85             <td>20</td>
 86         </tr>
 87         <tr>
 88             <td>ghostwu</td>
 89             <td>man</td>
 90             <td>20</td>
 91         </tr>
 92         <tr>
 93             <td>ghostwu</td>
 94             <td>man</td>
 95             <td>20</td>
 96         </tr>
 97         <tr>
 98             <td>ghostwu</td>
 99             <td>man</td>
100             <td>20</td>
101         </tr>
102         <tr>
103             <td>ghostwu</td>
104             <td>man</td>
105             <td>20</td>
106         </tr>
107         <tr>
108             <td>ghostwu</td>
109             <td>man</td>
110             <td>20</td>
111         </tr>
112     </table>
113 </body>
114
115 </html>

至此，我们开发的功能，勉强算个插件了，但是，不能按区域控制，比如页面上有10个div, 分成2部分，一部分有5个div，另外一部分也是5个，我想其中一部分div加上隔行变色效果。另外一部分不加.

六、分块控制

其实很简单，就是不要用document去获取元素，document获取到的元素是所有的元素，所以我们在配置中加一个上下文的配置，可以限定获取某部分满足条件的节点.

修改demo.js对应部分的代码如下：

 1 ghostwu.BgColor = {
 2         oldColor : null,
 3         opt : {
 4             'activeClass' : 'active',
 5             'oddClass' : 'odd-color',
 6             'evenClass' : 'even-color',
 7             'ele' : 'div',
 8             'context' : document
 9         }
10     };
11 ghostwu.BgColor.init = function( option ){
12     for( var key in option ){
13         this.opt[key] = option[key];
14     }
15     var cxt = this.opt['context'];
16     if ( typeof cxt === 'string' ){
17         cxt = document.querySelector( this.opt['context'] );
18     }
19     if ( this.opt['ele'] == 'div' ) {
20         this.elements = cxt.querySelectorAll( this.opt['ele'] );
21     }else{
22         this.elements = cxt.querySelectorAll( this.opt['ele'] + " tr" );
23         this.elements = [].slice.call( this.elements );
24         for( var i = 0 ; i < this.elements.length; i++ ){
25             if ( this.elements[i].children[0].nodeName.toLowerCase() == 'th' ) {
26                 this.elements.splice( i, 1 );
27             }
28         }
29     }
30 }

修改html页面代码如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>隔行变色 - by ghostwu</title>
  9     <style>
 10         table { 11             border-collapse: collapse;
 12             width: 100%;
 13         }
 14
 15         th,
 16         td { 17             padding: 10px 30px;
 18             border: 1px solid #ccc;
 19         }
 20
 21         .even-color { 22             background: #ccc;
 23         }
 24
 25         .odd-color { 26             background: #eee;
 27         }
 28
 29         .even-color2 { 30             background: #000;
 31         }
 32
 33         .odd-color2 { 34             background: #666;
 35         }
 36
 37         .current { 38             background: yellow;
 39         }
 40
 41         .active { 42             background: #09f;
 43         }
 44
 45         #box div,
 46         #box2 div { 47             margin: 10px;
 48             padding: 10px;
 49             border: 1px solid #ccc;
 50         }
 51     </style>
 52     <script src="./lib/demo.js"></script>
 53     <script>
 54         window.onload = function () {
 55             var oBg = g.BgColor;
 56             oBg.init({
 57                 'activeClass': 'current',
 58                 'evenClass': 'even-color2',
 59                 'oddClass': 'odd-color2',
 60                 'context' : '#box'
 61             });
 62             oBg.setBgColor();
 63             oBg.hover();
 64
 65             var oBg3 = g.BgColor;
 66             oBg3.init({
 67                 'activeClass': 'active',
 68                 'evenClass': 'even-color',
 69                 'oddClass': 'odd-color',
 70                 'context' : '#box2'
 71             });
 72             oBg3.setBgColor();
 73             oBg3.hover();
 74
 75             var oBg2 = g.BgColor;
 76             oBg2.init({
 77                 'activeClass': 'current',
 78                 'evenClass': 'even-color2',
 79                 'oddClass': 'odd-color2',
 80                 'ele': 'table',
 81                 'context' : document
 82             });
 83             oBg2.setBgColor();
 84             oBg2.hover();
 85         }
 86     </script>
 87 </head>
 88
 89 <body>
 90     <div id="box">
 91         <div></div>
 92         <div></div>
 93         <div></div>
 94         <div></div>
 95     </div>
 96     <div id="box2">
 97         <div></div>
 98         <div></div>
 99         <div></div>
100         <div></div>
101         <div></div>
102         <div></div>
103     </div>
104     <table>
105         <tr>
106             <th>姓名</th>
107             <th>性别</th>
108             <th>年龄</th>
109         </tr>
110         <tr>
111             <td>ghostwu</td>
112             <td>man</td>
113             <td>20</td>
114         </tr>
115         <tr>
116             <td>ghostwu</td>
117             <td>man</td>
118             <td>20</td>
119         </tr>
120         <tr>
121             <td>ghostwu</td>
122             <td>man</td>
123             <td>20</td>
124         </tr>
125         <tr>
126             <td>ghostwu</td>
127             <td>man</td>
128             <td>20</td>
129         </tr>
130         <tr>
131             <td>ghostwu</td>
132             <td>man</td>
133             <td>20</td>
134         </tr>
135         <tr>
136             <td>ghostwu</td>
137             <td>man</td>
138             <td>20</td>
139         </tr>
140         <tr>
141             <td>ghostwu</td>
142             <td>man</td>
143             <td>20</td>
144         </tr>
145     </table>
146 </body>
147
148 </html>

这样我们就可以达到分块控制的目的，但是，如果你仔细一点，应该能发现一个问题，activeClass设置的样式产生了覆盖，3个区域不能定制activeClass。这个就是单例模式无法解决的问题，我们可以通过构造函数解决

七、构造函数解决属性配置覆盖的问题

最终版demo.js文件

 1 (function(){
 2     /*
 3         隔行变色
 4         选项卡
 5         全选不选反选
 6     */
 7     var ghostwu = {};
 8
 9     /***************隔行变色开始***************/
10     ghostwu.BgColor = {
11         Bg : function( option ){
12             return new ghostwu.BgColor.init( option );
13         }
14     };
15     ghostwu.BgColor.init = function( option ){
16         this.oldColor = null;
17         this.opt = {
18             'activeClass' : 'active',
19             'evenClass' : 'even-color',
20             'oddClass' : 'odd-color',
21             'ele' : 'div',
22             'context' : document
23         }; //存储默认配置
24         for( var key in option ){
25             this.opt[key] = option[key];
26         }
27         if ( this.opt.ele == 'div' ){
28             var curCxt = this.opt.context;
29             if ( typeof this.opt['context'] === 'string' ) {
30                 curCxt = document.querySelector( this.opt['context'] );
31             }
32             this.elements = curCxt.querySelectorAll( this.opt.ele );
33         }else {
34             this.elements = this.opt.context.querySelectorAll( this.opt.ele + ' tr' );
35             for( var i = 0; i < this.elements.length; i++ ){
36                 if( this.elements[i].children[0].nodeName.toLowerCase() == 'th'){
37                     this.elements = [].slice.call( this.elements );
38                     this.elements.splice( i, 1 );
39                 }
40             }
41         }
42     }
43     ghostwu.BgColor.init.prototype.setBgColor = function(){
44         for( var i = 0 ; i < this.elements.length; i++ ){
45             if ( i % 2 == 0 ) {
46                 this.elements[i].className = this.opt['evenClass'];
47             }else {
48                 this.elements[i].className = this.opt['oddClass'];
49             }
50         }
51     }
52     ghostwu.BgColor.init.prototype.hover = function(){
53         var that = this;
54         for( var i = 0 ; i < this.elements.length; i++ ){
55             this.elements[i].onmouseover = function(){
56                 that.addBg( this );
57             };
58             this.elements[i].onmouseout = function(){
59                 that.removeBg( this );
60             }
61         }
62     }
63     ghostwu.BgColor.init.prototype.addBg = function( curObj ){
64         this.oldColor = curObj.className;
65         curObj.className = this.opt['activeClass'];
66     }
67     ghostwu.BgColor.init.prototype.removeBg = function( curObj ){
68         curObj.className = this.oldColor;
69     }
70     /***************隔行变色结束***************/
71
72
73
74
75     window.g = ghostwu;
76 })();

页面测试代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>隔行变色插件开发 - by ghostwu</title>
  9     <style>
 10         table { 11             border-collapse: collapse;
 12             width: 100%;
 13         }
 14
 15         th,
 16         td { 17             padding: 10px 30px;
 18             border: 1px solid #ccc;
 19         }
 20
 21         .even-color { 22             background: #ccc;
 23         }
 24
 25         .odd-color { 26             background: #eee;
 27         }
 28
 29         .even-color2 { 30             background: #000;
 31         }
 32
 33         .odd-color2 { 34             background: #666;
 35         }
 36
 37         .current { 38             background: yellow;
 39         }
 40
 41         .active { 42             background: #09f;
 43         }
 44
 45         #box div,
 46         #box2 div { 47             margin: 10px;
 48             padding: 10px;
 49             border: 1px solid #ccc;
 50         }
 51     </style>
 52     <script src="./lib/common2.js"></script>
 53     <script>
 54         window.onload = function () {
 55             var oBg = g.BgColor.Bg({
 56                 'activeClass': 'current',
 57                 'ele': 'table'
 58             });
 59             oBg.setBgColor();
 60             oBg.hover();
 61
 62             var oBg2 = g.BgColor.Bg({
 63                 'activeClass': 'active',
 64                 'ele': 'div',
 65                 'context': '#box'
 66             });
 67             oBg2.setBgColor();
 68             oBg2.hover();
 69
 70             var oBg3 = g.BgColor.Bg({
 71                 'activeClass': 'current',
 72                 'ele': 'div',
 73                 'evenClass': 'even-color2',
 74                 'oddClass': 'odd-color2',
 75                 'context': '#box2'
 76             });
 77             oBg3.setBgColor();
 78             oBg3.hover();
 79         }
 80     </script>
 81 </head>
 82
 83 <body>
 84     <div id="box">
 85         <div></div>
 86         <div></div>
 87         <div></div>
 88         <div></div>
 89     </div>
 90     <div id="box2">
 91         <div></div>
 92         <div></div>
 93         <div></div>
 94         <div></div>
 95         <div></div>
 96         <div></div>
 97     </div>
 98     <table>
 99         <tr>
100             <th>姓名</th>
101             <th>性别</th>
102             <th>年龄</th>
103         </tr>
104         <tr>
105             <td>张三</td>
106             <td>man</td>
107             <td>20</td>
108         </tr>
109         <tr>
110             <td>张三</td>
111             <td>man</td>
112             <td>20</td>
113         </tr>
114         <tr>
115             <td>张三</td>
116             <td>man</td>
117             <td>20</td>
118         </tr>
119         <tr>
120             <td>张三</td>
121             <td>man</td>
122             <td>20</td>
123         </tr>
124         <tr>
125             <td>张三</td>
126             <td>man</td>
127             <td>20</td>
128         </tr>
129         <tr>
130             <td>张三</td>
131             <td>man</td>
132             <td>20</td>
133         </tr>
134         <tr>
135             <td>张三</td>
136             <td>man</td>
137             <td>20</td>
138         </tr>
139     </table>
140 </body>
141
142 </html>

[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件相关推荐

WordPress插件开发教程1：开发第一个WordPress插件
一.创建一个插件第一步:在 wp-content \ plugins 目录新建一个目录,随便起个名字,比如:my-first-plugin. 第二步:进入 my-first-plug ...
《Vue3+TS》开发一个自己的起始页（二）chrome插件化
前言各位小伙伴们大家好,求关注,求收藏,求点赞: 另外为自己拉一波票:https://bbs.csdn.net/topics/603955887?spm=1001.2014.3001.6953,诚实 ...
[js插件开发教程]定制一个手风琴插件(accordion)
本文带来一个垂直方向的手风琴插件开发,可以定制的功能如下: contentClass : 'panel', //面板样式navClass : 'nav', //导航样式activeClass : 'a ...
动手开发一个名为“微天气”的微信小程序（下）
摘要: 上期我们介绍了"微天气"的API与界面代码编写,今天我们继续介绍逻辑层代码以及查询代码的编写. 本文选自<从零开始学微信小程序开发>. 编写逻辑层代码由于在i ...
利用c#开发一个telnet unix服务器或者防火墙的小工具(转)
因为工作原因,需要定期从AIX服务器和cisco防火墙统计一些信息,于是决定自己写个小程序利用telnet协议实现这个功能. 利用SOCKET建立与服务器之间的连接,之后我们就可以利用程序直接发送命令 ...
超详细带你入门开发一个超实用的浏览器插件
相信大家平时在电脑上逛掘金.知乎网站时,肯定有看到过下面超级烦人的跳转拦截确认页面虽然这种拦截的初衷是好的,但是我相信大家平时肯定不会因为有了这个拦截提醒页面,就会对即将打开的网站安全性提高自己的警 ...
c++ eos智能合约开发_[EOS智能合约]第二节：用EOS开发一个To-do List小应用
EOS Asia 本教程原文作者为EOS Asia,亚洲最具技术实力和最国际化的EOS超级节点竞选者.EOS Asia 同时也是EOS Gems和Traffic Exchange Token这两个项目 ...
android桌面小组件开发_快使用Scriptable自己开发一个iPhone小组件吧
最近苹果的 iOS 系统升级到了 iOS 14,这次的更新我比较关注的就是升级的小组件功能,这次更新我们可以将小组件放置在主屏幕中的任何位置,可以让我们更加便捷的查看一些信息,从而省去了还需要打开AP ...
flutter 获取定位_从头开发一个Flutter插件（二）高德地图定位插件
在上一篇文章从头开发一个Flutter插件(一)开发流程里具体介绍了flutter插件的具体开发流程,从创建项目到发布.接下来将会为Flutter天气项目开发一个基于高德定位sdk的flutter定位 ...

[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件相关推荐

最新文章

热门文章