jquery网页开发实例精解教学第15章插件.pdfVIP

第15章 插件开发 • jQuery插件是代码重用的一个很好体现。那么如何开发 jQuery插件，开发插件过程中需要用到哪些知识，需要注 意什么？这正是本章所有讲解的主要内容。 15.1 jQuery插件开发基础 • 本节我们介绍在jQuery开发过程中需要用到什么样的基础 知识，插件与函数之间的区别是什么。 15.1.1 jQuery插件介绍 • jQuery插件总体来说是对jQuery框架的功能补充，有着相 对独立的功能，并且自成体系。它有着独立的文件和方法， 通过接口进行调用。这里所说的接口就是前面在介绍插件 时使用的初始化函数及其他功能函数。更形象得说， jQuery插件是提供各种各样功能扩展的jQuery模块，类似 于计算机的各种功能扩展卡。 • 1.jQuery插件分类 • 我们这里所说的分类不是指功能分类，而是开发jQuery插件 过程中，开发形式上的分类： • 封装对象方法的插件：这种插件也叫对象级别插件，它主要 是为对象添加方法，并将这些方法封装到对象中。 • 封装全局函数的插件：这种插件也叫类级别插件，类级别的 插件开发最直接的理解就是给jQuery类添加类方法，可以理 解为添加静态方法。典型的例子就是$.AJAX()这个函数，将 函数定义于jQuery 名空间中。 • 扩展选择器插件：这种插件是在原有jQuery选择器的基础上 对特定对象扩展使用特殊选择器。例如，MoreSelectors For Jquery就是一个典型jQuery选择器扩展。 • 2.jQuery插件与jQuery固有函数的区别 • jQuery固有函数是jQuery框架内置的函数，不需要添加额 外文件 。而jQuery插件则是在jQuery框架基础上建立 起来的功能模块。在插件内同样需要使用jQuery内置函数， 插件是需要jQuery固有工具函数支持的。 15.1.2 jQuery插件开发基础知 识 • 开发jQuery插件需要掌握知识点： • （1）HTML/XHTML，这个不用多说，我们的jQuery的所有 实现效果最后都要通过标记来实现。 • （2）CSS 面使用插件的过程中我们发现很多插件除了 有自己的功能代码文件外还有配套的CSS文件，这些文件 主要为了插件在动态改变元素样式时使用。 • （3）Javascript，jQuery框架本身就是由Javascript编 写，我们在使用jQuery时也是通过Javascript语言来操作。 • jQuery框架中需要注意的内容： • （1）选择器，$是jQuery的简写形式。所以，jQuey()和$() 的意思是一样的；所有用$()的地方，$都可以用jQuery代替。 • （2）插件类型 ：用jQuery.extend增加的函数，或者说 扩展的函数，可以理解成添加类方法——用类名调用；用 jQuery.fn.extend增加的函数，或者说扩展的函数，可以理 解成添加对象方法，即添加成员函数，用对象名调用。 • （3）对象原型，jQuery.fn=jQuery.prototype，所以， jQuery.fn是jQuery.prototype的别名。 • （4）内置工具函数。 15.1.3 创建一个简单jQuery插 件 • 在这里我们通过一个例子来初步认识一下jQuery插件开发 过程。这个例子是封装对象方法的插件例子。 • 1.this关键字的使用 • 效果如图所示。 • 2.插件中this对象的返回 • 对于jQuery来说它的优势之一是函数链，也就是一个对象可 以 通过调用一系列的函数完成某个功能。这需要 jQuery函数能如实返回调用它的对象。因此，为了保证 jQuery的 特性，我们要保证编写的插件能够返回this对 象。下面，我们可以在原有插件的基础上进行修改，完成返 回this对象功能。 • 效果如图1和图2所示。 • 图1