JQuery全局函數定義
下面為JQuery定義一個全局函數globalfunction用于彈出一個對話框:
- jQuery.globalfunction=function(){
- alert("myplugin");
- }
在頁面上我們可以通過$.glabalfunction來調用
JQuery還允許我們同時定義多個全局函數,這可以通過JQuery的extend方法或者通過擴展JQuery全局對象的方式來實現。由于使用extend方法有可能會出現函數重名的問題,這里以擴展全局對象為例:
下面為JQuery擴展全局對象myPlugin,在myPlugin中定義兩個函數
- jQuery.myPlugin={
- functionOne:function(){
- alert("functionOne");
- },
- functionTwo:function(param){
- alert("functionTwo and param"+param);
- }
- }
在頁面上我們可以通過$.myPlugin.functionOne()來調用函數1,
通過$.myPlugin.functionTwo(param)來調用函數2
JQuery對象函數定義
JQuery對象函數的強大在于在JQuery插件方法的內部,this引用的都是當前的JQuery對象,因而可以在this上面調用任何內置的JQuery方法,或者提取它包含的DOM節點并操作該節點。
通過上一篇日志我們知道JQuery實例對象繼承的是JQuery對象的原型,因此擴展JQuery對象函數需要在JQuery.fn上進行操作。下面我們為JQuery實例對象添加方法myMethod彈出對話框。
- jQuery.fn.myMethod=function(){
- alert("myMethod");
- }
我們可以通過$("#id").myMethod來進行調用。
下面演示在JQuery對象函數內部this的作用。首先在頁面上我們添加如下組件:
- <form name=fm>
- <ul>
- <li class="this">標題</li>
- <li class="that">樣式1</li>
- <li class="this">樣式2</li>
- </ul>
- <input type="button" value="改變樣式" id="swapClass"/>
- </form>
添加樣式
- .this{
- font-style: normal;
- }
- .that{
- font-style: italic;
- }
我們需要的效果是點擊改變樣式后將使用this樣式的元素樣式改為that,使用that樣式的元素樣式改為this。
現在我們通過添加JQuery對象函數來實現
添加JQuery對象函數
- 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);
- }
- });
- }
為按鈕綁定此方法
- <script type="text/javascript">
- window.onload=function(){
- $("#swapClass").click(function(){
- $("li").swapClass("this","that");
- });
- showBox();
- }
- </script>
這樣就可以實現此效果了。
需要注意的是在定義插件的方法中this的運用,this.each中的this為實例化的JQuery對象,在此處即為所有的"li"標簽,而在每一次this.each方法體中的this則是一個DOM元素。
在網上我們經常能夠看到這樣的定義JQuery對象函數的方法:
- (function($) {
- $.fn.myPluginName = function() {
- // your plugin logic
- };
- })(jQuery);
通過這種方式在自定義插件方法內部可以使用$關鍵字來代替JQuery關鍵字。那么這種寫法會不會有人覺得比較陌生呢,下篇日志將插入一段題外話介紹一下JavaScript的匿名函數和閉包。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。