参考: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 > |