JQuery自定义插件开发(二)

JQuery全局函数定义

创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站制作、成都网站制作、庐山网络推广、微信平台小程序开发、庐山网络营销、庐山企业策划、庐山品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供庐山建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

   下面为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的匿名函数和闭包。

标题名称：JQuery自定义插件开发(二)
标题URL：https://www.cdcxhl.com/article16/jsehgg.html

成都网站建设公司_创新互联，为您提供网页设计公司、关键词优化、云服务器、企业建站、外贸建站、网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联