《jQuery 自定义插件》
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();
})
-----------------------------------------------------------------------------------------
jQuery
5，自定义jQuery插件 - - 代码
5.1 第一步优化
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
Insert title here
书名
作者
点击量
java编程思想
孙悟空
10万
C++
我吃西红柿
8万
java从入门到入土
逆苍天
2万
大数据
唐僧
18万
人工智能
八戒
20万
书名
作者
点击量
java编程思想
孙悟空
10万
C++
我吃西红柿
8万
java从入门到入土
逆苍天
2万
大数据
唐僧
18万
人工智能
八戒
20万
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" %>
<%-- 第二步优化：把公用的插件引用标签放到/jsp/common/head.jsp中(自定义jsp文件，HTML5格式)
--%>
Insert title here
书名
作者
点击量
java编程思想
孙悟空
10万
C++
我吃西红柿
8万
java从入门到入土
逆苍天
2万
大数据
唐僧
18万
人工智能
八戒
20万
书名
作者
点击量
java编程思想
孙悟空
10万
C++
我吃西红柿
8万
java从入门到入土
逆苍天
2万
大数据
唐僧
18万
人工智能
八戒
20万
5.2.1 简化引用公用的插件代码(创建HTML5格式的jsp文件)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
6. 优化后的jQuery代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/head.jsp" %>
Insert title here
书名
作者
点击量
java编程思想
孙悟空
10万
C++
我吃西红柿
8万
java从入门到入土
逆苍天
2万
大数据
唐僧
18万
人工智能
八戒
20万
书名
作者
点击量
java编程思想
孙悟空
10万
C++
我吃西红柿
8万
java从入门到入土
逆苍天
2万
大数据
唐僧
18万
人工智能
八戒
20万