JQuery自定义插件开发(二)

发布时间：2020-06-26 12:54:53 阅读：423 作者：owandering 栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

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

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

JQuery自定义插件开发(二)

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签