jQuery插件制作之全局函數(shù)用法實(shí)例

更新時(shí)間：2015年06月01日 12:34:11 作者：天使小寶

這篇文章主要介紹了jQuery插件制作之全局函數(shù)用法,實(shí)例分析了jQuery中全局函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery插件制作之全局函數(shù)用法。分享給大家供大家參考。具體分析如下：

1、添加新的全局函數(shù)

所謂的全局函數(shù)，實(shí)際上就是jQuery對(duì)象的方法，但從實(shí)踐的角度上看，他們是位于jQuery命名空間內(nèi)部的函數(shù)

(1)添加一個(gè)函數(shù)，只需要將新函數(shù)指定為jQuery對(duì)象的一個(gè)屬性。

jQuery.five =function(){ 
 alert("直接繼承方式不一樣"); 
}

調(diào)用：

復(fù)制代碼代碼如下:

$.five();

(2)添加多個(gè)函數(shù)

jQuery.five =function(){ 
 alert("直接繼承方式不一樣"); 
} 
jQuery.six =function(){ 
 alert("直接繼承方式不一樣2"); 
}

調(diào)用：

復(fù)制代碼代碼如下:

$.five();$.six();

以上的方法會(huì)面臨命名空間沖突的風(fēng)險(xiǎn)，為避免這個(gè)問(wèn)題，最好把屬于這個(gè)插件的所有全局函數(shù)，都封裝到一個(gè)對(duì)象中，如下：

//命名空間繼承
jQuery.myPlugin ={ 
 one : function(obj){ 
  var object = obj; 
  var id = object.attr("id"); 
  alert(id); 
 }, 
 two : function(){ 
  alert(22); 
 } 
}

這樣其實(shí)是為全局函數(shù)創(chuàng)建了另一個(gè)命名空間:jQuery.myPlugin.

2、添加jQuery對(duì)象方法

jQuery中大多數(shù)內(nèi)置的功能都是通過(guò)其對(duì)象的方法提供的。

jQuery.fn.myMethod= function(){ 
 alert(11); 
}

調(diào)用：

復(fù)制代碼代碼如下:

$.fn.myMethod();

注意：jQuery.fn是jQuery.prototype的別名。

實(shí)例：以下是行為不正確的方法

<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)隱士迭代

要在無(wú)論匹配多個(gè)元素的情況下都保證行為的正確，最簡(jiǎn)單的方法是始終在方法的環(huán)境上調(diào)用.each()方法，這樣就會(huì)

執(zhí)行隱士迭代，而執(zhí)行隱士迭代對(duì)于維護(hù)插件和內(nèi)置方法的一致性是至關(guān)重要的，在調(diào)用的.each()方法內(nèi)部，this

依次引用的是每個(gè)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); 
  } 
 }) 
}

調(diào)用：

復(fù)制代碼代碼如下:

$("li").swapClass("this","that")

(2)方法的連綴

要使用方法的連綴，必須在所有的插件方法中返回一個(gè)jQuery對(duì)象。返回的jQuery對(duì)象通常就是this所引用的對(duì)象。

jQuery.fn.swapClass= function(class1,class2){ 
 return 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); 
  } 
 }) 
}

調(diào)用：

復(fù)制代碼代碼如下:

$("li").swapClass("this","that").css("text-decoration","underline");

3、添加新的簡(jiǎn)寫(xiě)方法

//添加新的簡(jiǎn)寫(xiě)方法 
jQuery.fn.slideFadeOut= function(speed,callback){ 
 return this.animate({ 
  height : "hide", 
  opacity : "hide" 
 },speed,callback) 
} 
jQuery.fn.slideFadeIn= function(speed,callback){ 
 return this.animate({ 
  height : "show", 
  opacity : "show" 
 },speed,callback) 
} 
jQuery.fn.slideFadeToggle= function(speed,callback){ 
 return this.animate({ 
  height : "toggle", 
  opacity : "toggle" 
 },speed,callback) 
}

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: