自己实现一个jQuery插件

  <script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>

<table class='mainTable' id='tbl'>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
$(function(){
/* 非插件实现行背景高亮
$('.mainTable tr').mouseover(function(){
		$(this).css('backgroundColor','yellow').siblings().css('backgroundColor','white');
});
*/
$('.mainTable').setTableColor();
	
});

////自己实现jquery插件(可单独放到js文件中):
/*
* 鼠标放table行上背景高亮
* 插件的使用:$('#tbleId').setTableColor();
*/
;(function($){//为了把前面代码视为一个整体故第一个字符是分号,$是jquery对象。
	//注意:$.fn.extend()里面以“key-value”形式写函数
	$.fn.extend({
		setTableColor:function(){//行背景高亮函数
			$('tr',this).mouseover(function(){//this是table对象
				$(this).css('backgroundColor','#F2F4FF').siblings().css('backgroundColor','white');//this是表行
			});
			return this;//本句为了能链式编程
		}
	});
})(jQuery);

</script>

原文地址:https://www.cnblogs.com/anjun-xy/p/10162005.html