手机网站建设 上海,ktv网站建设方案,网站主页模板 优帮云,国内外贸网站建设公司1.表单验证插件Validation2.表单插件Form3.动态事件绑定插件livequery可以为后来的元素绑定事件类似于jQuery中的live()方法4.jQuery UI5.jQuery Cookie6.遮罩层插件:thickbox7.编写jQuery插件1编写插件的目的#xff1a;给已经有的一些列方法或函数做一个封装#x…1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuery UI 5.jQuery Cookie 6.遮罩层插件:thickbox 7.编写jQuery插件 1编写插件的目的给已经有的一些列方法或函数做一个封装一遍在其他地方使用方便后期维护和提高开发效率。 2三种类型的插件 a:封装对象方法的插件 jQuery.fn.extend() b:封装全局函数的插件 jQuery.extend() c:选择器插件 jQuery.extend() 3插件内部的this指向的是jQuery对象而不是DOM对象。 8.对于 jQuery 插件-初体验一 jquery.fn.extend与jquery.extend--初体验二 $.extend({},defaults, options) --初体验三 的补充。 1插件的基本要点 2jQuery.extend()方法处理可以用于扩展jQuery对象之外还有一个强大的功能就是用于扩展已有的Object对象。 例如 var settings{va: false, li: 5, name:foo};
var options{va: true, name:bar};
var newSetjQuery.extend(settings,options); 结果 newSet{va: true, li: 5, name:bar}; 所以jQuery.extend()方法经常被用于设置插件方法的一系列默认参数。 例子 function foo(options){optionsjQuery.extend({name:bar,length:5,dataType:xml},options);
} 2封装方法的插件使用 例子写color插件。 1.js文件命名jQuery.color.js 2.格式 ;(function($){})(jQuery); 3.由于是封装方法的插件使用jQuery.fn.extend() ;(function($){$.fn.extend({color:function(value){}})
})(jQuery); 4.this的可链式调用性 ;(function($){$.fn.extend({color:function(value){return this.css(color,value); //为了可链式调用返回this}})
})(jQuery); 5.两个功能设置与获取color ;(function($){$.fn.extend({color:function(value){if(valueundefined){return this.css(color); //为了可链式调用返回this)else{return this.css(color,value); }}})
})(jQuery); 6.插件提升 a:由于css方法本身具有返回第一个匹配元素的功能所以不需要使用eq()来获取第一个元素 b:由于css方法内部已经有判断value是否为undefined的机制所以可以省略if 最终 ;(function($){$.fn.extend({color:function(value){return this.css(color,value); }})
})(jQuery); 7.实际使用 script;(function($){$.fn.extend({color:function(value){return this.css(color,value); }})
})(jQuery);//应用
$(function(){alert($(div).color()); //获取第一个color$(div).color(red); //设置所有的div的color为red
})/script 8.插件扩展如果要定义一组插件可以这么写 ;(function($){$.fn.extend({color:function(value){}“border”:function(value){},...})
})(jQuery); 9.注意jQuery选择符可能会匹配多个元素可以在插件内部调用each()方法来遍历匹配元素。 如 ;(function($){$.fn.extend({color:function(value){return this.each(function(){})}})
})(jQuery); 3封装全局函数的插件使用 例子去除左侧和右侧的空格 ;(function($){$.extend({ltrim:function(text){return (text || ).replace(/^\s/g,);},rtrim:function(text){return (text || ).replace(/^\s$/g,);}})
})(jQuery);//调用
$(div).val(jQuery.ltrim( text )
) 4选择器插件 $(div:gt(1)) jQuery中的源码是 gt:function(a,i,m){ return im[3]-0; } 有三个参数a,i,m 转载于:https://www.cnblogs.com/zqzjs/p/4943617.html
