30分钟学会jquery插件
jquery功能强大，基于此开发插件很方便。
1.核心方法：利用jquery内部方法进行功能的扩展。
$.extend(object) ：为JQuery 添加一个静态方法。
$.fn.extend(object) ：为JQuery实例添加一个方法。
实例：
//可以通过jquery直接点出来的。 $.extend({ fun1: function () { alert("执行方法一"); } }); $.fun1(); //依托实例调用的 $.fn.extend({ fun2: function () { alert("执行方法2"); } }); $(this).fun2(); //等同于 $.fn.fun3 = function () { alert("执行方法三"); } $(this).fun3();
为什么$.extend可以直接调出方法哪，因为js对象有一个prototype属性，什么是prototype？
从何而来：js类，与C#类似，他们都从object继承而来，而object默认有一个prototype属性，所以其他对象都集成了prototype属性。
有什么作用：
对象的继承：原型继承法。
//动物类 function Animal(){ console.log(‘我能动‘); } //猫类 function Cat(){ console.log(‘我能跳‘); } //猫类要先能动，才能跳，继承动物类 Cat.prototype=new Animal(); //将构造函数重新指向自己 Cat.prototype.constructor=Cat;
js对象的继承方法通常是通过phototype来获取父类中的对象，就这样，最后的类拥有所有父类的属性和方法。
他们集合在一起组成作用域链，与它的作用域链和执行环境共同构成了闭包。
而创建闭包的一个途径就是匿名函数
请看一个自执行函数
(function($){ }(jQuery)); //其中传入jQuery对象
回到前面，$.extend()相当于给jquery类的prototype中添加一个方法。
而jQuery.fn.extend(object)就融入了执行环境的因素，比如
$.fn.extend({ alertWhileClick:function(){ $(this).click(function(){ alert($(this).val()); }); } }); $(“#input1″).alertWhileClick();
当中必须有实例来调用。
关于$.extend()：
还有一个方法重载$.extend(数组a,数组b,数组c)，作用是将b的元素推入a中，然后将c的也推入其中，如果a和b有冲突，以b的为准，b和c冲突以c为准。越靠后，优先权越大。
插件开发：写一个可以判断元素中隐藏的a标签和链接的插件
- 闭包函数营造一个单独的执行环静
(function($){ })(jQuery)
2.
使用$.fn.extend扩展jquery
(function($){ $.fn.extend({ "selectLink":function(options){ } }); })();
3.给插件添加默认参数
(function($){ $.fn.extend({ "selectLink":function(options){ var opts=$.extend({},defaults,options); this.each(function(){ var $this=$(this);//this指的是jquery对象，这里一个是效率的需要，一个是准确性的需要，因为一个对象中this指代关系会变为指向当前对象 }); } }); //如果用户不自定义我们就使用默认的 var defaults={ keyword:‘http‘, base:‘a‘ }; })();
4.返回遍历的每个对象，便于链式调用，同时定义公有方法
(function($){ $.fn.extend({ "selectLink":function(options){ var opts=$.extend({},defaults,options); return this.each(function(){//注意return var $this=$(this);//this指的是jquery对象，这里一个是效率的需要，一个是准确性的需要，因为一个对象中this指代关系会变为指向当前对象 if($(this)[0].targetName="a"){
//执行公有方法
alertA($(this)[0].href);
}
}); } }); //定义一个公共方法 $.fn.selectLink.alertA=function(op){
alert(op);
}; //如果用户不自定义我们就使用默认的 var defaults={ keyword:‘http‘, base:‘a‘ }; })();
5.定义私有方法
(function($){ $.fn.extend({ "selectLink":function(options){ var opts=$.extend({},defaults,options); return this.each(function(){//注意return var $this=$(this);//this指的是jquery对象，这里一个是效率的需要，一个是准确性的需要，因为一个对象中this指代关系会变为指向当前对象
//调用私有方法
var is_a=isA(options,$this[0]); if(is_a){ //执行公有方法 alertA($(this)[0].href); } }); } }); //定义一个公共方法 $.fn.selectLink.alertA=function(op){ alert(op); };
//私有方法
function isA(options,obj){
if(obj.href.indexOf(options.keyword)>1){
return ture;
}else{
return false;
}
} //如果用户不自定义我们就使用默认的 var defaults={ keyword:‘http‘, base:‘a‘ }; })();
6.重写和调用
//重写公共方法
$.fn.selectLink.alertA=function(op){
alert(‘this is ‘+op);
};
$("#p").selectLink({keyword:‘www‘});
插件可用性未经过验证，仅为了展示流程<!--[endif]-->
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
