最近一直在看JavaScript知识，偶尔也穿插一点Jquery，感觉Jquery用起来真爽，减少了很多的代码量，而且学习也不是很高。接下来给大家分享两个小的特效，表格隔行变色和Tab标签页，大家来体会一下。
表格隔行变色
效果图：
原生Js实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js表格隔行变色</title> <style> #table{ width:500px; border:1px solid red; border-collapse: collapse; } #table td{ border:1px solid red; } </style> <script> window.onload = function(){ var tr = document.getElementsByTagName('tr'); for(var i=0;i<tr.length;i++){ if(i % 2 == 0){ tr[i].style.background = 'blue'; }else{ tr[i].style.background = 'yellow'; } } } </script> </head> <body> <table> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> </table> </body> </html>
实现的思路比较简单，首先获取页面中的tr对象，然后遍历所有对象，分析是单行还是双行，给不同的行添加颜色。
Jquery实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery表格隔行变色</title> <style> #table{ width:500px; border:1px solid red; border-collapse: collapse; } #table td{ border:1px solid red; } </style> <script src="https://www.jb51.net/jquery.js"></script> <script> $(function(){ // $('table tr:even').css('background','blue'); // $('table tr:odd').css('background','yellow'); $('table tr').filter(':even').css('background','blue').end().filter(':odd').css('background','yellow'); }); </script> </head> <body> <table> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> <td>ddddd</td> </tr> </table> </body> </html>
大家看到没，Jquery只用到了一句话，就完成了工作。
Tab标签页
效果图
原生Js实现代码：