jQuery插件制作的实例教程(jquery插件大全)

推荐整理分享jQuery插件制作的实例教程(jquery插件大全)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery 插件写法,简单的jquery插件实例,jquery插件是干什么的,jquery插件大全,jquery插件使用教程,jquery 插件写法,jquery插件大全,jquery 插件编写,内容如对您有帮助，希望把文章链接给更多的朋友！

一、jQuery插件的类型

1. jQuery方法

很大一部分的jQuery插件都是这种类型，由于此类插件是将对象方法封装起来，在jQuery选择器获取jQuery对象过程中进行操作，从而发挥jQuery强大的选择器优势。

2. 全局函数法

可以把自定义的功能函数独立附加到jQuery命名空间下，从而作为jQuery作用域下的一个公共函数使用。但全局函数没有被绑定到jQuery对象上，故不能在选择器获取的jQuery对象上调用。需要通过jQuery.fn()或$.fn()方式进行引用。

3. 选择器法

如果觉得jQuery提供的选择器不够用或不方便的话，可以考虑自定义选择器。

二、jQuery插件的机制

1. jQuery.extend()方法

这种方法能够创建全局函数或选择器。

所谓全局函数，就是jQuery对象的方法，实际上就是位于jQuery命名空间内部的函数，有人把这类函数称为实用工具函数，这些函数都有一个共同特征，就是不直接操作DOM元素，而是操作Javascript的非元素对象，或者执行其他非对象的特定操作，如jQuery的each()函数和noConflict()函数。

例如，在jQuery命名空间上创建两个公共函数：

jQuery.extend()方法除了可以创建插件外，还可以用来扩展jQuery对象。

例如，调用jQuery.extend()方法把对象a和对象b合并为一个新的对象，并返回合并对象将其赋值给变量c：

如果要向jQuery命名空间上添加一个函数，只需要将这个新函数制定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为$，jQuery.smalluv==$.smalluv。

例如，创建jQuery全局函数：

2. jQuery.fn.extend()方法

这种方法能够创建jQuery对象方法。

举一个最简单的jQuery对象方法例子：

三、初步总结

在jQuery匿名函数中,采用jQuery.extend();方法创建jQuery插件在jQuery匿名函数中,采用对象.属性=函数的方式创建jQuery插件

四、编写实例

写法一

插件主体：

调用

点评

1. 自调用匿名函数

用处：通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。这点非常有用也是一个JS框架必须支持的功能，jQuery被应用在成千上万的JavaScript程序中，必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。

2. 匿名函数为什么要传入window

通过传入window变量，使得window由全局变量变为局部变量，当在jQuery代码块中访问window时，不需要将作用域链回退到顶层作用域，这样可以更快的访问window；这还不是关键所在，更重要的是，将window作为参数传入，可以在压缩代码时进行优化，看看jquery.min.js：

3. 全局变量this定义

使得在插件的函数内可以使用指向插件的this

4. 插件配置

设置默认参数，同时也可以再插件定义时传入参数覆盖默认值

5. 初始化函数

一般的插件会有init初始化函数并在插件的尾部初始化

6. 私有函数、公有函数

私有函数：插件内使用，函数名使用”_”作为前缀标识

共有函数：可在插件外使用，函数名使用”this.”作为前缀标识，作为插件的一个方法供外部使用

7. return this

最后返回jQuery对象，便于jQuery的链式操作

写法二

主体结构

点评

1. 美观

插件的方法写在外部，并通过在插件主体传递this的方式调用

2. 定义插件版本号

不过在这里还是没有用到

3. 关于call

这里的第一个参数为传递this，后面的均为参数

语法：

call([thisObj[,arg1[, arg2[, [,.argN]]]]])定义：调用一个对象的一个方法，以另一个对象替换当前对象。

说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

4. 关于”this”

在插件的方法中，可能有用到指向插件的this、和指向事件触发的this，所以事件触发的this用event来获取:event.cuerrntTarget

event.currentTarget：指向事件所绑定的元素，按照事件冒泡的方式，向上找到元素event.target：始终指向事件发生时的元素如：

html代码

js代码

结果输出

写法三（原生写法）

主体结构

使用

点评：

1. 关于属性覆盖(对象深拷贝)

原生函数实现方法

demo：

基于jQuery的实现方法：

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。 未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

demo:

2. 关于this

这个对象的所有方法的this都指向这个对象，所以就不需要重新指定

写法四

主体结构

总结

写法四和写法三其实都差不多，但是你们有没有看出其中的不一样呢？

两种都是利用原型链给对象添加方法：

写法三：

写法四：

细看写法四利用“对象直接量”的写法给EditorUtil对象添加方法，和写法三的区别在于写法四这样写会造成consturctor属性的改变

constructor属性：始终指向创建当前对象的构造函数

每个函数都有一个默认的属性prototype，而这个prototype的constructor默认指向这个函数。如下例所示：

为什么呢？

原来是因为覆盖Person.prototype时，等价于进行如下代码操作：

而constructor属性始终指向创建自身的构造函数，所以此时Person.prototype.constructor === Object，即是：

怎么修正这种问题呢？方法也很简单，重新覆盖Person.prototype.constructor即可：

jQuery 获取多选框的值及多选框中文的函数 DOM结构我的多选框的dom结构,都是下面这种的.都是基础知识,不做过多阐述.labelclass="input_checkbox"inputtype="checkbox"name="sell_area"vlaue="0"span甘肃/span/labellabelclass

老司机带你解读jQuery插件开发流程 jquery插件开发模式jquery插件一般有三种开发方式：通过$.extend()来扩展jQuery通过$.fn向jQuery添加新的方法通过$.widget()应用jQueryUI的部件工厂方式创建第一种

Web前端新人笔记之jquery入门心得(新手必看) 本章将为大家介绍以下几点内容；1、jquery的主要特点；2、建立jquery的编码环境；3、简单jquery脚本示例；4、选择jquery而不是纯javaScript的理由；5、常用