小议jQuery插件开发

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便是一个封装得非常好的类,比如我们用 语句 $("#input") 会生成一个 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

时间: 2024-10-23 03:06:42

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

掌握jQuery插件开发

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

jQuery插件开发(一):jQuery类方法

一.jQuery插件开发的方法 jQuery插件的编写方法主要有两种: 1.基于jQuery对象的插件 2.基于jQuery类的插件 二.基于jQuery类的插件 1.什么是jQuery类的插件? jQuery类方法其实就是jquery全局函数,即jquery对象的方法,实际上就是位于jquery命名空间的内部函数.这些函数有一个特征就是不操作DOM元素,而是操作 Javascript非元素对象.直观的理解就是给jquery类添加类方法,可以理解为添加静态方法 2.给jQuery类添加方法. /

jQuery插件开发精品教程(让你的jQuery更上一个台阶)

刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

jQuery 插件开发

jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式.第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQ

JQuery插件开发精品教程,让你的jQuery提升一个台阶

本文转载自 http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择.

jQuery插件开发模式

http://www.cnblogs.com/gavin-num1/p/5655126.html jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. 根据<jQuery高级编程>的描述,jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通常我们使

jQuery插件开发前准备

[前言] 关于jQuery的插件,网上一搜一大把,一开始在项目中使用别人写的插件的时候,真是佩服的五体投地,调用的时候简简单单的几句代码,就能实现很复杂的功能.那么如何开发自己的插件呢?其实并不难,从简单的开始,一步一步网上添加功能,最后咋们也能写出功能强大的插件. [jQuery插件开发模式] jQuery插件开发模式有三种: (1)通过$.extend()来扩展jQuery 多用于拓展工具方法,比如给一个数组封装一个方法,功能是将其中的重复元素删除:$.removeSameItem([1,1

jQuery插件开发---转载

要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,

跟我一起学JQuery插件开发

http://www.cnblogs.com/Leo_wl/archive/2012/04/06/2435511.html 以前一直比较好奇,jquery插件是怎么开发的,怎么写属于自己的插件? 昨天在逛codeproject网站的时候,突然看到一篇文章:How to write plugin in Jquery. 如果对E文好的同学 ,可以看上面的连接. 现在我把上面网站的及结合自己的想法写这篇文章.希望能得到大牛们的支持和谅解...大鸟飞过...欢迎拍装. 资料来源: [1]How to w