Process oriented jQuery plug-in code with interlaced color
-
First, the HTML code is as follows:
<!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>number</td>
<td>Full name</td>
<td>achievement</td>
</tr>
<tr>
<td>number</td>
<td>Full name</td>
<td>achievement</td>
</tr>
<tr>
<td>number</td>
<td>Full name</td>
<td>achievement</td>
</tr>
<tr>
<td>number</td>
<td>Full name</td>
<td>achievement</td>
</tr>
</table>
<script>
$("table").table({
odd:"green",
evenClass:"yellow"
})
</script>
</body>
</html>Then JS code is as follows:
;(function($){
$.fn.table = function(options){
var defaults = {
"odd":"red",
"evenClass":"blue"
}//Define default properties
var options = $.extend(defaults,options)//Using extend method to inherit the data of the passed parameter
this.each(function(){
var _this = $(this)
_this.find("tr:odd").css({
background:options.odd
})//Odd line discoloration
_this.find("tr:even").css({
background:options.evenClass
})//Even line discoloration
})
return this//To realize function concatenation
}
})(jQuery)
The ideas are as follows:
First of all, the table layout is good, the style is written first, and then the function is written, so that the function can be written in an orderly way!
After writing the style, we will consider how to implement this function. When it comes to js, first of all, we need to know our requirements
Write the function according to the requirement. According to our current requirement, we can know that our current requirement is to change the color of the table row by row,
Use jQuery's selector to find the methods we have to change objects, such as: basic selector, filter selector, etc! I use the basic selector here,
After you find the object, you need to use these two methods: event() or: odd() to find the corresponding tr (object). You can use the css() method to change the color of the selected tr
After writing the requirements. Create a js file, write the basic format of the plug-in, and then put the function code into the js package!
!!! What should be noted:
The plug-in format must be understood clearly. Understand the logical order and meaning of the plug-in format. You need to return this object if you need to concatenate the function!