《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万
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！