[转]jquery插件创建 jquery.fn.extend与jquery.extend
本文转自:http://www.cnblogs.com/wyjgreat/archive/2011/07/19/2110754.html
jQuery为开发插件提拱了两个方法,分别是:
JavaScript代码
- jQuery.fn.extend(object);
- jQuery.extend(object);
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
fn 是什么东西呢。查看jQuery代码,就不难发现。
JavaScript代码
- jQuery.fn = jQuery.prototype = {
- init: function( selector, context ) {//….
- //……
- };
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。
虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。
jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:
XML/HTML代码
- $.extend({
- add:function(a,b){return a+b;}
- });
便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
- $.add(3,4); //return 7
jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
- $.fn.extend({
- alertWhileClick:function(){
- $(this).click(function(){
- alert($(this).val());
- });
- }
- });
- $(“#input1″).alertWhileClick(); //页面上为:<input id=”input1″ type=”text”/>
$(“#input1″) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。
注意:
在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现 jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.js中到处体现这一点
[转]jquery插件创建 jquery.fn.extend与jquery.extend的更多相关文章
- jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。
公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...
- 自己做jQuery插件:将audio5js封装成jQuery语音播放插件
日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装. 首先先简单介绍一下Audio5js吧. Audio5js是一个能够 ...
- jquery插件的2种扩展开发(jQuery.extend和jQuery.fn.extend的区别)
1.类级别 jQuery.extend(object) 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQu ...
- 再谈JQuery插件$.extend(), $.fn和$.fn.extend()
在我的博客中,曾经写过一篇关于JQuery插件的文章 https://www.cnblogs.com/wphl-27/p/6903170.html 今天看一个项目的代码时,看到使用JQuery插件部 ...
- 如何创建一个自定义jQuery插件
简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...
- jQuery 插件基础
jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...
- jQuery 插件编程精讲与技巧
适应的读者: 1.有一定的jquery编程基础但是想在技能上有所提升的人 2.前端开发的程序员 3.对编程感兴趣的学生 为什么要学习jquery插件的编写? 为什么要学习jquery插件的编写?相信这 ...
- jQuery插件实践之轮播练习(一)
所有文章搬运自我的个人主页:sheilasun.me 因为从来没写过jQuery插件,所以本文要通过一个轮播的例子,练习jQuery插件的写法. 新建插件文件 在讨论细节之前,先新建插件文件(当然也可 ...
- jQuery插件——下拉选择框
其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...
随机推荐
- Python--面向对象编程--时钟实例开发
在学习python面向对象编程的时候,心血来潮,决定写一个时钟模型来玩玩,所以就有了现在这个小玩意,不过python这个东西确实是挺好玩的 方法:运用python的tkinter库开发图形化时钟程序 ...
- 在robotframework里面,怎么在已有的字典中加一个键值对呢
- SQL Server之XML PATH()
)='SYS20130228000000012'; SELECT ',' + MedicineTypeID FROM Dic_Res_StoreToType b WHERE b.MedicalInst ...
- 动态绑数据(Repeater控件HeaderTemplate和ItemTemplate)
前几天,Insus.NET有写了<动态绑数据(GridView控件Header和ItemTemplate)>http://www.cnblogs.com/insus/p/3303192.h ...
- epoll简介
1.epoll简介 epoll是I/O事件通知工具,与select/poll相比,epoll最大的好处在于它不会随着监听fd数目的增长而效率降低.epoll API既可以用作edge触发的接口,也可以 ...
- A Plug for UNIX UVA - 753(网络流)
题意:n个插座,m个设备及其插头类型,k种转换器,没有转换器的情况下插头只能插到类型名称相同的插座中,问最少剩几个不匹配的设备 lrj紫书里面讲得挺好的. 先跑一遍floyd,看看插头类型a能否转换为 ...
- Ubuntu1804登录界面闪退
目前主力机操作系统已经由Ubuntu 16.04 lts升级到Ubuntu 18.04 lts.由于是跨版本升级过来,而且由unity(个人觉得挺好)替换成了gnome3,经常出点小问题.这次由于安装 ...
- P3241 [HNOI2015]开店 动态点分治
\(\color{#0066ff}{ 题目描述 }\) 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱. 这样的想 ...
- kuangbin专题十六 KMP&&扩展KMP HDU2609 How many (最小字符串表示法)
Give you n ( n < 10000) necklaces ,the length of necklace will not large than 100,tell me How man ...
- linux1--常用命令
1.目录结构 2./etc:系统配置文件存放地 比如你的wsgi的配置文件,nginx 3./usr 应用程序存放地 比如你的jdk应用程序存放地 4./root 系统管理员root的家目录 4.1像 ...