1.写在前面：

　　大家都知道PHP专注后台与数据库的交互，前端页面中是js的天下，而jQuery作为使用最广泛，最简单有效的js的框架。深受大家的喜欢。

而js作为一门面向对象的开发语言，它独特的语法和函数式的写法，也是妙趣横生。使用jQuery进行插件的开发，就能将一些js的函数封装在一个对象中，并对其扩展，提高了开发的效率，体现了面向对象的优越性。

2.下面是正题：

　　主要有两种形式的jQuery的插件形式：

　　1）对象的形式扩展插件 $.fn.extend 

　　2）函数的形式扩展插件 $.extend

　　这里我们直接给出两个例子：

　　1）对象形式的插件实现的功能是 鼠标点击Input输入框时，弹出其Value值

　　2）函数形式的插件实现的功能是 鼠标移出Input输入框时，弹出其title值

　　大家可以仔细揣摩，两者的不同，再次基础上，写出功能更强大，更健壮的jQuery的插件

　　代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<input id="input" name="name" value="我喜欢jQuery" title="我喜欢js">

<script src="http://www.eol.cn/js/global/jQuery_latest.min.js">

</script>

<script>

/*************编写插件***********/

/*

*1. 对象的形式扩展插件 $.fn.extend   调用 $("#idname").functionName();

*/

(function($){

      $.fn.extend({

        showVal : function(){

           var $this = $(this);

           $this.click(function () {//点击时显示里面的数值

               alert($this.val());

           })

   }

})(jQuery); 

//

/*

*2. 函数的形式扩展插件 $.extend   调用 $.functionName();

*/

      $.extend({

        showTitle : function(){

           $('#input').mouseout(function () {//鼠标移出时弹窗

              var $this = $(this);

               alert($this.attr('title'));

           })

   }

})

})(jQuery)

$(function(){

$("#input").showVal();//1. 对象的形式扩展插件 $.fn.extend   调用 $("#idname").functionName();

$.showTitle();//2. 函数的形式扩展插件 $.extend   调用 $.functionName();

})

</script>

</body>

</html>

总结：

jQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend(object);  给jQuery对象添加方法。
jQuery.extend(object);  为扩展jQuery类本身.为类添加新的方法。

1) jQuery.fn.extend(object);

fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) {//....　

//......

};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。jQuery便是一个封装得非常好的类，比如我们用 语句　$("#btn1") 会生成一个 jQuery类的实例。

jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

上面的列子中 $("#input")　为一个jQuery实例，当它调用成员方法 showVal后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

2) jQuery.extend(object);　

为jQuery类添加添加类方法，可以理解为添加静态方法。如：

$.extend({

add:function(a,b){return a+b;}

});

便为　jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，$.add(3,4); //return 7

by  djp

小议jQuery插件开发的更多相关文章

  1. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  2. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  3. jQuery插件开发精品教程，让你的jQuery提升一个台阶

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  4. jquery插件开发

    jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...

  5. jQuery插件开发（溢出滚动）

    声明:此程序仅针对手机端,简单的封装一个插件,意在记载插件的开发过程,如有错误及不足之处,还望即时指出. 移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到 ...

  6. 从零开始学jQuery插件开发

    http://www.w3cfuns.com/notes/19462/ec18ab496b4c992c437977575b12736c.html jQuery 最成功的地方,是它的可扩展性,通过吸引了 ...

  7. jquery插件开发继承了jQuery高级编程思路

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  8. jQuery插件开发(转)

    jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命 ...

  9. jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...

随机推荐

  1. JSON数据的定义

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. WPF入门教程系列二十二——DataGrid示例(二)

    DataGrid示例的后台代码 1)  通过Entity Framework 6.1 从数据库(本地数据库(local)/Test中的S_City表中读取城市信息数据,从S_ Province表中读取 ...

  3. iOS瀑布流实现(Swift)

    这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写UICollectionViewFlowLayout.下面我将用两种方法实现瀑布流,以及 ...

  4. Redis在windows环境下ThinkPHP的安装和使用

    1.Redis概述: 2.Redis在windows环境下的安装: 下载地址:https://github.com/dmajkic/redis/downloads,选取其中一个zip压缩包:

  5. SSIS Design7：数据类型的选择

    对于SSIS的数据类型,容易遗漏精度的是DateTime,不正确的使用DateTime,time,decimal 等数据类型,可能导致溢出或数据丢失. 1,Variable 和 Parameter的D ...

  6. EasyUI DateTimeBox设置默认时间的注意点

  7. 实战MEF（4）：搜索范围

    在前面的文章中,几乎每个示例我们都会接触到扩展类的搜索位置,我们也不妨想一下,既然是自动扩展,它肯定会有一个或者多人可供查找的位置,不然MEF框架怎么知道哪里有扩展组件呢? 就像我们用导航系统去查找某 ...

  8. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  9. 快速搭建php环境

    WAMP:在windows系统下搭建PHP开发环境 APPSERVER: 两种可用于开发环境的,一般用WAMP LAMP构架 Linux系统 Apache服务器管理软件 Mysql数据库 php语言 ...

  10. ASP.NET Core的配置（1）：读取配置信息

    提到"配置"二字,我想绝大部分.NET开发人员脑海中会立马浮现出两个特殊文件的身影,那就是我们再熟悉不过的app.config和web.config,多年以来我们已经习惯了将结构化 ...