jQuery插件

最新推荐文章于 2024-08-12 00:32:33 发布

张润红

最新推荐文章于 2024-08-12 00:32:33 发布

阅读量1k

点赞数

分类专栏： Java 文章标签： jQuery插件

本文链接：https://blog.csdn.net/Zhangrunhong/article/details/91346988

版权

Java 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

文章目录

1. 插件机制简介

往jquery类库里面去扩展方法，这类方法就是jquery插件

2. json的三种格式

第一种：
2.1 对象

<%@ 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">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		//json对象的字符串体现形式
		var jsonObj1 = {
				sid:'s001',
				sname:'zrh'
		}
		alert(jsonObj1);
	})
</script>
</head>
<body>

</body>
</html>

第二种
2.2 列表/数组

$(function(){
		//json对象的字符串体现形式
		var jsonObj1 = {
				sid:'s001',
				sname:'zrh'
		}
		console.log(jsonObj1);//通过console.log输出到控制台去
		//json数组的字符串体现形式
		var jsonArray1=[1,3,4,5];
		console.log(jsonArray1)
	})

第三种
2.3 混合模式

<script type="text/javascript">
	$(function(){
		//json对象的字符串体现形式
		var jsonObj1 = {
				sid:'s001',
				sname:'zrh'
		}
		console.log(jsonObj1);//通过console.log输出到控制台去
		//json数组的字符串体现形式
		var jsonArray1=[1,3,4,5];
		console.log(jsonArray1)
		//json混合模式的字符串体现形式
		var jsons = {id:2,hobby:['a','b','d','k','s']};
		console.log(jsons)
		
		var jsonObj3 = {
				sid:'s002',
				sname:'zrh',
				hobby:['a','b','d','k','s']
		}
		
		//$.extend是用来 扩充jquery类属性或者方法 
		var jsonObj2 = {};
		//用后面的对象扩充定一个对象
		//$.extend(jsonObj2,jsonObj1);
		//讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，
		//如果后面对象有新的属性，会继续扩充
		$.extend(jsonObj2,jsonObj1,jsonObj3);
		console.log(jsonObj2);
		
		
	})
</script>

输出结果在控制台显示为：
在这里插入图片描述

3、$ .extend和$.fn.extend

<script type="text/javascript">
	$(function(){
		
		//$.extend是用来 扩充jquery类属性或者方法 
		var jsonObj2 = {};
		//用后面的对象扩充定一个对象
		//$.extend(jsonObj2,jsonObj1);
		//讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，
		//如果后面对象有新的属性，会继续扩充
		$.extend(jsonObj2,jsonObj1,jsonObj3);//扩展类属性
		console.log(jsonObj2);
		
		//扩展类方法
		$.extend({
			hello:function(){
				alert('我来了');
			}
		})
		
		
		$.hello();
		
		//$.fn.extend是用来扩充jquery实例的属性或者非法所用
		$.fn.extend({
			sayHello:function(){
				alert('你好');
			}
		})
		$("#yellow").sayHello();
		alert("yellow");
		
	})
</script>

4、 jQuery插件开发实例（demo7.jsp demo8.jsp demo9.jsp）

4.1 命名
jquery.xxx.js
在这里插入图片描述
把需要的css样式放这里面 jquer.table.css

@charset "UTF-8";
	  
.fen {
	background: #ff66ff;
}

.yellow {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
.hui {
	background: #d6d6c2;
}

把共有的jsp代码放这里面： jquery.table.js

$(function(){
	var defaults = {
			head : 'fen',
			out: 'yellow',
			over :'red'
	}
	
	$.fn.extend({
		//使用return的原因是让该实例方法支持链编程，好比Stringbuffer
		bgColor:function(option){
			$.extend(defaults,option)
			//这里的this指的是插件本身，可以看成一个jquery实例
			return this.each(function(){
				
				//这里的this指的是当前元素
				$("tr:eq(0)",this).addClass(defaults.head);
				$("tr:gt(0)",this).addClass(defaults.out);
				
				//添加动态效果
				$("tr:gt(0)",this).hover(function(){
					$(this).removeClass().addClass(defaults.over);
				},function(){
					$(this).removeClass().addClass(defaults.out);
					})
			})
		}
	});
	
})

head.jsp

<link href="${pageContext.request.contextPath }/jquery/table/css/jquer.table.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/table/js/jquery.table.js"></script>

写完上面的之后我们的代码就大大简化了
demo7
demo8
demo9代码相似:

<%@ 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">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.over{
	background:  #ff66ff;
}
.out{
	background: #ffff66;
}
.head{
	background: #ff3333;
}
</style>

<script type="text/javascript">
	$(function(){
		$("table").each(function(){
			
		
		
		//给默认值
		$("tr:eq(0)",this).addClass('head');
		$("tr:gt(0)",this).addClass('out');
		
		//添加动态效果
		$("tr:gt(0)",this).hover(function(){
			$(this).removeClass().addClass('over');
		},function(){
			$(this).removeClass().addClass('out');
			});
		})
	})
</script>
</head>
<body>
	<table id="t1" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
	
	<table id="t2" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
</body>
</html>