JQuery全局函數(shù)定義

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、成都網(wǎng)站制作、廬山網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開發(fā)、廬山網(wǎng)絡(luò)營銷、廬山企業(yè)策劃、廬山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供廬山建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

   下面為JQuery定義一個(gè)全局函數(shù)globalfunction用于彈出一個(gè)對話框：
 

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

    在頁面上我們可以通過$.glabalfunction來調(diào)用
    JQuery還允許我們同時(shí)定義多個(gè)全局函數(shù)，這可以通過JQuery的extend方法或者通過擴(kuò)展JQuery全局對象的方式來實(shí)現(xiàn)。由于使用extend方法有可能會(huì)出現(xiàn)函數(shù)重名的問題，這里以擴(kuò)展全局對象為例：
    下面為JQuery擴(kuò)展全局對象myPlugin,在myPlugin中定義兩個(gè)函數(shù)
 

jQuery.myPlugin={  
  functionOne:function(){  
    alert("functionOne");  
  },  
  functionTwo:function(param){  
    alert("functionTwo and param"+param);  
  }  
} 

     在頁面上我們可以通過$.myPlugin.functionOne()來調(diào)用函數(shù)1，
     通過$.myPlugin.functionTwo(param)來調(diào)用函數(shù)2

JQuery對象函數(shù)定義

     JQuery對象函數(shù)的強(qiáng)大在于在JQuery插件方法的內(nèi)部，this引用的都是當(dāng)前的JQuery對象，因而可以在this上面調(diào)用任何內(nèi)置的JQuery方法，或者提取它包含的DOM節(jié)點(diǎn)并操作該節(jié)點(diǎn)。
    通過上一篇日志我們知道JQuery實(shí)例對象繼承的是JQuery對象的原型，因此擴(kuò)展JQuery對象函數(shù)需要在JQuery.fn上進(jìn)行操作。下面我們?yōu)镴Query實(shí)例對象添加方法myMethod彈出對話框。

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

    我們可以通過$("#id").myMethod來進(jìn)行調(diào)用。
    下面演示在JQuery對象函數(shù)內(nèi)部this的作用。首先在頁面上我們添加如下組件：

 
           
 
              標(biāo)題
 
              樣式1
 
              樣式2
 
            
 
             
     

    添加樣式

.this{  
     font-style: normal;  
   }  
   .that{  
     font-style: italic;  
   }   

    我們需要的效果是點(diǎn)擊改變樣式后將使用this樣式的元素樣式改為that,使用that樣式的元素樣式改為this。
    現(xiàn)在我們通過添加JQuery對象函數(shù)來實(shí)現(xiàn)
    添加JQuery對象函數(shù)

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

   為按鈕綁定此方法

  
            window.onload=function(){  
                $("#swapClass").click(function(){  
                   $("li").swapClass("this","that");  
                });   
                showBox();   
             }   
        

   這樣就可以實(shí)現(xiàn)此效果了。
   需要注意的是在定義插件的方法中this的運(yùn)用，this.each中的this為實(shí)例化的JQuery對象，在此處即為所有的"li"標(biāo)簽，而在每一次this.each方法體中的this則是一個(gè)DOM元素。

   在網(wǎng)上我們經(jīng)常能夠看到這樣的定義JQuery對象函數(shù)的方法：

(function($) {  
    $.fn.myPluginName = function() {  
        // your plugin logic 
    };  
})(jQuery); 

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