jquery插件标准写法

jquery插件分为三种

1、封装对象方法的插件

2、封装全局函数的插件

3、选择器插件


具体代码

0、一般插件写法

;(function($){
	$.fn.extend({
		// 插件方法名
		"myJqueryPlug":function(options){
			// 插件匹配多个元素,并且返回this,使方法可链
			return this.each(function(){
				// 插件设置默认值
				options=$.extend({
					// 参数
					
					// end-----参数
				},options);
				// 插件代码
				
				// end-----插件代码
			});
		}
	});
})(jQuery);



1、封装对象方法的插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>插件2,ltrim,rtrim</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--   引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script	type="text/javascript">
//插件编写
;(function($) {
	$.extend({
		ltrim :	function( text ) {
			return (text ||	"").replace( /^\s+/g, "" )
		},
		rtrim :	function rtrim(	text ) {
			return (text ||	"").replace( /\s+$/g, "" )
		}
	});
})(jQuery);

//插件应用
$(function(){
	$("#trimTest").val(
		jQuery.trim("       test      ") + "\n" +
		jQuery.ltrim("       test      ") + "\n" +
		jQuery.rtrim("       test      ")
	);
})

</script>
</head>
<body>
<textarea id="trimTest" rows="5" cols="20"></textarea>

</body>
</html>


2、封装全局函数的插件

<!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="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
	<script type="text/javascript">
	//插件编写
	;(function($) {
		$.fn.extend({
			"alterBgColor":function(options){
				//设置默认值
				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);
				return this;  //返回this,使方法可链。
			}
		});
	})(jQuery);

	//插件应用
	$(function(){
		$("#table2")
				.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>


3、选择器插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>插件4,between</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--   引入jQuery -->
	<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
	<script	type="text/javascript">
		//插件编写
		;(function($) {
			$.extend(jQuery.expr[":"], {
				between :	function( a , i ,m ) {
					var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符,切成一个数组
					return tmp[0]-0<i&&i<tmp[1]-0;
				}
			});
		})(jQuery);

		//插件应用
		$(function(){
			alert("执行前");
			$("div:between(2,5)").css("background","white");
			alert("执行后");
		})
	</script>
</head>
<body>
<div style="background:red">0</div>
<div style="background:blue">1</div>
<div style="background:green">2</div>
<div style="background:yellow">3</div>
<div style="background:gray">4</div>
<div style="background:orange">5</div>

</body>
</html>



展开阅读全文

没有更多推荐了,返回首页