通过编写插件可以将函数或一系列方法进行封装,方便代码维护和提高开发效率,Jquery提供最常用的封装对象方法,即通过选择器获取对象进行操作,首先JS的闭包定义匿名函数,然后通过JQ提供的jQuery.fn.extend()方法封装插件

;(function(){
	$.fn.extend({
		"插件名字":function(options){
			return this.each(function(){//使插件匹配多个元素使用each()方法来遍历,并返回this使方法可链
				//插件代码
			});
		}
	});
})(jQuery);


完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编写自定义插件实现表格选中和隔行变色</title>
<style type="text/css">
table{ border:0;border-collapse:collapse;}
td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px	solid #333;}
.even{ background:#FFF38F;}  /* 偶数行样式*/
.odd{ background:#FFFFEE;}  /* 奇数行样式*/
.selected{ background:#FF6500;color:#fff;}
</style>
<!--   引入jQuery -->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//插件编写
//为了更好的兼容,开始前有个分号
;(function($) {//使用$作为匿名函数形参,继续使用$作为jQuery的别名
	$.fn.extend({
		"alterBgColor":function(options){
			return this.each(function(){//返回this,使方法可链。
				//设置默认值
				options=$.extend({
					odd:"odd",	/* 偶数行样式*/
					even:"even", /* 奇数行样式*/
					selected:"selected" /* 选中行样式*/ 
				},options);
				$("tbody>tr:odd",this).addClass(options.odd);
				$("tbody>tr:even",this).addClass(options.even);
				$('tbody>tr',this).click(function() {
					//判断当前是否选中
					var hasSelected=$(this).hasClass(options.selected);
					//如果选中,则移出selected类,否则就加上selected类
					$(this)[hasSelected?"removeClass":"addClass"](options.selected)
						//查找内部的checkbox,设置对应的属性。
						.find(':checkbox').attr('checked',!hasSelected);
				});
				// 如果单选框默认情况下是选择的,则高色.
				$('tbody>tr:has(:checked)',this).addClass(options.selected);
			});
		}
	});
})(jQuery);//将jQuery作为实参传递给匿名函数
//插件应用
$(function(){
	$("#table2,#table1")
			.alterBgColor()  //应用插件
			.find("th").css("color","red");//可以链式操作
})
</script>
</head>
<body>
<table id="table1">
	<thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
	<tbody>
		<tr>
			<td><input type="checkbox" name="choice" value=""/></td>
			<td>张山</td>
			<td>男</td>
			<td>浙江宁波</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" /></td>
				<td>李四</td>
			<td>女</td>
			<td>浙江杭州</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
					<td>王五</td>
			<td>男</td>
			<td>湖南长沙</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" /></td>
			<td>找六</td>
			<td>男</td>
			<td>浙江温州</td>	
		</tr>
		<tr>
		<td><input type="checkbox" name="choice" value="" /></td>
				<td>Rain</td>
			<td>男</td>
			<td>浙江杭州</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
			<td>MAXMAN</td>
			<td>女</td>
			<td>浙江杭州</td>
		</tr>
	</tbody>
</table>
<br /><br />
<table id="table2">
	<thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
	<tbody>
		<tr>
			<td><input type="checkbox" name="choice" value=""/></td>
			<td>张山</td>
			<td>男</td>
			<td>浙江宁波</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" /></td>
				<td>李四</td>
			<td>女</td>
			<td>浙江杭州</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
					<td>王五</td>
			<td>男</td>
			<td>湖南长沙</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" /></td>
			<td>找六</td>
			<td>男</td>
			<td>浙江温州</td>	
		</tr>
		<tr>
		<td><input type="checkbox" name="choice" value="" /></td>
				<td>Rain</td>
			<td>男</td>
			<td>浙江杭州</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
			<td>MAXMAN</td>
			<td>女</td>
			<td>浙江杭州</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Options定义的默认值可以通过$(“#对象”).alterBgColor({odd:”odd”,even:”even”,selected:”selected”})覆盖默认的CSS,留空则使用默认

  • Tags:

发表评论/留言

为了您的身体健康、潇洒、美丽、帅气,请不要灌水。

/ 快捷键:Ctrl+Enter