jquery金额插件 jquery插件怎么写

转载

mob64ca13ffd0f1 2024-02-13 20:49:21

文章标签 jquery金额插件 html jQuery css 文章分类 jQuery 前端开发

其实大家看起来的jQuery插件感觉很高级、很上档次，但是其实是一个很简单的原理。jQuery我们可以看作是java里面的一个类，jQuery插件的添加其实就是给jQuery类添加新的实例方法或者类方法，然后将其功能封装在其中。

当然，毕竟实在html上说java比较难以理解，所有我就用了一个表格悬浮实验来帮助IT朋友来进行帮助理解，但是呢还是要明白IT界一些不成文的规矩。那就是命名方面的规矩。

在自己写的插件中一般会有插件包名、js、css、html以及一些对于这个插件必要的图片等，命名规范如下。

1.插件包名：在web项目中的WebContent目录下命名一个规范的文件夹，命名只要符合java命名规范就行了，但是建议插件命名最好与功能相对应，毕竟别人看到也可以一目了然。

2.js的命名：jQuery插件js的命名一般为jquery.包名.js。

3.css的命名：包名.css

4.html的命名：包名.html

5.图片的包命名：一般为images

自定义插件命名规范事例如下：

jquery金额插件 jquery插件怎么写_jQuery

ok，下面就是自定义jQuery插件的例子：

这个例子呢是一个jQuery自定义插件的表格悬浮实验，一些基本注释都在代码上，可以帮助大家理解

1.jsp命名为：bgcolor.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>//${pageContext.request.contextPath}是获得项目名，这样子是为了确定是绝对路劲 jQuery.js，这个必须是导入的第一个 没有jQuery.js的可以 点击下载
<script type="text/javascript" src="${pageContext.request.contextPath }/bgcolor/jquery.bgcolor.js"></script>//导入自定义插件的js  路径一定要对
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bgcolor/bgcolor.css">//导入自定义插件的css   路径一定要对
<style type="text/css">//这是插件以外的样式，就是说你不喜欢插件的样式或者插件的样式不能满足要求，则可以自己写自己想要的样式
.c1{
	background-color: fuchsia;
}
.c2{
	background-color: green;
}
.c3{
	background-color:pink;
}
</style>
<script type="text/javascript">
	$(function(){//在body编译完才编译这个方法里面的东西
		$("#t1").bgcolor();//表格一的自定义jQuery插件的调用  默认为插件样式
		$("#t2").bgcolor(({headClass:'c1',outClass:'c2',overClass:'c3'}));//表格二的自定义jQuery插件的调用  调用自己的样式
		$("#t3").bgcolor();//表格三的自定义jQuery插件的调用   默认为插件样式
	});
</script>
</head>
<body>
<h1>表格1</h1>
	<table id="t1" width="100%" border="1px;">
		<tr>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
	</table>
	<h1>表格2</h1>
	<table  id="t2" width="100%" border="1px;">
		<tr>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
	</table>
	<h1>表格3</h1>
	<table  id="t3" width="100%" border="1px;">
		<tr>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
	</table>
</body>
</html>

2.插件包的命名为：bgcolor

jquery金额插件 jquery插件怎么写_html_02

3.：插件js的命名为：jquery.bgcolor.js，代码如下

$.fn.bgcolor = function(options){//在jQuery里面加入自己的方法
	options = options||{};//判断是否传入参数，没有传入则为{}
	
	var defaults = {
			headClass:'head',
			overClass:'over',
			outClass:'out'
	};//默认样式
	var v = {};
	$.extend(v,defaults,options);//把所有的需求加入到一个空的集合里面
	
	return this.each(function(index){//表格悬浮方法
		$("tr:eq(0)",this).addClass(v.headClass);
		$("tr:gt(0)",this).addClass(v.outClass).hover(function(){
			$(this).removeClass().addClass(v.overClass);
		},function(){
			$(this).removeClass().addClass(v.outClass);
		});
	});
	
};

4.插件css的命名：bgcolor.css 代码如下

.head{
	background-color: red;
    }
.out{
	background-color: blue;
    }
.over{
	background-color: yellow;
    }

5.html的命名：bgcolor.html 代码如下（其实就是jsp的代码，目的就是教别人这个插件怎么用的但是要<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"换成<!DOCTYPE html >）代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/bgcolor/jquery.bgcolor.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bgcolor/bgcolor.css">
<style type="text/css">
.c1{
	background-color: fuchsia;
}
.c2{
	background-color: green;
}
.c3{
	background-color:pink;
}
</style>
<script type="text/javascript">
	$(function(){
		$("#t1").bgcolor();
		$("#t2").bgcolor(({headClass:'c1',outClass:'c2',overClass:'c3'}));
		$("#t3").bgcolor();
	});
</script>
</head>
<body>
<h1>表格1</h1>
	<table id="t1" width="100%" border="1px;">
		<tr>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
	</table>
	<h1>表格2</h1>
	<table  id="t2" width="100%" border="1px;">
		<tr>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
	</table>
	<h1>表格3</h1>
	<table  id="t3" width="100%" border="1px;">
		<tr>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
			<td>名</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
	</table>
</body>
</html>

现在jQuery插件就做好了，在jQuery中加入插件的方法就是$.extend()和$.fn.extend();这两个方法，具体大家可以在jQuery的手册查看方法的功能，望大家有问题或者有意见可以提出来。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。