小议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便是一个封装得非常好的类,比如我们用 语句 $("#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
- 作者:天行健·自强不息
- 出处:http://www.cnblogs.com/aiweixiao/
- 本文版权归作者和博客园共有,欢迎转载,如需联系 sishuinianhua369#126.com
如果您觉得本文对您的学习有所帮助,可通过微信或者支付宝 来打赏博主,增加博主的写作动力
微信支付 支付宝支付
![](https://images.cnblogs.com/cnblogs_com/aiweixiao/916249/t_%E3%80%90%E5%BE%AE%E4%BF%A1%E3%80%91%E5%BE%AE%E4%BF%A1-%E6%94%B6%E6%AC%BE2%E5%85%83.jpg)
![](https://images.cnblogs.com/cnblogs_com/aiweixiao/916249/t_%E6%94%AF%E4%BB%98%E5%AE%9D-%E6%94%B6%E6%AC%BE.png)