溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JQuery自定義插件開發(二)

發布時間:2020-06-26 12:54:53 來源:網絡 閱讀:442 作者:owandering 欄目:web開發

JQuery全局函數定義

   下面為JQuery定義一個全局函數globalfunction用于彈出一個對話框:
 

  1. jQuery.globalfunction=function(){  
  2.    alert("myplugin");  

    在頁面上我們可以通過$.glabalfunction來調用
    JQuery還允許我們同時定義多個全局函數,這可以通過JQuery的extend方法或者通過擴展JQuery全局對象的方式來實現。由于使用extend方法有可能會出現函數重名的問題,這里以擴展全局對象為例:
    下面為JQuery擴展全局對象myPlugin,在myPlugin中定義兩個函數
 

  1. jQuery.myPlugin={  
  2.   functionOne:function(){  
  3.     alert("functionOne");  
  4.   },  
  5.   functionTwo:function(param){  
  6.     alert("functionTwo and param"+param);  
  7.   }  

     在頁面上我們可以通過$.myPlugin.functionOne()來調用函數1,
     通過$.myPlugin.functionTwo(param)來調用函數2

JQuery對象函數定義

     JQuery對象函數的強大在于在JQuery插件方法的內部,this引用的都是當前的JQuery對象,因而可以在this上面調用任何內置的JQuery方法,或者提取它包含的DOM節點并操作該節點。
    通過上一篇日志我們知道JQuery實例對象繼承的是JQuery對象的原型,因此擴展JQuery對象函數需要在JQuery.fn上進行操作。下面我們為JQuery實例對象添加方法myMethod彈出對話框。

  1. jQuery.fn.myMethod=function(){  
  2.     alert("myMethod");  
 

    我們可以通過$("#id").myMethod來進行調用。
    下面演示在JQuery對象函數內部this的作用。首先在頁面上我們添加如下組件:

  1. <form name=fm> 
  2.            <ul> 
  3.               <li class="this">標題</li> 
  4.               <li class="that">樣式1</li> 
  5.               <li class="this">樣式2</li> 
  6.             </ul> 
  7.             <input type="button" value="改變樣式" id="swapClass"/> 
  8.     </form> 

    添加樣式

  1. .this{  
  2.      font-stylenormal;  
  3.    }  
  4.    .that{  
  5.      font-styleitalic;  
  6.    }   

    我們需要的效果是點擊改變樣式后將使用this樣式的元素樣式改為that,使用that樣式的元素樣式改為this。
    現在我們通過添加JQuery對象函數來實現
    添加JQuery對象函數

  1. jQuery.fn.swapClass=function(class1,class2){  
  2.     this.each(  
  3.        function(){  
  4.         var $element=jQuery(this)       
  5.         if($element.hasClass(class1)){  
  6.             $element.removeClass(class1).addClass(class2);  
  7.         }else if($element.hasClass(class2)){  
  8.             $element.removeClass(class2).addClass(class1);  
  9.         }  
  10.      });      

   為按鈕綁定此方法

  1. <script type="text/javascript">  
  2.             window.onload=function(){  
  3.                 $("#swapClass").click(function(){  
  4.                    $("li").swapClass("this","that");  
  5.                 });   
  6.                 showBox();   
  7.              }   
  8.     </script>    

   這樣就可以實現此效果了。
   需要注意的是在定義插件的方法中this的運用,this.each中的this為實例化的JQuery對象,在此處即為所有的"li"標簽,而在每一次this.each方法體中的this則是一個DOM元素。

   在網上我們經常能夠看到這樣的定義JQuery對象函數的方法:

  1. (function($) {  
  2.     $.fn.myPluginName = function() {  
  3.         // your plugin logic  
  4.     };  
  5. })(jQuery); 

  通過這種方式在自定義插件方法內部可以使用$關鍵字來代替JQuery關鍵字。那么這種寫法會不會有人覺得比較陌生呢,下篇日志將插入一段題外話介紹一下JavaScript的匿名函數和閉包。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女