萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery插件制作之全局函數用法實例

jQuery插件制作之全局函數用法實例

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

  1、添加新的全局函數

  所謂的全局函數,實際上就是jQuery對象的方法,但從實踐的角度上看,他們是位於jQuery命名空間內部的函數

  (1)添加一個函數,只需要將新函數指定為jQuery對象的一個屬性。

  ?

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

  調用:

   代碼如下:

  $.five();

  (2)添加多個函數

  ?

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

  調用:

  代碼如下:

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

  以上的方法會面臨命名空間沖突的風險,為避免這個問題,最好把屬於這個插件的所有全局函數,都封裝到一個對象中,如下:

  ?

1 2 3 4 5 6 7 8 9 10 11 //命名空間繼承 jQuery.myPlugin ={ one : function(obj){ var object = obj; var id = object.attr("id"); alert(id); }, two : function(){ alert(22); } }

  這樣其實是為全局函數創建了另一個命名空間:jQuery.myPlugin.

  2、添加jQuery對象方法

  jQuery中大多數內置的功能都是通過其對象的方法提供的。

  ?

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

  調用:

   代碼如下:

  $.fn.myMethod();

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

  實例:以下是行為不正確的方法

  ?

1 2 3 4 5 6 7 8 9 10 11 <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" />

  ?

1 2 3 4 5 6 7 8 9 10 11 12 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元素.以上代碼修改為:

  ?

1 2 3 4 5 6 7 8 9 10 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所引用的對象。

  ?

1 2 3 4 5 6 7 8 9 10 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、添加新的簡寫方法

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //添加新的簡寫方法 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程序設計有所幫助。

copyright © 萬盛學電腦網 all rights reserved