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. 《Entity Framework 6 Recipes》中文翻译系列 (29) ------ 第五章 加载实体和导航属性之过滤预先加载的实体集合和修改外键关联

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-13  过滤预先加载的实体集合 问题 你想过滤预先加载的实体集合,另外,你想使用 ...

  2. AngularJs之二

    今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl"> < ...

  3. iOS开发--应用崩溃日志揭秘（二）

    场景 4: 吃棒棒糖时闪退! 用户邮件说, “当rage master吃棒棒糖时应用就闪退…” 另一用户说, “我让rage master 吃棒棒糖,没几次应用就闪退了!”崩溃日志如下: Incide ...

  4. The replication agent has not logged a progress message in 10 minutes.

    打开Replication Monitor,在Subscription Watch List Tab中,发现有大量的status= “Performance critical” 的黄色Warning, ...

  5. Constraint5：unique 约束和null

    unique约束使用unique index来限制列值的唯一性: 创建unique约束之后,column中允许插入null值,unique 约束将两个null值看作是相同的(即null=null为tr ...

  6. Unity3D知识框架

    美术部分:           3d模型,材质,纹理,shader,Animator,Animation,天空盒,灯光效果,烘焙 程序部分:           基本组成:               ...

  7. MySql事务概述

    事务是访问并更新数据库中各种数据项的一个程序执行单元.在事务中的操作,要么都执行修改,要么都不执行,这就是事务的目的,也是事务模型区别于文件系统的重要特征之一. 严格上来说,事务必须同时满足4个特性, ...

  8. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  9. Delegate、Predicate、Action和Func

    写在前面 Delegate Predicate Action Func 逆变和协变 先说下什么是委托(Delegate),委托在C#中是一种类型,和Class是一个级别,但是我们经常把它看做是一个方法 ...

  10. 相克军_Oracle体系_随堂笔记014-锁 latch,lock

    1.Oracle锁类型 2.行级锁:DML语句 3.表级锁:TM 4.锁的兼容性 5.加锁语句以及锁的释放 6.锁相关视图 7.死锁 1.Oracle锁类型 锁的作用     latch锁:chain ...