jQuery插件制作之全局函数使用方法.docx

jQuery插件制作之全局函数使用方法jQuery插件制作之全局函数使用方法1、添加新的全局函数所谓的全局函数，实际上就是jQuery对象的方法，但从实践的角度上看，他们是位于jQuery命名空间内部的函数(1)添加一个函数，只需要将新函数指定为jQuery对象的一个属性。jQuery.five=function(){alert("直接继承方式不一样");}调用：复制代码代码如下:$.five();(2)添加多个函数jQuery.five=function(){alert("直接继承方式不一样");}jQuery.six=function(){alert("直接继承方式不一样2");}调用：复制代码代码如下:$.five();$.six();以上的.方法会面临命名空间冲突的风险，为避免这个问题，最好把属于这个插件的所有全局函数，都封装到一个对象中，如下：//命名空间继承jQuery.myPlugin={one:function(obj){varobject=obj;varid=object.attr("id");alert(id);},two:function(){alert(22);}}这样其实是为全局函数创建了另一个命名空间:jQuery.myPlugin.2、添加jQuery对象方法jQuery中大多数内置的功能都是通过其对象的方法提供的。jQuery.fn.myMethod=function(){alert(11);}调用：复制代码代码如下:$.fn.myMethod();注意：jQuery.fn是jQuery.prototype的别名。实例：以下是行为不正确的方法111111111111111111111111112222222222222222222233333333333333344444444444444444555555555555556666666666666666777777777777777777777777777777777777jQuery.fn.swapClass=function(class1,class2){if(this.hasClass(class1)){this.removeClass(class1).addClass(class2);}if(this.hasClass(class2)){this.removeClass(class2).addClass(class1);}}$("#swap").click(function(){$("li").swapClass("this","that");returnfalse;})全部li都是用了that样式。(1)隐士迭代要在无论匹配多个元素的情况下都保证行为的正确，最简单的方法是始终在方法的环境上调用.each()方法，这样就会执行隐士迭代，而执行隐士迭代对于维护插件和内置方法的一致性是至关重要的，在调用的.each()方法内部，this依次引用的是每个DOM元素.以上代码修改为：jQuery.fn.swapClass=function(class1,class2){this.each(function(){var$element=jQuery(this);if($element.hasClass(class1)){$element.removeClass(class1).addClass(class2);}elseif($element.hasClass(class2)){$element.removeClass(class2).addClass(class1);}})}调用：复制代码代码如下:$("li").swapClass("this","that")(2)方法的连缀要使用方法的连缀，必须在所有的插件方法中返回一个jQuery对象。返回的jQuery对象通常就是this所引用的对象。jQuery.fn.swapClass=function(class1,class2){returnthis.each(function(){var$element=jQuery(this);if($element.hasClass(class1)){$element.removeClass(class1).addClass(class2);}elseif($element.hasClass(class2)){$element.removeClass(class2).addClass(class1);}})}调用：复制代码代码如下:$(&q