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. Java static 的一两点使用

    这篇文章是关于Java static关键字的使用,主要会介绍以下的内容: static 的概念 static的各种应用 总结 static 是什么 static 顾名思义是静态的意思.与this相对, ...

  2. pl/sql里的exists和in的差别

    项目中有个需要需要如下pl/sql(数据库是MariaDB) ) AS small FROM cmp_ent_main a WHERE createTime<'2016-9-21' ,,) ) ...

  3. Java 积累复习用

    1.jvm 默认编码:Java的默认编码 2.jvm heap : Java虚拟机的内存组成以及堆内存介绍 3.Java命令学习系列(一)--Jps 4.Java命令学习系列(二)--Jstack 5 ...

  4. 拓展 Android 原生 CountDownTimer 倒计时

    拓展 Android 原生 CountDownTimer 倒计时 [TOC] CountDownTimer 在系统的CountDownTimer上进行的修改,主要是拓展了功能,当然也保留了系统默认的模 ...

  5. Java的学习之路

    记事本 EditPlus eclipse Java的学习软件,已经系统性学习Java有一段时间了,接下来我想讲一下我在Java学习用到的软件. 1.第一个软件:记事本 记事本是Java学习中最基础的编 ...

  6. 关于ie11 的开发者工具

    win7旗舰系统64为,更新ie11: 新安装了ie11浏览器,安装以后发现原来可以正常使用的开发者工具不能使用,提示 Imposible use F12 Developer Tools (Excep ...

  7. Sql Server系列：键和约束

    1 约束的类型 约束可以分为3大类:实体约束.域约束和参照完整性约束. 1.1 实体约束 实体约束都是关于比较行的,实体约束并不关心整体列中的数据,它只对特定行感兴趣. 1.2 域约束 域约束处理一个 ...

  8. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  9. 【原创】开源Math.NET基础数学类库使用(14)C#生成安全的随机数

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  10. android app反编译

    最新在反编译别人的apk,有时候看到别人的app有很炫的效果,就想知道别人是怎么样实现的,顺便自己参考,借鉴一下,下一次如果工作中碰到这个问题就知道怎么实现了.最近恰好放假三天,就研究了一下,一般别人 ...