导语 : 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件。但是要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择 , 在工作中也时常会想有自己开发一个插件提供给项目使用的想法,话不多说。

来不及解释了,快上车 。 


jQuery插件开发方式主要有三种(本文章主要讲解第二种也是最常见的一种):


  1. 通过$.extend()来扩展jQuery
  2. 通过$.fn 向jQuery添加新的方法
  3. 通过$.widget()应用jQuery UI的部件工厂方式创建

下面列出第一种与二种的调用方式基本就明白两者的区别了 。


isNumeric(13) 判断参数是否是一个数字 , $.each(parm)循环 ...这些都是jQuery自带静态方法

第二种: $("#id").css() , $("#id").append() , 而一般进行简单插件开发都是以这种方式来进行的 。 

第三种: 呃......不说了 ,没啥意思  (其实是我还没会) 。



通常我们使用第二种方法来进行简单插件开发。第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等......

而第一种方式又太简单,仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时直接通过$符号调用($.myfunction())而不需要选中DOM元素($('#example').myfunction()) 。


先给来个见简单的吧 , 看看插件是个什么东西,以第一种方式为例,  jQuery插件开发(二)中详细讲解第二种也是最值得学的 。

以一个添加jquey后台日志的方法为例 。 


jquery 组织结构图插件 jquery组件开发_jQuery

调用方法为 :


jquery 组织结构图插件 jquery组件开发_jquery插件_02

实现效果为:

jquery 组织结构图插件 jquery组件开发_jQuery_03

如你所见,这种方式用来定义一些辅助方法是比较方便的。比如一个自定义的console,输出特定格式的信息,如不传入参数,打印信息为日期+not message info..! 定义一次后可以通过jQuery在程序中任何需要的地方调用它,第一种方式就是这样了 。

这篇文章写的比较粗糙,只是对jquery插件的基础介绍,插件主要开发以   jQuery插件开发(二) 为主 。