首頁 >web前端 >js教程 >jQuery外掛製作之全域函數用法實例_jquery

jQuery外掛製作之全域函數用法實例_jquery

WBOY
WBOY原創
2016-05-16 15:57:041085瀏覽

本文實例講述了jQuery插件製作之全域函數用法。分享給大家供大家參考。具體分析如下:

1、新增新的全域函數

所謂的全域函數,其實就是jQuery物件的方法,但從實踐的角度來看,他們是位於jQuery命名空間內部的函數

(1)新增一個函數,只需要將新函數指定為jQuery物件的屬性。

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

呼叫:

複製程式碼 程式碼如下:
$.five();

$.five();

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

$.five();$.five();$.five();
(2)新增多個函數

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

複製程式碼

程式碼如下:
jQuery.fn.myMethod= function(){ 
 alert(11); 
}

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

$.five();$.six();$.five();$.six();$.five();$.six();$.five();$.six();
以上的方法會面臨命名空間衝突的風險,為避免這個問題,最好把屬於這個插件的所有全域函數,都封裝到一個物件中,如下:

這樣其實是為全域函數建立了另一個命名空間:jQuery.myPlugin.
<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" />
2、新增jQuery物件方法
jQuery中大多數內建的功能都是透過其物件的方法提供的。
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; 
})

調用:

複製代碼

代碼如下:
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); 
  } 
 }) 
}

$.fn.myMethod();


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

實例:以下是行為不正確的方法
全部li都是用了that樣式。

(1)隱士迭代

要在無論匹配多個元素的情況下都保證行為的正確,最簡單的方法是始終在方法的環境上調用.each()方法,這樣就會

執行隱士迭代,而執行隱士迭代對於維護插件和內建方法的一致性是至關重要的,在調用的.each()方法內部,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); 
  } 
 }) 
}

依序引用的是每個DOM元素.以上程式碼修改為:


複製程式碼
程式碼如下:

$("li").swapClass("this","that")
//添加新的简写方法 
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) 
}

(2)方法的連綴

要使用方法的連綴,必須在所有的插件方法中傳回一個jQuery物件。傳回的jQuery物件通常就是this所引用的物件。 呼叫: 複製程式碼 程式碼如下:$("li").swapClass("this","that"). css("text-decoration","underline"); 3、新增新的簡寫方法 希望本文所述對大家的jQuery程式設計有所幫助。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn