jQuery外掛程式製作之全域函數用法執行個體，jquery全域

jQuery外掛程式製作之全域函數用法執行個體，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);   }  }) }

調用：
複製代碼 代碼如下:$("li").swapClass("this","that")

(2)方法的連綴

要使用方法的連綴，必須在所有的外掛程式方法中返回一個jQuery對象。返回的jQuery對象通常就是this所引用的對象。

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);   }  }) }

調用：
複製代碼 代碼如下:$("li").swapClass("this","that").css("text-decoration","underline");

3、添加新的簡寫方法

//添加新的簡寫方法 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) }

希望本文所述對大家的jQuery程式設計有所協助。