隔行变色 面向过程 的jQuery插件代码
-
首先是HTML代码 如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/table-1.1.js" ></script>
</head>
<body>
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
</table>
<script>
$("table").table({
odd:"green",
evenClass:"yellow"
})
</script>
</body>
</html>然后JS代码 如下：
;(function($){
$.fn.table = function(options){
var defaults = {
"odd":"red",
"evenClass":"blue"
}//定义默认属性
var options = $.extend(defaults,options)//用extend方法来继承传参的数据
this.each(function(){
var _this = $(this)
_this.find("tr:odd").css({
background:options.odd
})//奇数行变色
_this.find("tr:even").css({
background:options.evenClass
})//偶数行变色
})
return this//实现函数连缀
}
})(jQuery)
思路如下：
首先把table的表格布局好，样式等先写好之后，再写功能，这样才会有条不紊的写功能！
写好样式之后，就考虑怎么去实现这个功能，说到js 这个写法，首先我们得知道我们的需求之后
就根据需求来写功能，按我们现在的这个需求，首先可以知道我们现在的需求是要table的隔行变色，
用jQuery的选择器找到我们有改变的对象的方法，比如：基本选择器、过滤选择器等！我这里用的是基本选择器，
找到对象之后就要用这个:even()或者:odd()这两种方法找到相对应的tr（对象），用css（）的方法将所选择的tr变色就可以了
写完了需求之后。创建一个js文件写好插件的基本格式之后把这个功能代码丢进这个js包里面即可！
！！！需要注意的地方：
插件格式一定要理解清楚，理解是根据什么得出的逻辑顺序跟意思。需要连缀函数的记得要return回这个对象就行了！