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){   var object = obj;   var id = 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的别名。

实例：以下是行为不正确的方法

<ul>   <li>11111111111111111111111111</li>   <liclass="this">22222222222222222222</li>   <li>333333333333333</li>   <liclass="that">44444444444444444</li>   <liclass="this">55555555555555</li>   <li>6666666666666666</li>   <li>777777777777777777</li>   <liclass="that">777777777777777777</li> </ul> <inputtype="button" value="swap" id="swap" />

jQuery.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");   return false; })

全部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);   }else if($element.hasClass(class2)){    $element.removeClass(class2).addClass(class1);   }  }) }