1. 插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件
2. json的三种格式（学习jQuery的基础）
2.1 对象
$(function() { //jQuery程序入口
var jsonObj1={
sid:'001',
sname:'00A'
}
})
2.2 列表/数组
$(function() {
var jsonObj2=[1,2,3,4,5]
})
2.3 混合模式
$(function() {
var jsonObj3={
sid:'003',
sname:'00Z',
hobby:['a','b','c']
}
// alert(jsonObj3);
// alert(jsonObj3.sid+","+jsonObj3.sname+","+jsonObj3.hobby);
// console.log(jsonObj3); //把json对象的属性值放到浏览器的控制台查看
})
3. $.extend
$(function() {
// $.extend：对象的扩展(或继承) /用来扩充jQuery类的属性和方法
var jsonObj4={}
//*把后面的对象扩充第一个对象,可以多个对第一个进行扩充，如果有相同属性，则后面的属性值会覆盖全面的属性值
$.extend(jsonObj4,jsonObj3,jsonObj1);
console.log(jsonObj4);
//扩充方法
$.extend({
hello:function(){
alert("hello jQuery");
}
})
//调用方法
$.hello();
})
4. $.fn.extend
$(function() {
/* 2.2 $.fn.extend (用来扩充jQuery实例属性或者方法)
$.fn.extend(obj1)//$.fn.method=function(options){...}; */
//扩充实例方法
$.fn.extend({
helloa:function(){
alert("hello--a jQuery");
}
})
//调用实例方法
$("#abc").helloa();
})
-----------------------------------------------------------------------------------------
<body>
<div id="abc">jQuery</div>
</body>
5，自定义jQuery插件 - - 代码
5.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">
<!-- 优先调用css样式，再调用jQuery插件，*注意调用先后顺序 -->
<link href="${pageContext.request.contextPath}/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"></link> <!-- 1,调用自定义css样式 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script> <!-- 2,调用jQuery插件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/table/js/jquery.table.js"></script> <!-- 3,调用自定义jQuery插件 -->
<title>Insert title here</title>
<!-- 第一步优化--1.1 将以下样式放到自定义css样式jquery/table/css/jquery.table.css中(自定义的css文件夹) -->
<!-- <style type="text/css">
.blue {
background: blue;
}
.orange {
background: orange;
}
.red {
background: red;
}
</style> -->
<script type="text/javascript">
$(function(){
//更换默认样式颜色
$("table").bgColor(
defaults={
head:'blue',
out:'white',
even:'orange'
});
//第一步优化--1.2
/* $("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');
});
}) */ //--->放到自定义jQuery插件jquery/table/js/jquery.table.js中(自定义jQuery插件的文件夹)
})
</script>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>java编程思想</td>
<td>孙悟空</td>
<td>10万</td>
</tr>
<tr>
<td>C++</td>
<td>我吃西红柿</td>
<td>8万</td>
</tr>
<tr>
<td>java从入门到入土</td>
<td>逆苍天</td>
<td>2万</td>
</tr>
<tr>
<td>大数据</td>
<td>唐僧</td>
<td>18万</td>
</tr>
<tr>
<td>人工智能</td>
<td>八戒</td>
<td>20万</td>
</tr>
</table>
<table border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>java编程思想</td>
<td>孙悟空</td>
<td>10万</td>
</tr>
<tr>
<td>C++</td>
<td>我吃西红柿</td>
<td>8万</td>
</tr>
<tr>
<td>java从入门到入土</td>
<td>逆苍天</td>
<td>2万</td>
</tr>
<tr>
<td>大数据</td>
<td>唐僧</td>
<td>18万</td>
</tr>
<tr>
<td>人工智能</td>
<td>八戒</td>
<td>20万</td>
</tr>
</table>
</body>
</html>
5.1.1 自定义css文件
@charset "UTF-8"; /* 自定义css样式插件 */
.blue {
background: blue;
}
.orange {
background: orange;
}
.red {
background: red;
}
.yellow {
background: yellow;
}
.green {
background: #bbff99;
}
.gray {
background: gray;
}
.white {
background: white;
}
5.1.2 自定义jQuery插件
//自定义jQuery插件
$(function() {
//默认样式颜色
var defaults={
head:'blue',
out:'white',
even:'orange'
}
$.fn.extend({
bgColor:function(option) {
//通过$.extend后面的相同属性值会覆盖前面属性值的特点更换样式颜色属性
$.extend(defaults,option);
//return的原因是上该实例方法支持链编程，好比Stringbuffer
//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.even);
},function(){
$(this).removeClass().addClass(defaults.out);
});
})
}
})
})
5.2 第二步优化
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/head.jsp" %> <!-- 公用的插件引用 -->
<!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">
<%-- 第二步优化：把公用的插件引用标签放到/jsp/common/head.jsp中(自定义jsp文件，HTML5格式)
<link href="${pageContext.request.contextPath}/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"></link>
<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>
--%>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
//更换默认样式颜色
$("table").bgColor(
defaults={
head:'orange',
out:'green',
even:'blue'
});
})
</script>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>java编程思想</td>
<td>孙悟空</td>
<td>10万</td>
</tr>
<tr>
<td>C++</td>
<td>我吃西红柿</td>
<td>8万</td>
</tr>
<tr>
<td>java从入门到入土</td>
<td>逆苍天</td>
<td>2万</td>
</tr>
<tr>
<td>大数据</td>
<td>唐僧</td>
<td>18万</td>
</tr>
<tr>
<td>人工智能</td>
<td>八戒</td>
<td>20万</td>
</tr>
</table>
<table border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>java编程思想</td>
<td>孙悟空</td>
<td>10万</td>
</tr>
<tr>
<td>C++</td>
<td>我吃西红柿</td>
<td>8万</td>
</tr>
<tr>
<td>java从入门到入土</td>
<td>逆苍天</td>
<td>2万</td>
</tr>
<tr>
<td>大数据</td>
<td>唐僧</td>
<td>18万</td>
</tr>
<tr>
<td>人工智能</td>
<td>八戒</td>
<td>20万</td>
</tr>
</table>
</body>
</html>
5.2.1 简化引用公用的插件代码(创建HTML5格式的jsp文件)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE> <!-- HTML5 格式 -->
<link href="${pageContext.request.contextPath}/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"></link>
<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>
6. 优化后的jQuery代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/head.jsp" %> <!-- 公用的插件引用路径 -->
<!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">
$(function(){
//更换默认样式颜色
$("table").bgColor(
defaults={
head:'orange',
out:'green',
even:'blue'
});
})
</script>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>java编程思想</td>
<td>孙悟空</td>
<td>10万</td>
</tr>
<tr>
<td>C++</td>
<td>我吃西红柿</td>
<td>8万</td>
</tr>
<tr>
<td>java从入门到入土</td>
<td>逆苍天</td>
<td>2万</td>
</tr>
<tr>
<td>大数据</td>
<td>唐僧</td>
<td>18万</td>
</tr>
<tr>
<td>人工智能</td>
<td>八戒</td>
<td>20万</td>
</tr>
</table>
<table border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>java编程思想</td>
<td>孙悟空</td>
<td>10万</td>
</tr>
<tr>
<td>C++</td>
<td>我吃西红柿</td>
<td>8万</td>
</tr>
<tr>
<td>java从入门到入土</td>
<td>逆苍天</td>
<td>2万</td>
</tr>
<tr>
<td>大数据</td>
<td>唐僧</td>
<td>18万</td>
</tr>
<tr>
<td>人工智能</td>
<td>八戒</td>
<td>20万</td>
</tr>
</table>
</body>
</html>