参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动
jQuery插件分类：
1.封装方法插件（常用）
是对象级别的插件，通过jQuery选择器获取对象，然后为对象添加方法。即可使用，例如：$("li").foucsColor();
编写简单，容易调用。
2.封闭函数插件
是类级别的插件，就是可以直接给jQuery添加静态方法。类似于$.ajax(),$.trim();
3.选择器插件（很少用）
插件开发要点：
1.插件名称必须遵循jQuery.[插件名称].js，例如：jQuery.newplugin.js
2.对象级别插件，使用jQuery.fn.extend()方法进行扩展
类级别插件，使用jQuery.extend()方法进行扩展
3.结尾都必须以;结尾
4.插件内部可以使用this来获取元素，this.each遍历全部元素
5.为了保证jquery原有的能使用方法链的形式调用多个方法，每个插件本身最后比较返回一个jquery对象，也就是this
插件开发示例：
1、对象级别插件开发示例：jquery.lifocuscolor.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | /*-----------------------------------/功能：设置ul中li的鼠标经过和离开背景色参数：【li_col】可选，鼠标所在行的颜色返回：原调用的对象示例：$("ul").focusColor(); 或者$("ul").focusColor("red");/-----------------------------------*/;(function($){ $.fn.extend({ "focusColor":function(li_col){//focusColor表示插件名称，li_col表示调用该函数时参数 //插件具体代码开始 //1.设置默认属性 var def_col = "#ccc"; var lst_col = "#fff"; li_col = (li_col == undefined)?def_col:li_col; //2.插件实现代码 this.find("li").each(function(index, el) { $(this).mousemove(function() {//鼠标经过 $(this).css("background-color",li_col); }).mouseout(function() {//鼠标离开 $(this).css("background-color","#fff"); }); return $(this);//返回jQuery对象 }) //插件具体代码结束 } })})(jQuery); |
测试jquery.lifocuscolor.js插件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!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="jquery-1.4.4.js"></script><script type="text/javascript" src="jquery.lifocuscolor.js"></script><script type="text/javascript">$(function(){ // $("#ul").focusColor();//使用默认样式 $("#ul").focusColor("red");//鼠标经过红色});</script><title>测试lifocuscolor插件</title></head><body> <ul id="ul"> <li>张三</li> <li>李四</li> <li>王五</li> <li>赵六</li> </ul></body></html> |
默认样式调用结果：
使用红色调用结果：
2、类级别插件开发示例：jquery.twoaddresult.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /*-----------------------------------/功能：计算两个数字相加或相减的结果参数：数字p1，p2返回：原调用的对象示例：$.addNum(1,2); $.subNum(4,2);/-----------------------------------*/;(function($){ $.extend({ "addNum":function(p1,p2){//两数相加 p1 = (p1 == undefined)?0:p1; p2 = (p2 == undefined)?0:p2; var resultInt = parseInt(p1) + parseInt(p2); return resultInt; }, "subNum":function(p1,p2){//两数相减 var resultInt = 0; p1 = (p1 == undefined)?0:p1; p2 = (p2 == undefined)?0:p2; if (p1 > p2) { resultInt = parseInt(p1) - parseInt(p2); }; return resultInt; return $(this); } }); })(jQuery); |
测试twoaddresult插件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!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="jquery-1.4.4.js"></script><script type="text/javascript" src="jquery.twoaddresult.js"></script><script type="text/javascript">$(function(){ console.info($.addNum(-2,2));//0 console.info($.subNum(4,2));//2 });</script><title>测试twoaddresult插件</title></head><body> </body></html> |